Let us start by specifying the HTML 5 doc-type as shown below.
<!DOCTYPE html>At the time of this writing, below are the type of input elements that are available. Most of these new element types are being supported in Google Chrome.
| Keyword | State | Usage |
| search | Search | <input type="search"> |
| number | Number | <input type="number"> |
| range | Range | <input type="range"> |
| color | Color | <input type="color"> |
| tel | Telephone | <input type="tel"> |
| url | URL | <input type="url"> |
| <input type="email"> | ||
| date | Date | <input type="date"> |
| month | Month | <input type="month"> |
| week | Week | <input type="week"> |
| time | Time | <input type="time"> |
| datetime | Date and Time | <input type="datetime"> |
| datetime-local | Local Date and Time | <input type="datetime-local"> |
Here is the sample HTML code showing the basic features of the newly introduced input controls. For sake of simplicity, the properties are kept to a minimum. Even the layout beautification is ignored.
Simple Sample Code:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML5 Sample Page</title>
<style type="text/css">
body
{
font-family:Arial;
font-size:12px;
}
</style>
</head>
<body>
<form id="form1" method="post">
Search:
<input type="search" placeholder="Search text here"><br />
Number:
<input type="number" value="50" min="40" max="60" step="5" autofocus="true"><br />
Range:
<input type="range" value="50" min="40" max="60" step="5"><br />
Color:
<input type="color" value="#000000"><br />
Telephone:
<input type="tel" placeholder="999" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters."><br />
URL:
<input type="url" value="http://www.google.com"><br />
Email:
<input type="email" multiple value="me@somewhere.com"><br />
Date:
<input type="date" max="2050-12-31" min="2000-01-01" value="2010-01-01"><br />
Date Time (Time zone information included):
<input type="datetime" value="2000-12-31T00:00+05:30"><br />
Local Date Time (No Time Zone information):
<input type="datetime-local" value="2000-12-1T00:00"><br />
Month:
<input type="month" max="2000-10" min="2000-02" value="2000-04" step="2"><br />
Week:
<input type="week" max="2000-W50" min="2000-W05" value="2000-W06" step="2"><br />
Time:
<input type="time" max="23:00:00" min="01:00:00" value="04:30:00" step="5"><br />
File Upload:
<input type="file" accept="image/*" name="image" multiple onchange="updateFilename(this.value)"><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>
The above sample code also includes the usage of new properties like multiple, pattern, placeholder, autofocus, min, max, step etc.
Here is how it looks in Google Chrome.
Yes, it looks ugly (though it serves the purpose)! Feel free to copy the code and beautify/change it as needed. Let me know whether there is any changes, since the specification is fairly new.
References:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-multiple-attribute
No comments:
Post a Comment