Tuesday , June 19 2018
Home / Web Technologies / HTML5 / Lesson 13:HTML5 New Form Input Types Example

Lesson 13:HTML5 New Form Input Types Example

HTML5 New Form Input Types:

HTML5 has several new input types for forms. These new features allow better input control and validation.

This chapter covers the new input types:

  1. color
  2. date
  3. datetime
  4. datetime-local
  5. email
  6. month
  7. number
  8. range
  9. search
  10. tel
  11. time
  12. url
  13. week

Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

1.Input Type: color

The color type is used for input fields that should contain a color.

Example

Select a color from a color picker:

2.Input Type: date

The date type allows the user to select a date.

Example

3.Input Type: datetime

The datetime type allows the user to select a date and time (with time zone).

Example

Define a date and time control (with time zone):

4.Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time zone).

Example

Define a date and time control (no time zone):

5.Input Type: email

The email type is used for input fields that should contain an e-mail address.

Example

Define a field for an e-mail address (will be automatically validated when submitted):

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).

6.Input Type: month

The month type allows the user to select a month and year.

Example

Define a month and year control (no time zone):

7.Input Type: number

The number type is used for input fields that should contain a numeric value.You can also set restrictions on what numbers are accepted:

Example

Define a numeric field (with restrictions):

Use the following attributes to specify restrictions:

max – specifies the maximum value allowed

min – specifies the minimum value allowed

step – specifies the legal number intervals

value – Specifies the default value

Try an example with all the restriction attributes: Try it yourself

8.Input Type: range

The range type is used for input fields that should contain a value from a range of numbers.You can also set restrictions on what numbers are accepted.

Example

Define a control for entering a number whose exact value is not important (likea slider control):

Use the following attributes to specify restrictions:

max – specifies the maximum value allowed

min – specifies the minimum value allowed

step – specifies the legal number intervals

value – Specifies the default value

9.Input Type: search

The search type is used for search fields (a search field behaves like a regular text field).

Example

Define a search field (like a site search, or Google search):

10.Input Type: tel

Example

Define a field for entering a telephone number:

11.Input Type: time

The time type allows the user to select a time.

Example

Define a control for entering a time (no time zone):

12.Input Type: url

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Example

Define a field for entering a URL:

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen

keyboard to match it (adds .com option).

13.Input Type: week

The week type allows the user to select a week and year.

Example

Define a week and year control (no time zone):

Example2

Print Friendly, PDF & Email

Give us your valuable feedback

comments

About Murali

Hello everyone I am Software Developer having 3+ years of Experience in Microsoft Technologies and Others. My skills :- Asp.net, C#,Ado.net, SQL SERVER, web services, windows Service,Windows applications,HTML,CSS, JavaScript,JQuery,AnjularJs

Check Also

Lesson 14:HTML5 New Form Input Types Example-2

HTML5 New Form Inputs Example: [crayon-5b2887f24d6c4451778710/]   Related Give us your valuable feedback comments

%d bloggers like this: