H5 adds e-mail, phone number, website, number, search, range, color selection, date and time and other input types
1. E-mail type = "email"
E-mail format to provide verification if the wrong format, will prevent the form submission
<div>
<label for="email">电子邮件</label>
<input type="email" id="email">
</div>
2. The phone number type = "tel"
Not used to verify the phone number, but to call in the mobile terminal browser numeric keypad
<div><label>电话:<input type="tel" name="userTel"></label></div>
3. URL type = "url"
Verification can only enter a valid URL, and must contain Http: //
<div><label>网址:<input type="url" name="userUrl"></label></div>
4. Number type = "number"
You can only enter digital input of other characters, click the up and down arrows can be added to get the focus when the impairment in the pc
can set the maximum and minimum values out of range prevents submitted
<div>
<label>数量:<input type="number" name="userNumber" max="100" min="0"></label>
</div>
5. Search type = "search"
PC side getting the focus right of the input box there is a "X", tap to clear the contents of this input box
is displayed as "Search", click back to the search, or pc-hit ENTER at the end of the keyboard to move the Enter button Tips will trigger form submission
<div><label>搜索:<input type="search" name="userSearch"></label></div>
6. range type = "range"
Value can be realized to drag around variation value
set their maximum and minimum values, the default value for the intermediate
<div>
<label>范围:<input type="range" name="userRange" max="100" min="0"></label>
</div>
7. Color Selector type = "color"
Click the check box will pop up a color, you can choose the color you want
to select a value of hexadecimal color codes
<div><label>颜色:<input type="color" name="userColor"></label></div>
8. The date and time
Date type = "date"
Time type = "time"
The date and time type = "datetime-local"
Whether pc side or end Click will pop up a mobile control allows the user to select the desired value
<div>
<label>日期:<input type="date" name="userDate"></label>
</div>
<div>
<label>时间:<input type="time" name="userTime"></label>
</div>
<div>
<label>时间日期:<input type="datetime-local" name="userDatetime"></label>
</div>