Before HTML5, adding things such as date pickers, placeholder text, and range sliders into forms has always needed JavaScript. Similarly, there has been no easy way to tell users what we expect them to input into certain input fields, for example, whether we want users to input telephone numbers, e-mail addresses, or URLs. The good news is that HTML5 largely solves these common problems.
We have two main aims in this chapter. Firstly, to understand HTML5 form features and secondly, to understand how we can lay out forms more simply for multiple devices with the latest CSS features.
In this chapter, we will learn how to:
Easily add placeholder text into relevant form input fields
Disable auto-completion of form fields where necessary
Set certain fields to be required before submission
Specify different input types such as e-mail, telephone number, and URL
Create number range sliders for easy value selection
Place date and color pickers into a form
Learn...