Marking fields required best practice for user experience and accessibility
- best CSS to indicate required form field
So we noticed that required form elements were not getting any kind of indicator. OK cool so i threw on in inspector a few extra classes indicating the field as a requirement, js-form-required required form-required required-input whatever, just to bring up the default styling. Nothing. Not that core or webform or Bootstrap form stylings were being overridden, but there was no default styling for required fields at all, anywhere.
After not seeing any required form field stylings from core or webform on this Bootstrap-based theme, nor in Bulma, grepping simply for the word required which would also show up for the pseudo-class :required if any where using that, i’m rather flabbergasted.
But it prompted me to look into the best way it should be done.
Let’s start with the fact that yes, fields in forms should have indications when they are required:
Marking Required Fields in Forms
A lot of cool approaches to form validation in this article, but not anything – surprisingly – for a generally required indicator (as opposed to “hey this is required but you touched it and then left it blank”). But the placeholder trick to only give that warning if people do touch, reported as not supported well in the article, happily have full support (even IE11 with a prefix) in the five years since it was published.
Here’s some great classic advice from people ten years ago, most of them based on 10 years experience already then!