HTML5 for the optimization of input label __html

1.input type of new, search and Tel these two, search knowledge for ordinary input added some style, and Tel is the text style with input is exactly the same, but can use the pattern to judge the input content. The decision is to click on the Submit button, the following error shows the situation, plus title can show the corresponding you want to suggest the wrong copy

<! DOCTYPE html>
<meta charset= "Utf-8" >
<!--Chromo is unable to achieve search, so add paragraph css-->
<style>
    input[type= "Search"] {-webkit-appearance:textfield}
</style>

<form id= "Login" action= "login.php" method= "get" >
    <input type= "" Submit "  name=" Username "value=" admin "  autofocus/><br>
    <!--phone number is the same type as normal, that is, the pattern can be used for regular judgment verification, You can use title to specify error prompts-->
    tel:<input type= "tel" name= "num" pattern= "^\d{10}$" title= "Please enter 10 digits" >
< Input form= "Login" formaction= "a.php" formmethod= "POST" type= "submit"  name= "dosubmit" value= "Login"/>
</form>

2.url and Email type
These two attributes are not to be judged by their own pattern, as in the case of Tel, and their two types are to be judged by themselves.
The URL type is displayed as follows

Url:<input type= "url" required name= "url" >

Error prompts the following figure:

Email:<input type= "Email" required name= "email" >

The error message type of email is as follows:

The error prompts for the required field are as follows:

3. With regard to the type of time, these are really not support HTML5 place is actually a text input box

Datetime:<input type= ' datetime ' name= ' datetime ' ><br>
    date:<input type= ' date ' name= ' Date ' value= ' 2016-08-03 "><br>
    month:<input type=" month "name=" month "value=" 2016-08 "><br>
    Week: <input type= "Week" name= "Week" value= "2016-W10" ><br> time:<input type= "Time
    " name= "Time"  Value= "11:11" ><br> datetime-local:<input type= datetime-local "name=" datetime-local "value="
    2016-01-01t00:00 "><br>

The display effect is as follows, which one can be used in the mouse turn, you can use the value attribute, and then initialize the default values of these properties in a fixed format

4.number,range
PS: In the form tag with the Novalidate attribute can not be validated on the jump

<form novalidate action= "login.php" method= "Get" >

Similarly, if you add formnovalidate to a form item, you can cancel the validation of a single input

Then number type, you can increase the reduction by the up and down arrows, you can control the maximum minimum by Max and Min, the Step property represents a multiple of the corresponding value, the following example can only be a multiple of 3.

Number:<input type= "number" min= "0" max= "step=" 3 "name=" number "><br>
range:<input type=" range "min=" 0 "max=" step= "3" name= "range" ><br>

Range represents the range, or you can control the corresponding value by Max,min and step. To display range, you also need to work with the output label.

Range:<input type= "range" min= "0" onchange= "num.value=value" value= "max=" "3" step= "range" >
<output id= "num" >50</output>

Similarly, the OnChange method can also be implemented with JS, get the tag with the ID num and append the value attribute to him

5.color,file
Color can support direct selection of colors

Color:<input type= "Color" name= "Color" ><br>

HTML5 file selection, you can support multiple selections, as long as you add the Multiple property, you can specify the MIME type by accept

File:<input type= "File" name= "file" multiple accept= "image/*" ><br>