Html5 new and abolished attributes

Html5 new and abolished attributes
In html5, many attributes are added and abolished while many elements are added and abolished. 1. Add attribute 1. Specify the autofocus attribute for form attribute a and autofocus on input [all types], select, textarea, And button. It allows the element to automatically obtain the focus after the page is loaded by specifying attributes. Only one element on a page can have the autofocus attribute. If multiple elements are set at the same time, the first element takes effect. This attribute is useful for login pages and can improve user experience. Sometimes the login page has a user name and password. After the page is loaded, the user must manually locate the input box to enter it. With autofocus, open the page and enter it directly. Example: <form> <p> User name: <input type = "text" autofocus/> </p> <p> password & nbsp; Code: <input type = "password"/> </p> </form> B. placeholder: input [text, search, url, telephone, email, password], textarea specifies the placeholder attribute, it will prompt the user's input, prompting the user what kind of input is expected. When the input box gets the focus, the system prompts that the character disappears. This attribute can also improve user experience, which is widely used. For example, View Code c and form attributes specify form attributes for input [all types], output, select, textarea, button, and fieldset. It declares the form to which it belongs and places it in any position on the page within the form. This attribute frees the elements in the form and makes it easier for us to make complicated la S. Note: An input field can belong to one or more forms. Multiple forms are separated by spaces. The form attribute of the input field must reference the id of the form to which it belongs. This is a bit like the for Attribute of the <label> label. Example: <form action = "" method = "" id = "user_form"> <p> User Name: <input type = "text" autofocus placeholder = "username"/> </p> </form> <p> the password below is displayed outside the form, however, the form is still submitted to the server. </p> <p> password & nbsp; Code: <input type = "password" placeholder = "password" form = "user_form"/> </p> d. required attributes. This attribute indicates that the input field of this element cannot be null. Applicable to the following types of input [text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]. Example: <form action = "" method = "" id = "user_form"> <p> User Name: <input type = "text" autofocus placeholder = "username" required/> </p> <input type = "submit" value = "submit"/> </p> </form> e and autocomplete attributes. Autocomplete: Applicable to form, input [text, search, url, telephone, email, password, datepickers, range, color]. When the "autocomplete" attribute is set to "on", the browser displays the entered options in the domain when the user enters the domain automatically.

<form action="" method="get" autocomplete="on">        First name:        <input type="text" name="fname" /><br />        Last name:        <input type="text" name="lname" /><br />        E-mail:        <input type="email" name="email"autocomplete="on"/><br />        <input type="submit" /></form> 

 

F. The new attribute for resetting the default form behavior html5 has a high degree of freedom, because html5 is input [submit, the image] And button elements are added with several new attributes: formaction, formenctype, formmethod, formnovalidate, and formtarget, which can be used to reset certain attributes of the form element, for example, Form 2 can be submitted by the submit button of Form 1. Formaction: override form action attribute formenctype: override form enctype attribute formmethod: override form method attribute formnovalidate: override form novalidate attribute formtarget: override form target attribute example: formaction and formmethod html, all elements in a form are submitted to another page through the action attribute of the form. In html5, you can click the different submit button through the formaction attribute to submit the form to different pages. In html, a form has only one action attribute to specify the submit page for all elements in the form. Each form has only one method attribute to specify the submit method. The formmethod method added in html5. different buttons can be implemented to specify different submission methods, such as post and get. <Form action = "server. jsp "method =" get "id =" user_form "> Email: <input type = "email" name = "useremail"/> <br/> <input type = "submit" formmethod = "get" formaction = "s1.jsp" value = "get Method submit to s1.jsp "/> <br/> <input type =" submit "formmethod =" post "formaction =" s2.jsp "value =" post method submitted to s2.jsp "/> <br /> </form> click "Submit to s1.jsp by get, submit the form to the s1.jsp page using the get method. The url also shows the submission parameters in the address bar. Click the "post method submitted to s2.jsp" button to submit the form to the s2.jsp page using the post method. For example, the formnovalidate attribute can cancel the related checks during submission, and the form can be submitted unconditionally [even if the form contains required, min, max, and so on]. <Form action = "demo_form.jsp" method = "get" id = "user_form"> E-mail: <input type = "email" required name = "useremail"/> <br/> <input type = "submit" formnovalidate = "true" value = "Submit without validation"/> </form> when you click "Submit without validation, form does not perform any verification. Although the required attribute exists, the Form can still be submitted if it is empty. G. The image submit button adds the width and height attributes to set the width and height of the image of the input label of the image type. For example, it is used as the submit button to set its width and height through width and height. <Form action = "server. jsp "method =" get "id =" user_form "> Email: <input type = "email" name = "useremail"/> <br/> <input type = "image" src = "img/submit.png" width = "30px" height =" 30px "/> </form> h. Use the list attribute with the datalist element, specifies the datalist of the input field. Datalist is a list of input fields. This element is similar to <select>, but it is better than select. If the value you want to set is not in the selection list, you can enter it by yourself, this element is not displayed. When the text box gets the focus, it is displayed as a prompt. The list attribute applies to input [text, search, url, telephone, email, datepickers, numbers, range, color] Note: the list value is the id of datalist in the document, again, we can see the familiar id. In retrospect, the form attribute references the form id, which is similar to the id of the input referenced by the label attribute. Example:

<Form action = "demo_form.jsp" method = "get"> Home Page: <input type = "url" list = "url_list" name = "link"/> <datalist id = "url_list"> <option label = "baidu" value = "http://www.baidu.com "/> <option label = "qq" value = "http://www.qq.com"/> <option label = "Microsoft" value = "http://www.microsoft.com"/> </datalist> <input type = "submit" /> </form>

 

Example: By the way, when datalist and autocomplete are used together with the autocomplete attribute, the browser displays the entered options in the domain when the user completes the field input. Now, the use of the datalist element and the autocomplete attribute can improve the user experience. Add the autocomplete attribute to datalist, that is, <datalist id = "url_list" autocomplete>. After the user enters http: www.google.com for the first time and submits the request, the option prompt of datalist and the autocomplete increase prompt are displayed at the same time. I, max, min, and step attributes max, min, and step are used to define or constrain the input type that contains numbers or dates. The max attribute specifies the maximum value allowed by the input field. The min attribute specifies the minimum value allowed by the input field. The step attribute specifies a valid numeric interval for the input field. (If step = "3", the valid number should be-3, 0, 3, 6, and so on.) The step attribute can be used with the max and min attributes, to create a valid value range. The max, min, and step attributes apply to input [datepickers, number, range]. For example, this is a very good property. Someone asked me to use <input type = "time"> to enter the time, but what should I do if firefox does not support it. You can use min max to simulate a time input box. You can enter [0 ~ 23]. Input in minutes can be [0 ~ 59].

<Form action = "demo_form.jsp" method = "get"> <label> time hour, minute: <input type = "time" name = "user_time"> </label> <p> the input time type is not supported in firefox, simulation Implementation solution </p> <label> <input type = "number" min = "0" max = "23" step = "1"> hour </label> <label> <input type = "number" min = "0" max = "59"> Points </label> <input type = "submit" value = "submit"/> </form>

 

A prompt is displayed when the request exceeds the max limit. For more details, refer to the verification mechanism of step attribute of the HTML5 number text box j. pattern attribute used to verify the mode of the input field. In fact, it is a regular expression and you do not need to write JavaScript to bind the regular expression for verification, very convenient. The pattern attribute applies to input [text, search, url, telephone, email, password]. For example, the Pattern is defined as "[A-z] {3}" in the input box }", that is, the regular expression constraint that contains three letters. If the input is invalid, we will see the following results. <Form action = "#" method = "get" id = "user_form"> Country code: <input type = "text" name = "country_code" pattern = "[A-z] {3}" title = "Three letter country code"/> <input type = "submit "/> </form> k. The multiple attribute specifies that multiple values can be selected in the input field. The multiple Attribute applies to input [email, file]. For example, multiple files can be uploaded at a time. <Form action = "demo_form.jsp" method = "get"> select image: <input type = "file" name = "img" multiple = "multiple"/> <input type = "submit"/> </form> l, <fieldset> Add the disabled attribute html5 adds the disabled attribute to the fieldset element, you can set its child element to the disabled state, but note that it does not include the element in legend. For example, click checkbox in legend to switch the disabled status of the filed sub-element.

<Form> <fieldset name = "userInfo"> <legend> <label> <input type = "checkbox" checked name = "enableUserInfo" onchange = "form. userInfo. disabled =! Checked "> Enable User Information </label> </legend> <p> <label> Name: <input name = "userName" required> </label> </p> <fieldset name = "personalInfo"> <legend> <label> <input type = "checkbox" checked name = "enablePersonalInfo" onchange = "form. personalInfo. disabled =! Checked "> Personal Information </label> </legend> <p> <label> birthday: <input name = "birthday" required> </label> </p> </fieldset> <fieldset name = "companyInfo"> <legend> <label> <input type =" checkbox "checked name =" enableCompanyInfo "onchange =" form. companyInfo. disabled =! Checked "> Company Information </label> </legend> <p> <label> Company Name: <input name = "companyName" required> </label> </p> </fieldset> </form>

 

M. <label> the control attribute html5 adds the control attribute for the tag, placing a form element inside the tag, and accessing the form element through the control attribute of the tag. Example:

<Script> function setValue () {var label = document. getElementById ("label"); var textbox = label. control; textbox. value = "718308" ;}</script> <form> <label id = "label"> zip code: <input id = "txt_zip" maxlength = "6"> <small> enter a six-digit number </small> </label> <input type = "button" value = "setting default Value: "onclick =" setValue () "> </form>

 

Analysis: the value of the input box is controlled through the control attribute of the label. Therefore, click the "Set Default value" button to initialize the value of the zip code input box to "718308 ". N. The new SelectionDirection attribute selectionDirection applies to input and textarea elements. You can use this attribute to obtain the selection direction when using the mouse to select a part of text in the input or textarea element. When a user selects text in the forward direction, this attribute value is "forward", and the reverse selection value is "backward". When the user does not select any text, this attribute value is "forward ". Example:

<Script type = "text/javascript"> function alertSelectionDirection () {var testInput = document. getElementById ("test"); var direction = testInput. selectionDirection; alert (direction );} </script> <form> <input type = "text" name = "text" id = "test"> <input type = "button" value = "View selected text direction" onclick = "alertSelectionDirection () "> </form>

 

O. The indeterminate attribute of the check box. This attribute is used to indicate that the check box is selected. For example, in the QQ mailbox, the selected mail has such effect. For example, it seems that the indetermidate attribute must be controlled by a script after testing.

<Form> <input type = "checkbox" checked/> <input type = "checkbox" indeterminate/> writing only one indeterminate does not work. <input type = "checkbox" id = "test "/> <input type =" checkbox "/> </form> <script> document. getElementById ('test '). indeterminate = true; </script>

 

The indeterminate attribute is mainly used when the check box is nested. For more information, see css-tricks indetermidate-checkboxes 2. Link attribute a. media attribute a. area adds the media attribute. Specify the type of media/device for which the target URL is optimized and can only be used when the href attribute exists. This property is used to specify that the target URL is designed for special devices (such as the iPhone), voice, or print media and can accept multiple values. <A href =" http://www.baidu.com "Media =" print and (resolution: 300 dpi) "> query </a> the values are as follows: [I don't know what kind of optimization measures this media has.] For more information about View Code, see w3c media B and <area> Add herflang, media, rel, and type attributes herflang, media, and rel, type to ensure the consistency between element a and link. Hreflang [value: language_code] specifies the language of the text in the linked document. This attribute can be used only when the href attribute is set. Note: This property is purely consulting. Media [value: media query]: the device that is optimized. [How to optimize it ?] Example: <a media = "handheld" href = "#"> handheld devices </a> <a media = "TV" href = "#"> TV </a> rel [value] alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag] specifies the relationship between the current document and the linked document/resource. The rel attribute can be used only when the href attribute is used. Example: <a href = http://www.mukewang.com/ "Hreflang =" zh "rel =" external "> indicates that the hyperlink uses Chinese and is an external hyperlink. Type [mime_type] specifies the MIME type of the target URL. C. <link> Add the sizes attribute to add the sizes attribute to the link. The sizes attribute specifies the size of the linked resource. This attribute can be used only when the linked resource is an icon (rel = "icon. This property can accept multiple values. Values are separated by spaces. This is the same on the Internet: <link rel = "icon" href = "img/demo_icon.ico" type = "image/gif" sizes = "16x16"/> however, sizes is the same after testing, I don't know what role sizes has. I checked that almost no mainstream browsers currently support the sizes attribute. D. <base> Add the target attribute to add the target attribute to the base element, mainly to maintain consistency with the element. For example, target indicates that the superlinks on the page will all open the page in a new window with _ blank added http://localhost Address, followed by a relative address.

<! DOCTYPE html> 
 
The dot a.html page opens the link in the new window: http: // localhost/a.html 3. Other attributes a and ol Add the reversed attribute reversed, which is a bool attribute and specifies the reverse order of the ordered list. For example, the starting value of the ordered list is 50 in descending order.
<ol start="50" reversed>    <li>coffee</li>    <li>Tea</li>    <li>Milk</li></ol>
 
B. Add the charset attribute for meta. Add the charset attribute c and the new type and label attribute menu in meta to be discarded in html4.01. Then re-define them in html5. Add the type and label attributes to the menu. Label defines a menu label for a menu. The type attribute allows you to use the following menu, toolbar, and right-click menu. The label value is text, indicating the menu name. There are three types: popup, which is not supported by the browser. Toolbar: not supported by the browser. Context: Right-click the menu. Only supports firefox. You can learn more through the w3c menu element. Example: toolbar
<menu type="toolbar" label="menu">    <li><input type="checkbox" />red</li>    <li><input type="checkbox">blue</li></menu>
 
The default menu style is as follows:
menu {    display: block;    list-style-type: disc;    margin-top: 1em;    margin-bottom: 1em;    margin-left: 0;    margin-right: 0;    padding-left: 40px;}
 
Example: context
<Div contextmenu = "mymenu"> <p> right-click the yellow div area to view the effect of the right-click menu ~ </P> <menu type = "context" id = "mymenu"> <menuitem label = "Custom refresh" onclick = "window. location. reload (); "icon =" ico_reload.png "> </menuitem> <menu label =" Custom shared... "> <menuitem label =" Twitter "icon =" ico_twitter.png "onclick =" window. open ('// twitter.com/intent/tweet? Text = '+ window. location. href); "> </menuitem> <menuitem label =" Facebook "icon =" ico_facebook.png "onclick =" window. open ('// facebook.com/sharer/sharer.php? U = '+ window. location. href); "> </menuitem> </menu> <menuitem label =" Custom Email sending "onclick =" window. location = 'mailto :? Body = '+ window. location. href; "> </menuitem> </menu> </div> <p> currently, only firefox supports menu attribute </p>
 
D. added the scoped attribute for style. html5 added the scoped attribute for style. With a style scope concept, we can define styles for the specified part of the document, rather than the entire document. If the "scoped" attribute is used, the specified style can only be applied to the parent element and its child element of the style element. Scoped facilitates the development of a single page style, but it is not commonly used, otherwise css is difficult to maintain. Example:
<! -- This article uses the style declared in the head normally --> <article> 
 
E. The async attribute html5 is added to the script to define whether the script is executed asynchronously. Async is only applicable to external scripts (only when the src attribute is used ). Similar to async [asynchronous execution], defer [deferred execution] also exists in the past, but it is better supported in html5. Usage: If async = "async": the script is executed asynchronously relative to the rest of the page, because async indicates to download the script file and then run it immediately, running does not prevent the browser from parsing the following content, so it is called asynchronous. If async is not used and defer = "defer": the script will be executed when parsing is completed on the page, because defer indicates that the script will not be executed after being downloaded, but will be executed after the page is fully loaded. If neither async nor defer is used: read and execute the script immediately before the browser continues parsing the page. For example, there are two jquery files on the jquery Official Website. Let's take the two files as an example. The jquery-1.11.3.min.js is a standard library file, 93.7 k. The jquery-migrate-1.2.1.min.js is jquery's backward compatible file, 7.03 k. The Code is as follows. <! DOCTYPE> <meta charset = "UTF-8"> </meta> <meta http-equiv = "prama" content = "no-cache"> <! -- Disable page cache --> <script defer src =" http://code.jquery.com/jquery-1.11.3.min.js "Onload =" alert ('A') "> </script> <script async src =" http://code.jquery.com/jquery-migrate-1.2.1.min.js "Onload =" alert ('B') "> </script> running effect. First, B is displayed, and then a is displayed. F. Add the manifest attribute to html elements. html5 adds manifest to html elements, pointing to an application cache list used in combination with offline web application APIs. When an offline web application is developed, it is used together with APIs to define a URL that describes the cached information of the document. After one access, the previous content can be viewed again when the network is disconnected. Usage: first, create a mainfest file.
Cache manifest # This is a commentCACHE slow storage file index.htmlstyle.css NETWORK: # search. phplogin. phpFALLBACK: # redirection address/api offline.html when resources are unavailable
 
Add the address of the mainfest file to the html attribute. <Html manifest = "/offline. manifest "> for detailed steps, see: How to create offline HTML5 web apps in 5 easy steps. For more information, see: the w3c manifests g and iframe elements add three attributes, sandbox, seamless, and srcdoc, which are sandbox, seamless, and srcdoc. It is used to improve page security and prevent untrusted web pages from performing some operations. Seamless: This attribute indicates that the iframe framework has no border and no margin. Srcdoc: used to specify the content of the embedded framework. The srcdoc and src attributes are sequentially differentiated. With srcdoc, the subsequent src content is ignored. Example: <iframe srcdoc = "