HTML5 Form Input Features

HTML5 introduces a few good features for input fields. This will reduce the work of web developers, while developing web sites. Previously, we used javascript for checking the mandatory fields and validating email fields and so on. Now, with new attributes for input fields, inbuilt form validation is possible.

Interesting HTML5 Form Input Features

In HTML5, the following input attributes are given.


Here, we can see few most usable features.

HTML5 Form Input Features-Email Inputs

The first HTML5 Form Input Features we’ll discussis ‘Email’ attribute. We can use type=”email” for inputs in our form. By applying this attribute, we can instruct the browser to only allow strings that conform to a valid email address structure. The form validation from browser side/ built-in form validation happens when we submit the form. The following screenshot shows the error message.

<input id="email" name="email" type="email" placeholder="" />

HTML5 form input features

This attribute work in latest browsers. Older browsers that do not support this “email” type, they’ll simply fall back to a regular input.

HTML5 Form Input Features-Range Input

Next HTML5 Form Input Features is ‘Range’ attribute. The range type is used for input fields that should contain a value from a range of numbers. It represents a numerical value within a given range. In latest browsers, this input renders as a slider.

<input id="skill" type="range" min="1" max="100" value="0">

HTML5 form input features

HTML5 Form Input Features-Placeholder for Inputs

Previously, we used to add some javascript for adding placeholders. But, now we can use placeholder=”placeholder text” for inputs.

<input  type="text" placeholder="placeholder text" />

HTML 5 Form Input Features

By default, the input field will be displaying placeholder text and on focus/start typing, the placeholder text will disappear. Latest browsers support this feature.

HTML5 Form Input Features-Required Attribute

HTML 5 form inputs allow required attribute. This attribute is useful for showing the input field is mandatory.

<input type="text" name="myinput" placeholder="Placeholder Text" required>

HTML 5 Form Input Features
Required attribute can be used in two ways. Either we can use just ‘required’ or we can use required=”required”.

HTML5 Form Input Features-Autofocus attribute

HTML5 Autofocus helps us to avoid the use of javascript for autofocus. When we use the autofocus attribute, the input field will be focused by default, as shown in the below image.

<input type="text" name="myinput" placeholder="Placeholder Text" autofocus>

HTML 5 Form Input Features

5 thoughts on “Responsive Table with CSS Media Queries

  1. Hi thanks for this post! I am trying to get iphone 5 to work with displaying a table that I’ve used as follows:

    I have tried a few different media queries specific to 320px width but to no avail.

    You will see I am not using the table as a traditional data table, instead it is a manual build of a shopping page so it has product images and links to purchase, etc. There are no header rows and so on.

    Is there a way to use a media query to get this table to display in a single column on smartphone w/320px width, such as iphone 5?

    Thank you!!

Leave a Reply

Your email address will not be published. Required fields are marked *