HTML5 - Introduction
HTML5 - New Elements
HTML5 - Removed Elements
HTML5 - Browser Check
Tag Name : input-types
The following new input types are added in HTML5
1. color
2. time
3. url
4. week
5. date
6. datetime
7. datetime-local
8. email
9. month
10. number
11. range
12. search
13. tel
'color' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select a background color: <input type="color" name="bgcolor" id="bgcolor">
</body>
</html>
Output :
Select a background color:
if the browser does not support the 'color' input type, an old-fashioned text box is displayed. The selected color (hex) code (e.g., #8080ff )is sent over to the back end script up on form submit.

'time' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
There is a flight to Austin <time>10:00</time> every morning from M-F
</body>
</html>
Output :
There is a flight to Austin every morning from M-F

'url' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Enter a URL: <input type="url" name="website_url">
</body>
</html>
Output :
Enter a URL:

'week' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select the week of next payment: <input type="week" name="next_pay_week">
</body>
</html>
Output :
Select the week of next payment:

'date' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
select date of month: <input type="date" name="dofmonth">
</body>
</html>
Output :
select date of month:

'datetime' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select Date & Time of Arrival: <input type="datetime" name="date_of_arrival">
</body>
</html>
Output :
Select Date & Time of Arrival:

'datetime-local' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select a (date and time): <input type="datetime-local" name="date_time">
</body>
</html>
Output :
Select a (date and time):

'email' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Please enter your email address: <input type="email" name="email">
</body>
</html>
Output :
Please enter your email address:

'month' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select a month and year: <input type="month" name="month_year">
</body>
</html>
Output :
Select a month and year:

'number' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select an Amount: <input type="number" name="amount" min="100" max="1500" step="100" value="500">
</body>
</html>
Output :
Select an Amount:

'range' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Select a number : <input type="range" name="num" min="100" max="150" step="2" value="120">
</body>
</html>
Output :
Select a number :

'search' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Enter Search Term: <input type="search" name="googlesearch">
</body>
</html>
Output :
Enter Search Term:

'tel' type HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Please enter phone number: <input type="tel" name="phone">
</body>
</html>
Output :
Please enter phone number:


© 2010 www.generalconnection.com. All rights reserved. | www.generalconnection.com