HTML5 and CSS3 authoritative guide. pdf3

Form validation

<input name= "text" type= "text" Required pattern= "^\w.*$" >

The Required property, which can be applied on most elements, is not allowed if the element content is empty

Pattern property, setting the property to a regular expression of a format

<input pattern= ' [0-9][a-z]{3} ' Name=part placeholder= ' Enter a number with three uppercase letters ' >

The Min property, with the Max property, specifies the proprietary properties of the input element of a numeric type or date type, limiting its scope

Step property, which controls how far the value in the INPUT element increases or decreases, and if the user enters a value between 0 and 100, it must be a multiple of 5

Explicit validation

Both the form element and the INPUT element have a Checkvalidity method (which returns a Boolean value) that can be invoked to explicitly validate all element content within the form

var Email=document.getelementbyid ("email");

if (email.value== "") {

Alert ("Please enter an email address");

Retuen false;

}

else if (!email.checkvalidity ()) {

Alert ("Please enter the correct email address");

}

...

There is also a validity property that returns an Validitystate object with many properties, where the valid property indicates whether the element content is valid

Cancel Validation

If you need to temporarily cancel form validation, there are two methods:

Use the Novalidate property of the form element (true to turn off validation), which can turn off the entire form validation;

Use the Formnovalidate attribute of the INPUT element or the submit element to invalidate a single form validation

Custom error messages

Call the INPUT element's Setcustomvalidity method

Pass2.setcustomvalidity ("Password inconsistent!")

Enhance page elements

Figure Elements and Figcaption elements

The figure element is used to represent a single piece of content on a Web page, and the figcaption element is a subordinate element (caption) and allows only one

Details element, you can expand or contract the upper part of the screen, summary element is a subordinate element

<details>

<summary>xxxx<summary>

<p> Detailed Introduction </p>

</details>

Mark elements, highlighting, attracting user attention

<mark>HTML5</mark>

Progress element, the Value property represents how much work has been done, and the Max property indicates how much work is total

<p><progress id= "P" max=100 value=10></progress></p>

The meter element, which represents a quantity value within a specified range, has 6 attributes:

Vaule actual value, default is 0, can be decimal, min minimum, default 0;max maximum, default 1, if it is less than min, ze treats min as maximum value, max specifies range lower value, must be less than or equal to high value, if less than min value, the Min property is treated as low property value The upper limit of the specified range, also if less than Low,low is considered high, if it is greater than Max, then Max is considered the value of the High property; Optimum best value, between Max and Min, can be greater than the High property value

<p><meter value= "min=" 0 "max=" low= "" "" High= "" optimum= ">A+</meter></p>

You can also not use attributes <meter>80%</meter>

Add menu element and command element

These two elements are used for Web application menus, toolbars, pop-up menus, menu equivalent menus, command equivalent

Improved OL element, added start property and reversed attribute, OL element list default starting from 1, start attribute can be specified number

<ol start=5>

<li>1111</li>

<li>2222</li>

</ol>

Reversed property Reverse sort <li> element <ol reversed>

Improved DL element, in HTML, the DI element is specifically used to define a list of terms, HTML5 the element redefined

<dl>

<dt> Terminology 1</dt>

<dd> definition 1</dd>

<dt> Terminology 2</dt>

<dd> definition 2</dd>

</dl>

The cite element represents the title of the work <cite></cite>

Redefine small elements, secondary information copyright information, etc.

File API

HTML5 provides a file manipulation API to access the local file system

FileList objects and File objects: The FileList object represents a list of files selected by the user, only one file is allowed in HTML4, multiple attribute is allowed in the HTML5, multiple files are placed at one time, and each user in the control selects a file object. The FileList object is a list of file objects with the file object having two properties the Name property (representing the file name, without the path) LastModifiedDate property (indicating the date on which the document was last modified)

<input type= "File" id= "file" multiple size= "/>"

File=document.getelementbyid ("file"). Files[1];

The Blob object represents the raw data of the binary, which can be accessed into the original data block inside the byte, with two attributes Size property (Blob object's byte length) Type property (MIME type, or empty string if unknown type)

The file object mentioned above also inherits the Blob object

Files[0].size Files[0].type

The FileReader interface is used to read the file into memory and read the data in the file.

Check if the browser supports the FileReader interface

if (typeof filereader== ' undefined ') {

Alert ("Your browser does not implement the FileReader interface");

}else{

var reader=new filereader ();

Normal use of the browser

}

FileReader interface Methods (4 methods, 3 for reading files, one for interrupt reading)

The method does not return results regardless of the success or failure of the read, and the results are stored in the result property

Readastext: Two parameters, the second Company text encoding method, the default UTF-8

Readasbinarystring: Read as a binary string to the backend

Readasdataurl: Reading a file as a data URL string

Events for the FileReader interface