Getting To Know HTML5 Forms
What's New With HTML5 Forms
With HTML5 forms comes with loads of new input types. In old HTML you get things like text, checkbox, radio, button and submit. But now we have loads more input types to play with.
The new input types include:
Used on search field of your website, works just like the standard text input type.
The URL input type will automatically get validated when the form is submitted and the value must be a valid URL.
The email input type is the same as URL being it will automatically get validated when the form is submitted and the value must be a valid email address.
- Datetime, date, month, week, time, and datetime-local
This will provide you with date pickers.
Number input types mean that you can only enter numbers in these text boxes.
Range input types will create a slider to select a number from a min and max range.
The color input type will provide a color picker on the form.
New HTML Input Attributes
Along with the new input types we also get some new attributes which help you control the new input types.
Here are some of the new attributes you get with HTML5.
- List — points to a datasource element which has suggested values.
- Max and Min — restricts valid date/time and number types.
- Pattern — allows a regular expression to be used for validation.
- Placeholder — displays default text that will appear when the input is empty, when the input has focus the text will be removed.
- Required - Makes sure that this is required before submitted the form.
The best feature form HTML5 forms is the validation you get from the form. This is something you need on all forms and now you can easily get this done just by using the required attribute. HTML5 will even add a tooltip on submit to let the user know that they need to fill out this field of the form.
As you can see most of the modern browsers support these features today so why not add them to your website now?
Learn how to code with Treehouse
- Learn projects with access to 1000+ videos
- Practice live with our Code Challenge Engine
- Get help in our members-only forums
Join the weekly newsletter
Sign up for our newsletter. You'll be updated on new tutorials as they come available.
Subscribe today and get a 50% discount code to Paulund