HTML5 Inputs

Input elements play an important role in data driven web applications. The input types help in receiving the input in a required format. Some new input types have been added in HTML5. A few of the existing input types are password, file, etc. Below are a few of the important and useful new types introduced in HTML5 for HTML input control.

  • Tel
  • url
  • email
  • color
  • datetime

Canvas in HTML5

Canvas is a rectangular area, which allows pixel level operations like drawing a line, box, circle, performing graphics, etc. HTML5 offers support for canvas areas. Below is some sample code for canvas.

//Fallback content, when canvas is not supported by the browser.

Custom Data Attributes

HTML5 now allows you to add valid data attributes, which helps in storing the data without affecting the web page UI. These data attributes are hidden from the user and can be later used by jQuery or your JavaScript functions. In order to make your custom data attribute valid, the attribute should be prefixed with the word “data”.


Editable Contents

This feature allows the end user to edit the HTML control’s content within the browser. It also allows developers to build web pages that include sections like notes, an HTML editor, etc. All you need to do is add an attribute named contentEditable=”true” to the HTML control.

Click here to edit this content!

Click here to edit this content!

This comes in handy when it is combined with another feature called offline storage or “client-side storage”. Client-side storage is when data is passed to a browser’s storage API for storing data on the users computer for retrieving data, performing a search, etc.

Auto-focus and Placeholder Attributes

The autofocus feature is achieved by adding the autofocus attribute. This allows the control to have the focus automatically on page load.

Placeholder is a feature supported for input fields by adding the attribute placeholder. This feature displays the value provided for the placeholder attribute, like a water mark, until the focus is moved to the input control.

Required Field and Range Validators

Required field functionality is achieved using the attribute named “required” on the input controls. This makes sure that the form will not be posted until the value is entered for the input control.

Range validation is achieved through specifying the minimum and maximum values for the input control along with a valid type. This makes sure that the form will not be posted until the value entered for the input control is within the range.

By using HTML5′s new input types, we can enhance the user’s experience, future-proof our site, write more semantic code, and make our life as developers easier.

Get in touch

Contact Me
(941) 416-0874


Mon - Fri 9am - 9pm
Sat 10am - 2pm