HTML5 Input Type - search

The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.

---

Input Type - color

The color type is used for input fields that should contain a color.
The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:

Syntax:

Color: <input type="color" name="user_color" />

Example:

  <!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Color: <input type="color" name="user_color" />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Type - Date Pickers

 For selecting date and time, HTML5 has several new input types:

• date - Selects date, month and year
• month - Selects month and year
• week - Selects week and year
• time - Selects time (hour and minute)
• datetime - Selects time, date, month and year (UTC time)
• date time-local- Selects time, date, month and year (local time)

 select a date from a calendar:

Syntax:

Date: <input type="date" name="user_date" />

Example:

 <!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>

</body>
</html>

 select  the below input type from a calendar

• Input type "month":
• Input type "week"
• Input type "time":
• Input type "datetime"
• Input type "datetime-local"

HTML5 Input Type - range

The range  that should contain a value from a range of numbers for input fields. This input type is displayed as a slider bar.
You can set number which are accepted:

Syntax:

<input type="range" name="points" min="1" max="15" />

Example:

 <!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10" />
<input type="submit" />
</form>

</body>
</html>

The following attributes  specify  the range type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - Number

 The input element number that should contain a numeric value  for input fields .

Syntax:

Points: <input type="number" name="points" min="1" max="15" />

Example:

 <!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="number" name="points" min="1" max="15" />
<input type="submit" />
</form>

</body>
</html>


The following attributes  specify  for the number type:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

HTML5 Input Type - url

The URL should contain a URL address for input fields .
When the form is submitted, the value of the url field is automatically validated .

Syntax:
 

URL_Homepage: <input type="url" name="user_url" />

 

Example:

 <!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>

</body>
</html>

 

HTML5 Input Type - email

The email type  contain an e-mail address, which is used for input fields.
When the form is submitted, the value of the email field is automatically validated .

Syntax:

E-mail: <input type="email" name="user_email" />

Example:

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

</body>
</html>

HTML5 Input Types

 HTML5  allows  new features for better input control and validation.
It has several new input types for forms.Such as:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

---

Browser Support

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	5.1
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	5.1
search	No	4.0	11.0	10.0	No
color	No	No	11.0	12	No

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

---