Everyone knows that H5 has added a lot of new element tags, so let us summarize for you, what tags has been added to H5? What do these tags do?
Input type="XXX"
Email: The prompt format is incorrect
url Address: Address format: http://www.....
Number: Numeric type
Attributes: min minimum max maximum
Range: Input field for numbers within the range Slider understanding
Date:Date selector
Tel: Input box for phone number
Color: Color selector
New form attribute:
autocomplete attribute specifies form or input The domain should haveautocompletefunctionality. Value on is turned on and off is turned off.
The autofocus attribute of the form prompt box stipulates that the field automatically gains focus when the page is loaded. autofocus="autofocus" There is only one
formaction on the page - rewrite the action attribute of the form and redirect the form submission. When the form data is submitted, it is submitted to that page for data processing
formmethod - rewrite The method attribute of the form
The width and height of the input element of image type
height:
width:
list: The attribute specifies the datalist of the input field
Explanation: The associated option input-à is associated into a drop-down list datalist list="val" =è datalist id="val"
All options in Datalist must be option
Label Tip
Value The value that appears in the drop-down list
required attribute stipulates that the input field must be filled in before submission (cannot be empty). Required fields can be used on all input type elements.
Case:
Css代码 @charset "utf-8"; /* CSS Document */ *{ margin:0px;padding:0px;} ul,li{ list-style:none;} a{ text-decoration:none;} header{ border:0px solid #ff0000; width:90%; height:80px; margin:0 auto; font-size:50px; background-color:#E9F8FE; text-align:center; line-height:80px; } nav{ width:90%; height:30px; margin:20px auto; border:0px solid #ff0000; background-color:#8CCFF0; } nav ul{ padding-left:30px;} nav ul li{ width:80px; float:left; line-height:30px; font-weight:bold; } nav ul li a:hover{ color:#F00;} section{ height:600px; width:90%; border:1px solid #CCC; margin:0 auto; } aside{ width:20%; float:left; height:600px; border-right:1px solid #ccc; } aside ul{ border:0px solid #00ff00; height:400px; } aside ul li a{ color:#000; line-height:40px; border-bottom:1px solid #ccc; text-align:center; display:block; } form{ width:75%; float:left; margin-left:10px; padding-left:30px; padding-top:20px; } form p{ line-height:30px;} footer{ width:90%; height:100px; text-align:center; margin-top:20px; }
There are so many new tags and functions in H5. For more exciting content, please pay attention to other related articles on the php Chinese website!
Related reading: