HTML5 new elements, tags summary

Always encounter the H5 new label of the written questions, read the information to summarize:

1.form Related:

(1) Form attribute : In HTML5 the table cell can be placed outside the form, by adding the form property to the element to point to the target form (the form property value is set to the target form ID).

(2) FormAction property : HTML5 adds the FormAction attribute to the submit button (such as button, submit, image, etc.) for submission to a different server address.

<formaction= "new.html"  type= "Submit"  value= " Submit to New.html ">

(3) FormMethod properties : Use with formaction.

(4) Placeholder Property : A text hint that is used when the text box is not in the input state.

(5) Autofocus property : Automatically gets focus, a page can have only one control with this property. This property has no value and is good to write directly.

<name= "username"  autofocus type= "text"  ID= " Username ">

(6) List property : Used for a single-line text box, the value of the property is the ID of a DataList element, the single-line text box after the property is incremented like a select box (select), but allows the user to customize the input, in order to avoid the browser does not support the element error, We usually use CSS settings not to display.

<datalist> Tags: defines a list of optional data. In conjunction with the INPUT element, you can make a drop-down list of input values.

Order<inputList= "List"name= "Order"Autofocus Type= "text"ID= "Order">            <DataListID= "List"style= "Display:none">            <optionvalue= "1">1</option>            <optionvalue= "2">2</option>            <optionvalue= "3">3</option>            </DataList>

(7) AutoComplete properties : Auto-complete allows the browser to predict the input of the field, HTML5 implements the custom setting this property, avoids anyone can see the existence security hidden danger. The value of this property has "on", "Off" or "" (not specified) three, and is not specified when using the browser's default value.

(8) INPUT element type:

　　Search: Similar to the text box for searching;

　　Tel: Similar to text textbox for telephone;

URL: Similar to text text box for address in URL format;

email: Similar to text box, the address used for email format;

Number: Similar to the text box for numeric values;

Range: Allows you to enter only a range of values, set the range by Min and Max properties;

Color: text box, "#000000" format;

File: Select a text box, HTML5 through the Multiple property can be multiple selection;

datetime, date, month, week, time, datetime-local a variety of dates and times input text boxes;

Output : defines different types of outputs;

(9) Form validation Related:

　　Automatic validation (that is, by adding the appropriate attributes for the element to meet the requirements of validation)

　　Required Property : The element that has the attribute, if its contents are empty, is not allowed to commit, and the corresponding prompt is given.

　　Pattern Property : The element with this attribute, if the content is not empty, the content and pattern of the value of the regular match, the match is not successful will not pass and prompt.

　　min and Max Properties : They are private properties of the input element for value types and date types, limiting the range of inputs.

　　Step Properties : The stride that controls the value of the element increases or decreases, such as the number between 1-100, and the STRIDE is 5, then you can only enter 1, 6, 11 ....

Display validation (in addition to automatic validation of adding attributes to an element, in HTML5, the form element and the input element, including the select element and the textarea, have a checkvalidity method that can be manually verified by calling the method. The Checkvalidity method returns the validation result as a Boolean)

　　

    function Check () {        var email=document.getelementbyid ("email");         if (Email.checkvalidity ()) {        alert ("The email format is correct");        } Else {        alert ("Incorrect email format");}        }    

　Cancel validation (cancellation of form validation has two properties: novalidate for form and formnovalidate for submit)

//novalidate for form<formnovalidate>        <inputtype= "text"name= "Name"ID= "Name"Required>        <inputtype= "Submit"name= "button"ID= "button"value= "Submit">        </form>//Formnovalidate for Submit<form>        <inputtype= "text"name= "Name"ID= "Name"Required>        <inputtype= "Submit"orfmnovalidate name= "button"ID= "button"value= "Submit">        </form>        

　　Custom error : The form browser that is not validated in HTML5 will have a default hint, but it also provides a custom error message that is set through JavaScript. (I think it's just to write a function that I can call when I click.)

2. Enhanced page elements

(1) Figure element : Figure is a combination of elements, you can take the title figcaption, a figure is only allowed to place a figcaption.

        <  Figure >        <  src= "logo.png"  alt= "Picture">        <  Figcaption> logo </figcaption>        </  Figure >

(2) Details element :d Etails provides an alternative to JavaScript, which expands or shrinks the local area on the screen.

        < Details >        < Summary > Click I view details </summary>        <p> I am the detail content. </ P >        </ Details >

(3) Mark element:The mark element represents the part that the page needs to be highlighted or highlighted.

(4) Progress elements: generally used to write the progress bar, you can set the value and Max properties for progress, value means that it has been done, Max represents the total number, and value and Max can only be valid floating point numbers, Value must be greater than 0 less than or equal to max. If you do not set these two properties for progress, the dynamic display is in progress and the schedule is indeterminate.

(5) Meter element : Define weights and measures. (The values on the upper and lower limits are color-coded).

High: Defines the point at which the value of the measure is located and is defined as a higher value.
Low: Defines the point at which the value of the measure is located and is defined as a lower value.
Max: Defines the maximum value. The default value is 1.
Min: Defines the minimum value. The default value is 0.
Optimum: Defines what measure is the best value, and if the value is higher than the "high" property, it means that the higher the value, the better. If the value is lower than the value of the "low" property, it means that the lower the value, the better.
Value: Defines the values of the measure.

(6) Improved OL list : Added the Start property and reversed property to the OL element in HTML5.

Start: Indicates the list ordinal from several beginnings.

Reversed: Indicates that the list ordinal is in reverse order.

(7) Improved DL list:DL is a list that is specifically used to define terms, with the addition of the name DFN for DT in HTML5.

        <DL>        <DT>Terminology 1</DT>        <DD>Describe...</DD>        <DT><DFN>Name</DFN>Terminology 2</DT>        <DD>Describe...</DD>        </DL>

(8) cite: used to represent the author.

(9) Small: used to identify "small text".

<article> Tags: define external content.

(one) <aside> Tags: define content other than article. The content of aside should be related to the content of article. Aside can be used for a row of ads or links at the end of a Web page, one vertical row for a aside. It can also be used in blog sidebar.

<audio> Tags: define sounds.

<canvas> Tags: Define graphics (designed for client-side vector graphics).

<command> Tags: define command buttons, such as radio buttons, check boxes, or buttons.

<embed> Tags: define embedded content, such as plugins.

() <footer> Tags: defines the footer of a section or document.

Tags: defines a header for a section or document.
Tags: used to group the titles of pages or sections (section).

Tags: used to group the titles of pages or sections (section).

<nav> Tags: Defines the part of the navigation link.

<output> Tags: defines different types of output, such as the output of a script.

<rp> Tags: used in ruby annotations to define what is displayed by browsers that do not support ruby elements.

<rt> Tags: defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).

<ruby> Tags: define ruby annotations (Chinese phonetic notation or characters).

<section> Tags: define sections (section, section) in a document. such as chapters, headers, footers, or other parts of the document.
<source> Tags: Define media resources for media elements such as <video> and <audio>.

<summary> Tags: The details element's title, and the "details" element is used to describe detailed information about a document or document fragment. The "Summary" element should be the first child element of the "details" element.

<time> Tags: define the date or time, or both.

<video> Tags: define videos, such as movie clips or other video streams.

<dialog> Tags: Define conversations (Sessions) The dialog element represents a conversation between several people.

If there is any mistake, please correct me!

Article Reference Links:

A tutorial network >> Web production >>HTML5 Tutorial
Large Front end >>HTML5 new label explanation and usage

HTML5 new elements, tags summary