HTML5 's new form features (3)

Although the level of support for HTML5 in various browsers is uneven, there is no denying that HTML5 will become a trend in the future.

I.. HTML5 form NEW properties

(1) placeholder The use of this property is quite large, you can display descriptive instructions or information to the user. If the browser is not supported, this property

will be ignored, showing the default state of the browser. Placeholder values are not displayed when there is a value in the input box or when the focus is obtained

Eg: your name: <input type= "text" placeholder= "Please enter your real name" name= "Realname"/>

"Note" But the interesting thing about this property is that if the browser supports autofocus at the same time, the function of this property will not play out,

In fact, it is understood that if autofocus is valid, it indicates that the input box has content, but the content is empty.

(2) AutoComplete This property is used to protect most grateful user data and to avoid unsafe storage of them by local browsers.

"Value" on the field is not protected and values can be saved and restored

Off the field is protected and the value cannot be saved

Unspecified contains the default settings for a form, and behaves the same as when set on if it is not included in the form or if no value is specified

(3) Autofocus this property, as its name implies, automatically gets the focus, but only one autofocus property per page is allowed, if more than one set of

This behavior is equivalent to unspecified. This property is somewhat similar to checked's usage and can be written directly without setting it in effect

Eg: <input type= "text" name= "name" autofocus/>

(4) List and DataList

HTML5 in the label is really the essence, in doing the search, often encounter such a way of implementation, input when there is a certain hint of information

<datalist id= "Urllist" >

<option value= "http://www.google.hk" label= "Google China" >

<option value= "http://www.baidu.com" label= "Baidu" >

</datalist>

Select search Engine: <input type= "text" id= "Contacts" list= "Urllist"/>

The effect is as follows: (under FF, different browser effects vary)

"Note": DataList must have an ID, reference input, etc. with the value of the List property corresponds to the ID value of the DataList

(5) Min and Max

The Min and Max properties are used for input type= "range", min setting minimum, max setting max value

Example: Value range: <input type= "range" name= "number" min= "0" max= "/>" effect as below Opera browser effect

(6) Step

This property, for an input control, sets its step property to make the granularity of the input value increment or decrement. This property is the same as Min and Max values for

Input Type=range Box

Eg:<input type= "range" name= "number" min= "0" max= "" "step=" 5 "value=" 0 "/>

(7) Valueasnumber function

The function is to complete the conversion of the control value type between the text and the value.

Eg:document.getElementByIdx_x ("confidence"). Valueasnumber (65);

(8) Required Property

This entry is required once the required attribute is set for an input type space

Eg:<input type= "text" name= "name" required/>

Second, HTML5 form verification

HTML5 form validation is actually an optimization, and its actual purpose is not to guarantee the correctness and validity of the data submitted to the server form, but

To make the web app throw exceptions faster.

When it comes to HTML5 form validation, you have to mention the Validitystate object, which contains references to eight validation states and the final validation results

Gets the Validitystate object for the form element named Myinput in the form name MyForm:

var vstate=document.myform.myinput.validity;

(1) Valid final verification results, if the following eight kinds of constraints are passed, the Validate attribute is true, otherwise it is false;

(2) Eight kinds of restriction conditions

A. valuemissing

This property is for form elements that have required set

Eg:var flag=input.valuemissing;

B. Typemismatch

This property is set for Type=email | number | table cell of the URL Eg:var flag=input.typemismatch;

C. patternmismatch

This property is for the table cell element Eg:var Flag=input.patternmismatch with the pattern set;

D. Toolong

This property is for table cell Eg:var Flag=input.toolong with maxlength set;

E. Rangeunderflow

This property is for Type=range and set min's Range table cell Eg:var flag=input.rangeunderflow;

F. Rangeoverflow

This property is for Type=range and sets the range table cell Eg:var flag=input.rangeoverflow for Max;

G. stepmismatch

This property is for Type=range and sets the range table cell Eg:var flag=input.stepmismatch for Min,max and step;

H. customerror

This property is more obscure, when the browser built-in validation mechanism does not apply, you need to display a custom validation error message, when the input value does not conform to the semantics

Rules, application code should set these custom validation messages.

This property uses setcustomvalidity (message) to place the form control in the Customeorror state

Eg:input.setCustomValidity ("Values not match!");

The value of setcustomvalidity needs to be obtained through Validationmessage eg:input.validationMessage

But it does not seem to be much simpler than using JavaScript directly to customize the error.

"Other features and functions for validation"

(1) Willvalidate indicates whether the form control will be validated, that is, if a property such as Required,pattern is set on the control, then the

Over willvalidate to know if the control has validation constraints

Eg: <input type= "text" Required name= "Realname" onblur= "alert (this.willvalidate);" >

(2) Checkvalidity This function the user verifies the form control, if true, validates the pass, false validation does not pass, and in general, the table

Single authentication occurs when a user or script submits a form, but checkvalidity can validate the form at any time. Different land.

Is that the form validation using checkvalidity does not appear with a hint and needs to be defined by the return value itself.

Eg: <input type= "text" Required name= "Realname" onblur= "Validate (This)"/>

<script>

function validate (input) {

var flag=input.checkvalidity ();

if (!flag) {alert ("cannot be empty! ");}

}

</script>

(3) Validationmessage allows programmatic querying of localized error messages, which are also displayed by the browser based on the current validation status.

This property can be used with setcustomvalidity (MESG)

(4) In some special cases, for example, we encountered a little urgent in the form of filling out, want to save the content, we need to submit to the server for security

Save, but there are restrictions on forms validation that we cannot submit between, this time we need to close the validation of the form, using

Formnovalidate to achieve.

As follows:

<input type= "Submit" Formnovalidate name= "Save" value= "Submit"/>

Formnovalidate is usually set on the form's Submit button

HTML5 's new form features (3)