HTML5 new form elements, attributes, form validation, and enhanced page elements summary

  New form elements and properties

    new Properties
         Form Property
        a table cell in HTML5 can be placed outside of the form by adding a form property to the element, such as:

code is as follows	copy code
< Form method= "Get" id= "test"             Username: <input name= "username" type= "text" id= "username" value= "Oseye"              <input type= "Submit" value= "Submission" "              </form>              url:<input form= "test" name= "url" type= "text" id= "url" value= "http://www.oseye.net"

Click Submit to see the URL:

The code is as follows	Copy Code
? username=oseye&button= Submit &url=http%3a%2f%2fwww.oseye.net

FormAction Property
HTML5 adds a formaction attribute to the submit button (such as button, submit, image, and so on) for submission to a different server address, such as:

code is as follows	copy code
< Form method= "Get" id= "test"             Username: <input name= "username" type= "text" id= "username" value= "Oseye"              <input formaction= "a.html" type= "Submit" value= "submitted to a.html"              <input formaction= "b.html" type= "Submit" value= " Submit to b.html             </form>

        formmethod Properties
         Now that you have the FormAction property for the Submit button, you have the FormMethod property:

code is as follows	copy code
< Form method= "Get" id= "test"             Username: <input name= "username" type= "text" id= "username" value= "Oseye"              <input formaction= "a.html" formmethod= "get" type= "submit" to value= "to a.html"             <input formaction= "b.html" Formmethod= "POST" type= "submit" value= "Post to b.html"              </form>

Placeholder Property
A text hint to a text box (or textarea) when it is not entered:

The code is as follows	Copy Code
<input name= "username" placeholder= "Oseye" type= "text" id= "username" >

Autofocus Property
Automatically get focus, a page can have only one control with this property:

The code is as follows	Copy Code
<input name= "username" Autofocus type= "text" id= "username" >

List Property
HTML5 adds a list property to a single-line text box, the value of which is the ID of a DataList element, the Single-line text box after the attribute is added to a select box (select), but allows the user to customize input, to avoid errors in browsers that do not support the allicin. We usually use CSS settings to not display:

code is as follows	copy code
Order : <input list= "list" name= "order" Autofocus type= "text" id= "order"              <datalist id= "list" style= "Display:none"              <option value= "1" >1</OPTION>              <option value= "2" >2</OPTION>              <option value= "3" >3</OPTION>              </datalist>

AutoComplete property


AutoComplete allows browsers to predict input to fields. Automatic completion before HTML5 cannot customize settings, anyone can see, so there is a security risk, in HTML5 can use this property to specify "on", "Off" or "(unspecified) three, do not specify when the browser's default value, It depends on the decisions of the browsers.





<form action= "/autocomplete.html" method= "Get" autocomplete= "on" >


Name:<input type= "text" name= "fname"/><br/>


Last Name: <input type= "text" name= "lname"/><br/>


E-mail: <input type= "email" name= "email" autocomplete= "off"/><br/>


<input type= "Submit"/>


</form>





New elements


HTML5 greatly increased and improved the type of input elements


Search is similar to text box for searching;


Tel is similar to text box, used for telephone;


The URL is similar to the text box and is used for URL-format addresses;


Email and text box similar to the e-mail format for the address;


Number is similar to the text box and is used for numeric values;


Range allows you to enter only a range of values, with the Min and Max properties to set the range;


Color Color text box, "#000000" format text;


File File selection text box, HTML5 through the Multiple property can be more than optional;


datetime, date, month, week, time, datetime-local text boxes for various dates and times;


Output defines different types of outputs;





Form Validation





Automatic verification


The so-called automatic verification, is by adding the corresponding attributes to the element to meet the requirements of validation


Required Property


An element with this attribute that is not allowed to commit if its contents are empty, and gives the appropriate hints

The code is as follows	Copy Code
<form> <input Required type= "text" > <input type= "Submit" value= "submitted" > </form>

Pattern Properties
The element that has the attribute, if the content is not empty, matches the content with the value of pattern, does not succeed, does not pass and prompts

The code is as follows	Copy Code
<form> <input pattern= "d+" type= "text" > <input type= "Submit" value= "submitted" > </form>

Min attribute and Max property
They are value-type and date-type INPUT element-specific properties that limit the range of input

The code is as follows	Copy Code
<form> <input min= "max=" type= "number" > <input type= "Submit" value= "submitted" > </form>

Step Property
Control the value of the element to increase or decrease the stride, such as the number between the input 11-100, and the STRIDE is 5, you can only enter 11, 16, 21 ...

code is as follows	copy code
<form>              <input min= "max=" step= "5" type= "number" "              <input type= "Submit" value= "Submission" "              </form>

Display validation
In addition to adding attributes to an element for automatic validation, in HTML5, the form element and the INPUT element (input), including the Select element and the textarea, have a checkvalidity method that can be invoked for manual validation. The Checkvalidity method returns the validation results in a Boolean form.

The code is as follows

Copy Code

<form name= "Form1" method= "Post" action= "" > <input type= "Email" name= "email" id= "Email" > <input type= "button" name= "button" id= button "value=" button "onclick=" Check () "> </form> <script type= "Text/javascript" > function Check () { var Email=document.getelementbyid ("email"); if (email.checkvalidity ()) { Alert ("Email format is correct"); }else{ Alert ("Incorrect email format"); } } </script>

Canceling validation
Canceling form validation has two properties: the Novalidate for form and the formnovalidate for submit:

The code is as follows	Copy Code
<form novalidate> <input type= "text" name= "name" id= "name" required> <input type= "Submit" name= "button" id= "button" value= "submitted" > </form> <form> <input type= "text" name= "name" id= "name" required> <input type= "Submit" Formnovalidate name= "button" id= "button" value= "Submit" > </form>

It is said that novalidate can be used for elements, but I did not succeed, interested students can try.
Custom error
There are default prompts for form browsers that are not validated in HTML5, but also for setting custom error messages through javascript:

The code is as follows	Copy Code
<form> <input type= "text" name= "name" id= "name" required> <input type= "Submit" name= "button" id= "button" onclick= "Showerr ();" Value= "Submit > </form> <script type= "Text/javascript" > function Showerr () { var Name=document.getelementbyid ("name"); if (name.value== "") { Name.setcustomvalidity ("Cannot be empty"); } } </script>

Enhanced page Elements

Figure element
Figure is a combination element that can be figcaption with headings, and a figure allows only one figcaption to be placed:

The code is as follows	Copy Code
<figure> <figcaption> logo </figcaption> </figure>

Details element
Details provide a way to expand or shrink a local area on the screen instead of javascript:

The code is as follows	Copy Code
<details> <summary>copyright 2011.</summary> <p>all pages and graphics on this web site are the property of w3school.</p> </details>

However, fewer browsers are supported.
Mark Element
The Mark element represents the part of the page that needs to be highlighted or highlighted, and the classic search results are:

The code is as follows	Copy Code
<mark>osEye</mark> The concept of open source projects for the center of the relevant issues discussed.

Progress element
You can set the value and Max properties for progress, value represents the total, Max represents the sum, value and Max can only be valid floating-point numbers, value must be greater than 0 or equal to max. If you do not set these two properties on progress, the dynamic display is in progress and the schedule is indeterminate.

The code is as follows	Copy Code
<p><progress/></p> <p><progress value= "max="/></p> <p><progress value= "0.5"/></p>

meter element
Define weights and measures

code is as follows	copy code
<p><meter value= "0.3" ></P>          <p><meter value= "Ten" max= "low=" ></METER></P>          <p><meter value= "max=" high= "a" ></METER></P>         <p><meter value= "max=" "high=" ></meter>< /p>

        High: Defines the point at which the value of a measure is defined as a higher value.
        Low: Defines the point at which the value of a measure is defined as a lower value.
        Max: Defines the maximum value. The default value is 1.
        min: Defines a minimum value. The default value is 0.
        Optimum: Defining what measure is the best value, if the value is higher than the high attribute, means that the higher the value the better. If the value is below the value of the "low" attribute, it means the lower the value the better.
        Value: Defines the value of a measure.
    Improved OL list
    added the start and reversed properties for the OL element in HTML5:

The code is as follows	Copy Code
<ol start= "3" reversed> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ol>

Improved DL List
A DL is a list of definitions that are specifically used to define a term, adding a name to DT in HTML5 DFN

The code is as follows	Copy Code
<dl> <dt> Terminology 1</dt> <dd> Description ...</dd> <dt><dfn> name </dfn> Terminology 2</dt> <dd> Description ...</dd> </dl>

There are also cite used to represent authors, small to identify "small text", and so on.