- Have a dedicated page for login
- Expose all required fields
- Keep all fields on one page
- Don’t get fancy
Friday, February 22nd, 2019
Monday, January 7th, 2019
In which Matthew disects a multiple choice quiz that uses CSS to do some clever logic, using the
:checked pseudo-class and
Monday, October 8th, 2018
I quite like this date-picking interface. It would be nice if browsers picked it up for
Tuesday, October 2nd, 2018
Oh, this will be good! Adam has been working on, thinking and writing about forms for quite a while and he has distilled that down into ten patterns. You just know that progressive enhancement will be at the heart of this book.
By the end of the book, you’ll have a close-to exhaustive list of ready-to-go components, delivered as a design system that you can fork, contribute to and use immediately on your projects. But more than that, you’ll have the mindset and rationale behind when or when not to use each solution, which is just as important as the solution itself.
Tuesday, July 31st, 2018
A great collection of styled and accessible form elements:
Form controls are necessary in many interfaces, but are often considered annoying, if not downright difficult, to style. Many of the markup patterns presented here can serve as a baseline for building more attractive form controls without having to exclude users who may rely on assistive technology to get things done.
Wednesday, June 20th, 2018
A lot of the issues here are with abuses of the
placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).
Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.
Thursday, May 31st, 2018
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
Sunday, May 6th, 2018
The slides from a presentation by Drew on all the functionality that browsers give us for free when it comes to validating form inputs.
Saturday, April 28th, 2018
If you’re looking for an accessible standalone autocomplete script, this one from GDS looks very good (similar to Lea’s awesomplete).
Friday, April 6th, 2018
Thursday, March 29th, 2018
The answers to these questions about forms are useful for just about any website:
- Is It OK To Place A Form In Two Columns?
- Where Should Labels Be Placed?
- Can We Use Placeholder Text Instead Of A Label?
- How To Lessen The Cognitive Load Of A Form?
- Are Buttons Considered Part Of A Form’s UX?
- Is It Possible To Ease The Process Of Filling A Form?
- Does The User’s Location Influence A Form’s UX?
Wednesday, March 28th, 2018
Saturday, January 6th, 2018
Ana goes into exhaustive detail on all the differences in the shadow DOM and styling of
input type="range" across browsers.
I’m totally fine with browsers providing different styling for complex UI elements like this, but I wish they’d at least provide a consistent internal structure and therefore a consistent way of over-riding the default styles. Maybe then people wouldn’t be so quick to abandon native elements like this in favour building their own UI components from scratch—the kind of over-engineering that inevitably ends up being under-engineered.
Wednesday, November 29th, 2017
An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.
HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?
Monday, November 20th, 2017
Instead of being prescriptive about error messaging, we use what the browser natively gives us.
Wednesday, November 1st, 2017
Good question! And a good answer:
If you really need it, which you probably don’t,
readonlyis what you want.
Wednesday, September 6th, 2017
An interesting idea from Ruth—using subtle sounds to augment inline form validation.
There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.
Thursday, July 20th, 2017
Sunday, June 25th, 2017
A look at the feedback needed for a slider control that feels “right”.
You can get most of the behavioural (though not styling) suggestions in HTML by doing this:
<form> <input type="range" min="0" max="100" value="50" onchange="amount.value=this.value" onmousemove="amount.value=this.value"> <output name="amount">50</output> </form>
Tuesday, May 30th, 2017
Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.
No images were harmed in the making of these form controls.