Wednesday, August 24, 2011

Styling required fields with a star

Form fields can be valid or invalid. They can be invalid because they were marked as required, and no value was entered, because the value doesn't match the expected type—say, a number is expected—or for some other reason.

For the longest time, the following styling logic has applied to invalid fields, for forms you create with Form Builder:
  1. When you start a new form, no special styling is applied to invalid fields.
  2. When you exit a field, if its value is invalid, the field is highlighted as invalid, and an alert message shows below the field.
  3. When you save or submit the form, all the invalid fields you haven't visited yet are highlighted as invalid, as in step 2.
We heard from users that, in addition to this, they wanted to have the required fields clearly marked, right away as soon as the form shows. And starting today, this is what happens out of the box with new nightly builds. This way, as soon as you load a form, you will know what are the fields you really need to fill out.

And this feature is implemented 100% in CSS, just like the highlighting of invalid fields discussed earlier, so you can entirely customize this behavior.

No comments:

Post a Comment