CHAPTER 8  USING THE FORMS API

range range.

required Any elements that have been marked as required will be selected by this pseudo-class.

optional Form elements that are not marked as required fall into this pseudo-class. Only form elements fit this category.

With these pseudo-classes, it is easy to mark form controls in a page with visual styling that changes as the form elements themselves adjust. For example, to show all invalid form elements with a red background, you can simply use the CSS rule:

:invalid { background-color:red;

}

These pseudo-classes will adjust automatically as the user enters input. No code is required!

Summary

In this chapter, you have seen how to take something old—HTML forms—and make it into something new by using new elements, attributes, and APIs available in HTML5. We’ve seen new controls for advanced input types, with even more to come. We’ve seen how client validation can be integrated directly into form controls in order to prevent unnecessary server round trips to process bad data. Overall, we’ve seen ways to reduce the amount of scripting you need to create full-featured applications user interfaces.

In the next chapter, we’ll investigate how browsers give you the ability to spawn independent execution environments to handle long-running tasks: HTML5 Web Workers.

215