HTML5 Form new input field types

HTML5 Form introduced lot of new features like input field types and validating input fields without even using JavaScript or jquery. There are lot of different types of field types for text, search, email, url and colour selector, date picker, for telephone numbers and number ranges. If you want to learn HTML5 form validation.

1

Text input type field

This input type will be used for name, first name, last name and many other places where we use input type text.

<input type="text" name="firstname" >
2

Search input type field

This input type will be used for search fields.

The search input type gives a hint to the browser that the field is used for performing searches. Some browsers may choose to give the search field a different appearance, or provide some extra features like auto-suggesting some search terms that have been previously used.

<input type="search" name="search" >
3

Colour input type field

This field will be used whenever you need a colour picker. You can use this sample code to view demo.
The color input type gives a hint to the browser that the field is used for selecting colors.

<input type="colour" name="colourpicker" >
4

URL input type field

URL input field type will be use for entering web address data, and this field will only accept http url’s that means it will validate input field data to be web site address. And if you are accessing it through a mobile device or tablet then it will show some extra keys for http:// and .com.
Without filling these two filed enter it from keypad.

The URL field is used to indicate to the browser that the field is expecting a URL. Browsers that support this field may validate input values to ensure that they are proper URL addresses.

<input type="url" name="website" >
5

E-mail input type field

E-mail input field type will be used for email addresses data. It will validate entered data whether it is valid email or not. On mobile and tablet devices it will show extra keys for @ symbol and also for .com.

The email field is used to indicate to the browser that the field is expecting an email address. Browsers that support this field may also validate input values to ensure that they are valid email addresses.

<input type="email" name="useremail" >
6

Telephone input type field

Tel input type field will be used for mobile numbers and telephone numbers, if you are using it through mobile or tablet then number pad will be displayed, so you can enter mobile number easily.

The tel input type indicates to the browser that the field is expecting a telephone number. Due to the large variety of world telephone numbers, browsers don’t explicitly try to validate this field.

<input type="tel" name="mobile" >
7

Number input type field

The number type indicates to the browser that the field is expecting numeric input.

This field type can also be used with the min, max, and step attributes to provide additional UI features to help the user select a number. Browsers that support this type can also validate the field’s value to ensure that it is a valid number.

If you want to learn more about Number input in HTML5 Forms

Code for adding simple number input field.

<input type="number" name="number1" value="5"/>
8

Range input type field

The range input type indicates to the browser that the field is expecting a numeric value selected from within a given range. This input type can also be used with the min, max, and step attributes to provide additional UI features to help the user select a number.

If you want to learn more about Range input field – Range Input field in HTML5 Forms

<input name="Text2" type="range" value="5"/>
9

Date input type field

The Date and Time input fields allow the user to easily select dates and times. There are multiple versions of this input type, used for selecting dates, weeks, months, and times.

More information about Date & Time Input field in HTML 5

Date input field

<input type="date" value="2011-12-22">

Time input field

<input type="time" value="01:30" step="3600">

These are new input type fields in HTML5 forms, if you want to learn more about in depth about each field you can go through the links.

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe