Select Page

Category: forms

All About mailto: Links

You can make a garden variety anchor link () open up a new email. Let’s take a little journey into this feature. It’s pretty easy to use, but as with anything web, there are lots of things to consider. The basic functionality Email Us It works! But we immediately run into a handful of UX issues. One of them is that clicking that link surprises some people in a way they don’t like. Sort of the same way clicking on a link to a PDF opens a file instead of a web page. Le sigh. We’ll get to that...

Read More

The Magic of React-Based Multi-Step Forms

One way to deal with long, complex forms is to break them up into multiple steps. You know, answer one set of questions, move on to another, then maybe another, and so on and so forth. We often refer to these as multi-step forms (for obvious reasons), but others also take to calling it a “wizard” form. Multi-step forms can be a great idea! By only showing a few inputs on a screen at a time, the form may feel more digestible and prevent users from feeling overwhelmed by a sea of form fields. Although I haven’t looked it...

Read More

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
www.000webhost.com