Getting To Know HTML5 Forms

HTML5

In a previous article you learnt what is HTML5 all about. But this article missed out a lot of new features which come with HTML5 including audio and video embedding using HTML5. But one of the features which I am most excited about is the new HTML5 form features.

HTML5 comes with loads of new things to do with forms. All the things you used to with Javascript with forms you can now do most of things with HTML5. You can now easily add validation, date pickers, sliders, colour pickers and much more.

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:

  • Search

    Used on search field of your website, works just like the standard text input type.

  • URL

    The URL input type will automatically get validated when the form is submitted and the value must be a valid URL.

  • Email

    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

    Number input types mean that you can only enter numbers in these text boxes.

  • Range

    Range input types will create a slider to select a number from a min and max range.

  • Color

    The color input type will provide a color picker on the form.

You can get all these features and you don't have to write any Javascript.

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.

No Javascript

The best thing about these new features is that you don't have to write any Javascript. The features listed above are very common form features which you need to do on most forms. Now you can do this with HTML5 by just adding a new attribute to the input types.

Form Validation

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.

Browser Support

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 5.1
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 5.1
search No 4.0 11.0 10.0 No
color No No 11.0 12 No

As you can see most of the modern browsers support these features today so why not add them to your website now?

Advertise here

Comment