Learning notes for forms and files in HTML5

Web application process, the form is a very important piece of content on the page, the user can enter the large

Part of the content is done in the elements of the form, and it interacts with the background in most cases by clicking on the form

button to complete. In HTML 5, the functionality for this part of the form is greatly enhanced. This chapter details the new form elements, attributes, and validation of the content of the form elements in HTML 5, as well as on the HTML 5 page, in addition to the elements of the form and other additions and improvements, which are described in the HTML The two api-file APIs and drag-and-drop APIs that are added to form elements in 5.

Learning content:

Learn about the properties that elements in the new form in HTML 5 can use and how they are used.

Master the new form elements in HTML 5 and how they are used.

Learn about the validation methods that are added to HTML 5 for the validity of element content within a form, including property validation, explicit validation, canceling validation, and custom validation information.

Master the elements that are added and modified on the page in addition to the forms in HTML5, and their use of the square music.

Mastering the file API involves mastering the use of the FileList object with the object, mastering the concept of BLOB objects and

Use the method to master the FileReader object and its square cowardice, event definition, event trigger conditions, and event

Sequence of occurrences.

Learn how to use the drag-and-drop API to drag and drop the elements in a page to each other, mastering the properties of DataTransfer objects and

method to learn how to set the visual effects of drag and drop, and how to customize the drag and drop icon.

-New elements and attributes

form, formaction, FormMethod, placeholder (Input prompt when text box is not entered), autofocus (get cursor focus automatically),
List (the value of this property is the ID of a DataList element), similar to a selection box.
Text:<input type= "text" name= "greeting" list= "Greetings" >

The code is as follows	Copy Code
<!--use style= "Display:none;" Set the Detalist element to not display--> <datalist id= "Greetings" style= "Display:none;" > <option value= "Good Morning" >good morning</option> <option value= "Hello" >Hello</option> <option value= "Good Afternoon" >good afternoon</option> </datalist>

AutoComplete (on, Off, "" three values)
-Increase the type of input elements

Search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color, file.

-Form Validation

Required, pattern (pattern= "^w.*$"), Min, Max, step (pace of element value increase or decrease)

Method of canceling validation: 1, the Novalidate property of the form element is true. 2, the INPUT element's Formnovalidate attribute

-Enhanced page elements

Figure: A piece of independent content on a webpage, figcaption the title of figure

Details: Local area to expand or shrink, by clicking on the content of summary elements to control

Mark: Highlight Content

Progress: Represents the completion progress of a task

Meter: The quantity value within the specified range (max, min, low lower limit, high upper limit, optimum best value)

Now let's look at some examples

A. New properties

1.form elements can write subordinate elements of a form anywhere on the page.

The code is as follows	Copy Code
<form id= "Testform" > <input type= "Text"/> </form> <textarea form= "Testform" ></textarea>

2.formaction properties, you can make a different button to submit the form to a different page

The code is as follows	Copy Code
<form id= "Testform" action= "serve.php" > <input type= "Submit" Name= "S1" value= "v1" formaction= "s1.jsp"/> submitted to S1 <input type= "Submit" name= "S2" value= "v2" formaction= "s1.jsp"/> submitted to S2 <input type= "Submit" Name= "S3" value= "V3" formaction= "s1.jsp"/> submitted to S3 </form>

Note: No browsers currently support this property

3.formmethod

The code is as follows	Copy Code
<form id= "Testform" action= "serve.php" > <input type= "Submit" Name= "S1" value= "v1" formaction= "s1.jsp" formmethod= "POST"/> submitted to S1 <input type= "Submit" name= "S2" value= "v2" formaction= "s1.jsp" formmrthod= "get"/> submitted to S2 </form>

The 4.placeholder property refers to the input prompt displayed in the text box when the text box (input type= "text") is in the not entered state. When the text box is not entered and the cursor focus is not fetched, the blur displays the prompt text.

The code is as follows	Copy Code
<input type= "text" placeholder= "Input Me"/>

5.autofocus property, allowing the control to automatically get the cursor focus

The code is as follows	Copy Code
<input type= "Text" autofocus/>

6.datalist this element is similar to select, but allows the user to enter the value when he or she wants to set it out of the select list.

The code is as follows	Copy Code
<datalist id= "Greetings" > <option value= "Good Morning" >good morning</option> <option value= "Hello" >Hello</option> </datalist>

The 7.pattern property, which matches the regular expression of an element, require cannot be committed when white space is represented

The code is as follows	Copy Code
<form method= "POST" > <input name= "text" type= "text" Required pattern= "^w.*$"/> </form>

Two. Custom error type

The code is as follows	Copy Code
function Check () { var Pass1=document.getelementbyid ("Pass1"); var Pass2=document.getelementbyid ("Pass2"); if (Pass1.value!=pass2.value) { Pass2.setcustomvalidity ("passwords are inconsistent.) "); } else{ Pass2.setcustomvalidity (""); } var Email=document.getelementbyid ("email"); if (!email.checkvalidity ()) { Email.setcustomvalidity ("Please enter the correct email address.") "); } }

A 2.figure element is used to represent a separate piece of content on a Web page, and removing it from a Web page will have no effect on other content on the page.

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

The Figcaption element represents the caption of the figure element, which is subordinate to the figure element and must be written inside the figure element.

The 3.details element provides an alternative to JavaScript, which expands or shrinks a local area on the screen, but there is no browser to support it.

The code is as follows	Copy Code
<details> <summary> Fine Martial Arts </summary> <p> Chen to avenge the death of the division, and went to the Hongkou dojo ....</p> </details>

4.progress represents the degree of completion of a task.

The code is as follows

Copy Code

<section> Examples of the use of <p> percent Complete: <progress id= "P" max= "M" ><span>0</span>%</progress></p> <input onclick= "Button_onclick ()" value= "click" type= "button" > </section> var Progressbar=document.getelementbyid ("P"); function Button_onclick () { var Progressbar=document.getelementbyid (' P '); Progressbar.getelementsbytagname (' span ') [0].textcontent= "0"; for (Var i=0;i<=100;i++) UpdateProgress (i); } function UpdateProgress (newvalue) { var Progressbar=document.getelementbyid (' P '); Progressbar.value=newvalue; Progressbar.getelementsbytagname (' span ') [0].textcontent=newvalue; }

3. The improved OL list.

The Start property uses the initial value reversed from the definition number to reverse the list

The code is as follows	Copy Code
<ol start= "2" > <li> name </li> <li> Sex </li> <li> Age </li> </ol>

The 4.cite element represents the title of the work

code is as follows	copy code
<p> My favorite movie is starring Donnie Yen <cite> Jing Wu </cite></p>