There are many new interesting stuff in HTML5 forms, such as basic browser validation, new input types and new attributes, interestingly CSS3 also comes to support them with some new addition of pseudo-classes. Let’s check them out;

Required & Optional Fields

This is a common thing you may find in a web form, mandatory field, where that field has to be completed before we can submit the form. In HTML5 we can do so by adding the new required attribute, this way;

<input type="text" required>

At the same time, CSS3 also has new pseudo-class, :required ,to target the field with required attribute. Assuming that your html markup is as follows;

<input type="text" id="foo" placeholder="Enter text" required>
<label for="foo">Label</label>

Now, we can do this way through the style sheet to add the (*) sign;

input:required + label::after {
content: " *";
color: red;
}

The snippet above will target the label next to the required field, and add an asterisk sign through ::after  pseudo-class. Also, notice that I used double-colon for the pseudo-element, this practice is to distinguish it from the pseudo-classes, as we use them both in single rule.

Other elements in the form that do not have the required attributes is treated as optional, and CSS3 also add new pseudo-class to target those elements namely :optional.

input:optional + label::after {
content: "(optional)";
color: grey;
}

Similarly to our previous styles, the styles above will add extra text, (optional), next to the label through the ::after pseudo-element, and by adding additional styles it will result in the following presentation.

<code></code>

Valid and Invalid

HTML5 introduces the following new input types; email, phone and URL. These input types come with specific validation as well. For example, when the user fill out the email field with an invalid email address, the browser will display an error, like so;

Now, we can also add styles to those fields based on their validation status with these new CSS3 pseudo-classes; :valid and :invalid, here is an example;

input:valid {
background-color: white;
}
input:invalid {
background-color: red;
}

The styles above will instantly turn the input background into red when the entered data is invalid and it will remain white when the data is considered valid.

One thing to note though; since the CSS is applied immediately after it is loaded, the input will be initially white, except when the required attribute is added, the input will firstly become red instead, and then it will turn into white when the entered data is valid.

<code></code>

Out of Range Number

HTML5 brings another new input types, called number that allows us to add a number input fields with a spinner beside the box to increase or decrease the number value within a specific range.

I think this is rarely happened where the generated number is out of the range, since we are able to specify the min and max allowed number of the field, in this way;

<input type="number" min="1" max="5">

But, just in case it would happen in certain ways, we can also target and style it upon the validation with the following new CSS3 pseudo-classes; :in-range and :out-of-range. Check out the following Pen.

<code></code>

Read-Only Fields

Making the field to become read-only is nothing new in HTML, we can do this way to prevent users for modifying the value;

<input type="text" id="foo" value="Read Only" readonly>

but it is considerably new stuff for CSS3. In CSS3, we have new pseudo-classes for it, :read-only and :read-write. The utility is quite descriptive, we can use them to target elements that has readonly attribute using :read-only and we can use :read-write to target the opposite elements.

Here we go, see the Pen below to see it in action;

<code></code>

Final Thought

It’s really interesting to see how CSS3 and HTML5 is working together, and it is obviously will change the way web designers and developers build websites in a certain sense in the future. For the time being, the HTML5 forms and the new CSS3 pseudo-classes we have discussed above are very limited in term of browsers support.

But don’t worry, there are some ways we can do to make these new features run in older browsers, we will take a look at this matter in the next post. So, stay tuned.

Further Reading

If you want to dig into this subject deeper, here are a few good sources:

• New User Interface State pseudo-classes - W3.org
• CSS Pseudo-classes – W3Schools.org
• A Form of Madness – Dive Into HTML5
• The Current State of HTML5 Forms – Wufoo.com
• Bring Your Forms Up to Date With CSS3 and HTML5 Validation – Webdesigntuts+