Home > Developer > Web Develop
(Excerpt from "HTML 5 from Getting started to mastering" in this section
Validation of the form
————————————————————————————————————————————————————————
? 1, Required properties
The primary purpose of the required property is to ensure that the values in the form control are filled in. On commit, if the content in the element is blank, the submission is not allowed, and the message prompt text is displayed in the browser, prompting the user to enter content in this element.
? 2, Pattern property
The primary purpose of the Pattern property is to verify that the input is a valid format based on the formatting rules set on the form control. The Pattern property is used on the input element, and the property value is set to a regular expression in a format that, when committed, checks whether its contents conform to the given format. When the input content does not conform to the given format, the submission is not allowed, and the information hint text is displayed in the browser, prompting the input must conform to the given format.
For example, the required input must be a number with three uppercase letters, as shown below.
<input pattern= "[0-9][a-z]{3}" Name= "Mr" Placeholder= "input: A number with three uppercase letters. "/>
? 3, Min property and Max Property
The Min and Max properties are private properties of the input element for numeric types or date types that limit the range of values and dates entered in the INPUT element.
? 4, Step properties
The Step property controls the increment when the value in the INPUT element increases or decreases. For example, if you want the user to enter a value between 0 and 100, but must be a multiple of 5, you can specify step as 5.
1, checkvalidity Explicit verification method:
Both the form element and the input element, including the select element and the textarea element, have a checkvalidity method. Call this method to explicitly validate all element content within a form or the content of a single element. If you want to overwrite the browser default validation and feedback process, it is available. The Checkvalidity method returns the validation result in boolean form. Also mentioned is that in HTML5, the form element and the INPUT element also have a Validitystate property that returns a Validitystate object. The object has many properties, but the simplest and most important property is the valid property, which indicates whether the contents of all elements in the form are valid or whether the contents of a single INPUT element are valid.
Such an effect:
(Effects on IE)
To use this:
1 <! DOCTYPE html> 2 <HTML> 3 <Head> 4 <Meta CharSet="Utf-8"> 5 <title>Use the Checkvalidity () method to explicitly validate the form</title> 6 <Script type="Text/javascript"> 7function Checkform (frm) {8if (frm.myEmail.checkValidity ()) {/* explicitly validates the message */9Alert ("Message format is correct! ");Ten}else{ OneAlert ("Message format is wrong! "); A} -} - </Script> the </Head> - <Body> - <Div> - <form Action="" Method="POST"> +Mail: - <input type="Email" name="Myemail" ID="Myemail" value="[email protected]" /> + <BR /> A <input type="Submit" value="Submit" onclick="return Checkform (this.form)" /> at </form> - </Div> - </Body> - </HTML>Explicit Validation
2. Setcustomvalidity Method Custom Error message
A way to customize the error message.
You can customize the error message by using this method when the default prompt error does not satisfy the requirement. When you customize the error message by using this method, the Validationmessage property value of the element changes to the defined error message, and the value of the Customerror property of the Validitystate object becomes true. The following is an example of how to use it.
Effect:
1 <! DOCTYPE html> 2 <HTML> 3 <Head> 4 <Meta CharSet="Utf-8"> 5 <title>Custom error message</title> 6 <Script type="Text/javascript"> 7function Checkform (frm) {8var name=frm.name;9if (name.value== "") {TenName.setcustomvalidity ("Write your name and go, hey! "); /* CUSTOM error hint */ One}else{ AName.setcustomvalidity (""); /* Cancel custom error message */ -} -} the </Script> - </Head> - <Body> - <Div> + <form Action="" Method="POST"> -Name: + <input ID="Name" name="Name" placeholder="First and last Name" Required /> A <input type="Submit" value="Submit" OnClick="Checkform (this.form)" /> at </form> - </Div> - </Body> - </HTML>Custom Validation
PS: If you put the message verification and name verification together, must first verify the mail, and then verify the name, you say fun is not fun
3. Avoid verification
What if you don't want the browser to validate your form?
Use the Novalidate property of the form element to turn off the entire form validation.
The formnovalidate attribute of the INPUT element or the submit element can invalidate a single INPUT element.
Another: The novalidate equivalence of the formnovalidate and form of the submit
Added page elements
————————————————————————————————————————————————————————
Figure element
Used to represent a single piece of content on a Web page that is removed from a Web page without any effect on other content on the page. The Figcaption element represents the caption of the figure element. It belongs to the figure element, so it must be written inside the figure element and can be written in front of or behind other subordinate elements within the figure element. Only one figcaption element is allowed inside a figure element, but multiple other elements are allowed to be placed.
Eg: two figure, with a title
1 <title>New Element Example</title>2 </Head>3 < Figure>4 <figcaption>Story</figcaption>5 <BR/>6There are a lot of times, it is the living people with the memory of the past to escape the perception of no future,<BR/>7The first year, will think if he is still, how the years will be different, the second year accustomed to his absence,<BR/>8But inevitably sad less his taste; the third year, to the romantic remembering, no longer exists his position,<BR/>9It is a foregone conclusion that he is absent.Ten </ Figure> One <HR Color="#38ABD4" size="+1"> A <Body> - < Figure> - <img src="Images/1.jpg" width=" the"><BR/> the <figcaption>The demon should seal the light</figcaption> - </ Figure> - </Body>Figure
Details element
Provides an alternative to Javascrip, which mainly provides an expansion/contraction area. For example, the following application code:
(currently only Chrome and Safari 6 support <details> tags.) ）
< details > < summary > Baidu Encyclopedia </ summary > p > Baidu Encyclopedia, nothing good to introduce .... </ p > </ details >
Description: The details element is not limited to placing text, but can also place forms, plug-ins, or detailed data tables provided for a chart within it.
Mark Element
Represents a paragraph of text that needs to be highlighted or highlighted on the page for reference by the current user. It is usually used to refer to the original text when the purpose is to draw the reader's attention. The mark element is equivalent to using a highlighter to mark some text on printed paper.
Description: The main purpose of the Mark element is to attract the attention of the current user, since the marked text is related to the user's current operation, which is usually helpful for the current user.
The best example of the role of Mark elements is the result of retrieving a keyword in the full text of a Web page, and many search engines now use other methods to achieve the functionality that the Mark element achieves.
Another major function of the mark element is to mark the content of the original author without special emphasis for a particular purpose when quoting the original text.
The difference between the mark element and the EM, strong elements:
Developers may be accustomed to highlighting text with EM or strong elements, but be aware that the role of the mark element is different from the two elements and cannot be confused. The mark element's purpose is not related to the original author, or it is not used by the original author to mark the text, but is added in the later reference, its purpose is to attract the attention of the current user, provided to the user for reference, hoping to be helpful to the user. And strong is used by the author to emphasize the importance of a piece of text, such as warning messages, error messages, etc., the EM element is used by the author in order to highlight the focus of the article.
Usage examples:
< mark > you want Mark's content </ mark > Span class= "KWRD" >< summary >< mark > tomorrow technology </ mark ></ summary > < p >< mark > tomorrow technology </ mark > , founded in 1998 .... </ p >
Progress elements
One of the new elements in the HTML5 draft standard. It represents the completion progress of a task, which can be indeterminate, but indicates that progress is ongoing, but it is unclear how much work has not been done, or a number from 0 to a maximum number (for example, 100) to indicate accurate progress completion (such as percentage of progress)
The element has two properties: The Value property indicates how much work has been done, and the Max property indicates how much work is in total. The unit of work is arbitrary, not specified.
Note the values of the value and Max properties must be greater than the value of 0,value less than or equal to the value of the Max property.
HTML5 Study II: Forms in the HTML5 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
