In this demo I’ve set up a simple form with a number of different fields, the code should be pretty self explanatory, but there are a couple of new features of interest.
- New input types – email, url, number and range
- New pseudo classes – :valid, :invalid:, :required
- You can’t submit the form until all fields are counted as valid by the browser
I’ve also added a few CSS3 touches to make things a little nicer to look at:
- CSS transitions and transformations
- :not pseudo class
Things to try
- Submit the form without completing it
- Notice that the browser checks whether the input is valid
- The iPhone offers different keyboards depending on the input type
- Check what it looks like in older browsers (fine, but no validation)
The code is commented where interesting, so take a look at the source.