HTML5 Study Note five: HTML5 form

A form is a very important piece of content on a page, and most of what the user can enter is done in the form element, and most of the interaction with the background is also by clicking the button in the form.

First, new elements and attributes

1. New properties:

1.1 Form property: Any element in the page specifies the form property, the property value is the ID of the corresponding form, the element belongs to the specified form, and only opera 10 supports it.

1.2 Placeholder Property: When the text box is not in the input state and the cursor focus is not obtained, the input hint text is blurred; Safari 4,chrome3,firefox4

1.3 Autofocus Property: When you open a page, the control that has that property automatically gets the cursor focus; Safari 4,chrome3,firefox4

2. Modified INPUT Element type:

2.1 URL Type: <input name= "url1" type= "url" value= "http://www.micosoft.com" >

2.2 Email Type: Only verify the format, do not check whether the email address exists, the submission can be empty, unless the required attribute is added;

2.3 Data type: INPUT element of data type facilitates user input in the form of a calendar; only Opera 10 supports

There are many types not listed, most browsers do not support

　Second, form verification

2.1 Automatic Validation: Automatic validation can be done by using attributes on elements. For example:

1) Required property: can be applied on most input elements (except for hidden elements, picture element buttons)

2) Pattern Property: Use the pattern attribute on the INPUT element, the value of the property is a regular expression,

<input pattern= "[0-9][a-z]{3}" Name= "part" palceholder= "input: A number and three uppercase letters. ">

3) min attribute and Max property: exclusive for INPUT element of numeric type or date type, now range

4) Step Property: Controls the increment or decrease of the value in the INPUT element

2.2 Display validation: Both the form element and the INPUT element (including select and Textare) have a checkvalidity method that can be displayed to validate the elements within the form, return the validation effect in a Boolean, and use JS to manipulate

2.3 Canceling validation: Sometimes you need to submit the form temporarily, but you do not want all element content in the form to be validated (because it is not filled out). There are two ways to cancel form validation

1) using the Novalidate property of the input or submit element, you can turn off the entire form validation, which is a Boolean value

2) using the Formnovalidate attribute of the input or submit element, using this attribute of the input element, = can invalidate the form validation for the entire INPUT element; Use this property with the Submit button to invalidate the entire form validation

Iii. Enhanced page elements

3.1 Figure elements and figcaption elements: Figure A combination of elements with an optional caption that represents a single piece of content on a Web page, which can be a picture, a chart, a code example, a figcaption that represents the caption You can allow only one figcaption in front of or behind other subordinate elements within a figure.

3.2 Details Element: Provides an alternative to JS, the screen on the local area of the expansion or contraction of the method, there is no browser support;

3.3 meter element: The quantity value within the specified range. Such as: The amount of disk use, the number of votes to the total number of votes. It has six properties:

Value: The actual value that is specifically represented in the element, the default value is 0;min,max,low lower limit, high upper limit, optimum best value

Iv. File API

With this API, the processing of accessing the local file system from the Web page becomes very simple;

4.1 FileList object and file object: HTML5 in the file control by adding the Mulitiple property, file control allows to place multiple files at once, the FileList object represents the list of files selected by the user;

4.2 Blob object: Represents the binary raw data, providing a slice method that accesses the raw data block inside the byte. The Blod object has two properties, the Size property represents the byte length of a Blob object, the Type property represents the MIME type of the Blob, and an empty string if it is an unknown type.

4.3 FileReader interface: Mainly used to read the file into memory, and read the data in the file. Provides an asynchronous API that allows you to access the file system asynchronously in the main thread of the browser, reading the data in the file

1) The interface has four methods, 3 of which are used to read the file (Readasbinarystring,readastext,readasdataurl) and the other to interrupt the read process (abort)

2) FileReader interface event: Used to capture the state when the file was read. Onabort: Triggered on interrupt, onerror: triggered On Error, Onloadstart: On Start, onprogress: In Read, onload: When read is complete, onloadend: When complete, regardless of success or failure

V. Drag and drop API　　

H5 supports dragging data between browsers and other applications to simplify drag-and-drop code

1. Steps to implement drag-and-drop: (1) Set the Draggable property of the object element you want to drag to true, and the IMG and a elements allow drag-and-drop by default, and (2) write event-handling code related to drag-and-drop

The types of mime that are now supported for drag and drop are: Text/plain: text text, text/html:html text, text/xml:xml text, Text/uri-list:url list, one column per URL.

2. DataTransfer object: The properties and methods of the object are used well, can implement custom drag-and-drop icons, support only specific drag-and-drop (copy/move)

3. Set the visual effect on drag and drop: The Effectallowed property represents the visual effect that is allowed when dragged, the value none/copy/copymove/link/linkmove/move/all/unintialize, typically in the Ondragstar t event

The DropEffect property represents the visual effect of the actual drag-and-drop, the value none/copy/link/move, typically in the ondragover event. The latter must be within the scope of the permitted visual effects expressed by the former

4. Custom drag and drop icon: The DataTransfer object has a Setdragimage method with three parameters (IMG, drag and drop icon offset from the x-axis direction of the mouse pointer, y)

HTML5 Study Note five: HTML5 form