Select Page

Category: forms

HTML for Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave. Me (coding a form): Tiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!Me: Wait, why are you here? Is this going to blow up on me? What do you know that I don’t? — Dave SPOOPert (@davatron5000) October 9, 2018 It seems like zip codes are just numbers, right? So… The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices. But Zach pointed out that type="number" is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). Filament group also has a little lib for fixing this. This is the perfect job for inputmode, as Jeremy suggests</a<: But the support is pretty bad at the time of this writing. A couple of people mentioned trying to hijack type="tel" for it, but that has its own downsides, like rejecting properly formatted 9-digit zip codes. So, zip codes, while they look like numbers, are probably best treated as strings. Another option here is to leave it as a text input, but force numbers with pattern, as Pamela Fox documents: The post HTML for Zip Codes appeared first on CSS-Tricks....

Read More

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It’s a checkbox () that isn’t checked. Nor is it not checked. It’s indeterminate. We can even select a checkbox in that state and style it with CSS! Some curious points though: It’s only possible to set via JavaScript. There is no HTML attribute or value for it. It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked. So, say you had a form like this: And, for whatever reason, you make that checkbox indeterminate: let veg = document.querySelector(".veg"); veg.indeterminate = true; If...

Read More

CSS Only Floated Labels with :placeholder-shown pseudo class

The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label moves from inside the input to outside of it. Like so: Although I don’t see this pattern used on the web all that much, I do think it’s an interesting one! There are different approaches to it, but Nick Salloum describes a new one using a combination of :not and :placeholder-shown: This UI technique does indeed slightly bend the...

Read More

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a . This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type="number" isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does,...

Read More

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at...

Read More
  • 1
  • 2
www.000webhost.com