How to Use HTML5 Form Elements

We started this discussion by defining what HTML forms are and their main functions in web development process. We discussed the most common form elements. In this discussion, we look at new HTML 5 elements and attributes.

HTML 5 has introduced new elements together with new attributes. These new elements are meant to give hints to your browser about what type of the keyboard layouts to display for the on-screen keyboards. This is all meant to give you an impeccable experience while filling out the forms.

It’s important to note that web browser support for HTML5 elements will vary from one browser to another. In case the browser does not support HTML5, then it defaults to HTML4—which is supported by virtually all browsers.

So, let’s find out what’s new in HTML5 form elements.

New Input Types of Forms in HTML 5

Here are the new input types of forms in HTML 5

Color

The color input type is used to provide the user with a native color picker. For instance the HTML code below illustrates this:

<input type="color" value="#00ff22">

Date

It’s used to indicate the date picker. This provides users with mechanisms to easily select the date. For instance the HTML code below illustrates this:

<input type="date" value="2015-05-05">

Datetime

It’s an element that’s used to select both the date and the time for a particular day. The HTML code below illustrates this:

<input type="datetime" value="2015-05-05 T12:30:22.10">

Datetime-local

This HTML element is used to select both the date and the time, which captures the local settings for your system. The HTML code below illustrates this:

<input type="datetime-local" value="2015-05-05 T10:20">

Email

It provides a field for entering the e-mail address. For instance, the code below illustrates this:

<input type="email" value="someone@email.com">

Month

It’s used to elect a full month. For instance, the code below illustrates how a full month can be selected by this HTML element:

<input type="month" value="2015-05">

Number

It’s used for selecting numbers only. For instance, the HTML code below shows how you can define a field for picking numbers only:

<input type="number" value="200">

New Attributes for Forms in HTML 5

Here’s a list of new attributes that have been added to HTML5 to complement the new input types:

autofocus

It’s used to set to the field when the element has been loaded. For instance, the code below sets an autofocus for the text field:

<input type="text" autofocus>

formaction

This new attribute overrides the JavaScript’s validation in HTML 4 and previous versions of HTML. It’s used to override the action attribute of the form. For instance, the code below illustrates this: