Вы находитесь на странице: 1из 12

Html Input Types

------------------------------------------------------------------------HTML5 has several new input types for forms.


These new features allow better input control and validation
The new input types in HTML 5

color
date

datetime

datetime-local

email

number

range

search

tel

time

url

1.Color
------------------------------------------------------------------------------------Description

This input type lets you collect a color of the form #rrggbb.
If a browser supports this input type, the intention is that clicking in the
textfield will result in a color chooser popping up.

Syntax:
<input type=color name=some-name/>

Attribute:
Value: The initial value. The intention is that if a browser pops up a color
chooser, the initial selection will match the current value.

Browser Support:

Demo:
<input type=color/>
-------------------------------------------------------------------------------------

Input type-range
This input type lets you collect a number (either integer or floating
point).
All known browsers that support this use a slider.
Syntax:
<input type="range" name="some-name"/>
Attributes
value: The initial value.
step: How much to change the value when you click on the up or down
arrows of the control. The default is 1.
min, max: The smallest and largest values that can be selected. The
default for min is 0, and the the default for max is 100.

Browser Support

Demo:

<input type="range"/>
<input type="range" min="0" max="200" step="10" value="50"/>
****************************************************************************************************
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.
Brower Support

Demo:
<input type=url/>
*************************************************************************************

Input type- number


This input type collects a number (either integer or floating point)
Syntax:
<input type="number" min="0" max="20" step="2" value="10" name="somename"/>

Attributes:
max - specifies the maximum value allowed

min - specifies the minimum value allowed


step - specifies the legal number intervals
value - Specifies the default value

Broswer Support

Demo
<input type="number"/>
<input type="number" min="0" max="20" step="2" value="10"/>
*************************************************************
Input type-Search
The search type is used for search fields (a search field behaves like a
regular text field).
Browser Support:

Demo:
Search Google: <input type="search" name="googlesearch">
*************************************************************
Input type-tel
Define a field for entering a telephone number
Browser Support:

Demo:
Telephone: <input type="tel" name="usrtel">
*************************************************************

Input type-time
Define a control for entering time
Demo:
Select a time: <input type="time" name="usr_time">

*************************************************************
Input type-email
collect an email address.
Syntax:
<input type="email" name="some-name"/>
<input type="email" list="email-choices" name="some-name"/>
<datalist id="email-choices">
<option label="Marty Hall" value="hall@coreservlets.com">
<option label="Somebody Else" value="someone@example.com">
<option label="Third Person" value="other@example.com">
...
</datalist>
Attributes
value: The initial value (a legal email address).
list: The id of a separate "datalist" element that defines a list of email
addresses for the user to choose among.
Browser Support:

Demo:
<input type=email/>
*************************************************************
Input type-date
The date type allows the user to select a date.
Demo
Birthday: <input type="date" name="bday">
*************************************************************
Input Type: datetime
The datetime type allows the user to select a date and time (with
time zone).
Demo:
Birthday (date and time): <input type="datetime" name="bdaytime">
*************************************************************
Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time
zone).
Demo
Birthday (date and time): <input type="datetime-local" name="bdaytime">

*************************************************************
Program in Detail for Input Types
<form action="input-test.html" method="get">
<table>
<tr>
<td><strong>Input Type</strong></td>
<td><strong>Result</strong></td>
</tr>
<tr>
<td>Telephone</td>
<td><input type="tel" name="tel" value="12345" /></td>
</tr>
<tr>
<td>Search</td>
<td><input type="search" name="search" value="type in
keyword" />
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="URL" name="url"
value="http://searchdaily.net" />
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email"
value="nam@searchdaily.net" /></td>
</tr>
<tr>
<td>Datetime</td>
<td><input type="datetime" name="datetime" value="2011-0917" />
</td>
</tr>

<tr>
<td>Datetime-Local</td>
<td><input type="datetime-local" name="datetime_local"
value="2011-09-17" /></td>
</tr>
<tr>
<td>Date</td>
<td><input type="date" name="date" value="2011-09-17"
/></td>
</tr>
<tr>
<td>Time</td>
<td><input type="time" name="time" value="16:40" /></td>
</tr>
<tr>
<td>Month</td>
<td><input type="month" name="month" value="08" /></td>
</tr>
<tr>
<td>Week</td>
<td><input type="week" name="week" /></td>
</tr>
<tr>
<td>Number</td>
<td><input type="number" name="number" value="1234"
/></td>
</tr>
<tr>
<td>Range</td>
<td><input type="range" name="range" min="1" max="100"
value="70" /></td>
</tr>
<tr>
<td>Color</td>
<td><input type="color" name="color" /></td>
</tr>
</table>

</form>
************************************************************