Web forms with new HTML5 features

HTML5 presents many new features that makes your web forms more functional. Here we will discuss few exciting HTML5 features that definitly improve your forms and also make them more functional and user friendly.

Required fields:

Whenever we deisgn a web form, there is always one or more mandatory fields and we have to impliment functions for that. but HTML5 introduces a “required” attribute to make input field as required:

1. <input type=“text” name=“emp_name” required>

As you can see above that it will save you a lot of time.

There are two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.

Placeholders:

In a form, We always use label to expalin what kind of infromation is required. as we use label tag to display a label for specific text field, HTML5 introduces the placeholder attribute

1. <input name=“firstname” placeholder=“Please enter your first name”>

The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.

Autofocus:

HTML5 also introduces a new attribute that’s named as “autofocus”. if this attribute is applied to an element, the element will automatically recieve the focus once the page is loaded.

1. <input name=“search” autofocus>

Email fields:

We commonly needs email input field on web forms becuase its the easiest way to contact someone over the internet. for this HTML5 introduces a new type for the input element, named as “email”.

1. <input name=“email” type=“email”>

Pattern attribute:

As a web developer, we always validate a web form. we have to validate the data entered by the visitor. The new pattern HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.

1. <input type=“text” name=“Phone” pattern=“^0[1-689][0-9]{8}$”placeholder=“Phone” required>

Url fields:

As most of web foms has url field to input your website, blog, or at least a Twitter profile. for this HTML5 introduces a URL input attribute, that’s particularly for entering web urls.

1. <input name=“url” type=“url”>

Date pickers:

HTML5 also introduces date type attribute for the input field. by date input element you can specify appointment day etc.

1. <input name=“day” type=“date”>

When clicked the date attribute, it will display a date picker so visitors will simply have to choose a date instead of entering it manually.

The date picker can also be implemented on your forms using the following types:

1. <input type=“date”>
2. <input type=“datetime”>
3. <input type=“month”>
4. <input type=“week”>
5. <input type=“time”>

Search boxes:

HTML5 again introduces a new tye for search fields.

1. <input name=“q” type=“search”>

Sliders type and step attribute:

HTML5 is also introducing sliders. it is a new type for the input element, which allows visitors to easily select a number instead of entering it manually.

1. <input name=“number” type=“range” min=“0″ max=“10″>

The example above allows the visitor to choose a number between 0 and 10.