New Features of HTML5 input elements: html5input

New Features of HTML5 input elements: html5input

In HTML5, the <input> element adds many new attributes, methods, and controls. This article introduces these three aspects respectively.

Directory

1. Attributes

2. Method

3. New Control

 

1. Attributes

<Input> the new attributes of the element in HTML5 include: autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, max, min, minlength, pattern, placeholder, readonly, and required.

1.1 simple description

The newly added attributes are described as follows:

Autocomplete: Displays historical input records that match the current input content. <Details>

Autofocus: After the page is loaded, this element gets the focus. <Details>

Form: Set the ID of the element attribution form. <Details>

Formaction: Set the value of the Form action attribute. <Details>

Formenctype: Set the value of the form enctype attribute. <Details>

Formmethod: Set the value of the Form method attribute. <Details>

Formnovalidate: Disable form verification. <Details>

Formtarget: Set the value of the target attribute of the form. <Details>

Max: Sets the maximum value of the number or date control in the <input> element. <Details>

Min: Set the minimum value of the number or date control in the <input> element. <Details>

Minlength: Sets the minimum length of the text input control. <Details>

Pattern: Set the regular expression for Matching Element text content. <Details>

Placeholder: Sets the pre-display content of the text control. <Details>

Readonly: Sets whether the element is read-only. <Details>

Required: Set whether the control is required. <Details>

 

1.2 Details 1) autocomplete: whether to display historical input records that match the current input content

Description: Sets whether to display historical input records that match the current content in the current text element.

Scenario: This attribute is required for the search box, but not for the verification code.

Configurable values: Only on and off values can be set.

Autocomplete = "on": displays the matched historical input records.

Autocomplete = "off": the matched historical input records are not displayed.

Example:

<Form action = "#"> <p> Verification Code: <input type = "text" autocomplete = "off"/> </p> <input type = "submit"/> </form>

 

2) autofocus: After the page is loaded, this element gets the focus

Description: If multiple elements on the page contain this attribute, only the first element gets the focus.

Example:

<P> name: <input type = "text" placeholder = "Enter your real name"/> </p> <p> address: <input type = "text" autofocus/> </p>

 

3) form: sets the ID of the element owner form.

Description: If the element is not in the form tag, you can set this value to the form ID to be assigned.

Example:

<input type="text" form="register_form" />

 

4) formaction: set the value of the Form action attribute.

 

5) formenctype: set the value of the form enctype attribute.

 

6) forpolichod: set the value of the method attribute of the form.

Description: The configurable values include post and get.

 

7) formnovalidate: Disable form verification.

Description: Can be applied to operations similar to temporary storage.

Example:

<Form action = "#"> <p> User Name: <input type = "text" name = "loginName" required/> </p> <input type = "button" value = "temporary storage" formnovalidate/> <input type = "submit "/> </form>

 

8) formtarget: set the value of the target attribute of the form.

Description: Optional values: _ self, _ blank, _ parent, and _ top.

 

9) max: sets the maximum value of the number or date control in the <input> element.

 

10) min: sets the minimum value of the number or date control in the <input> element.

 

11) minlength: sets the minimum content length of the text input control.

 

12) pattern: Set the regular expression to be matched in the element text content

Description: The regular expression specified by the element text contentExact matchWill pass the verification.

Note::

1) the browser will not verify the null value. If it is required, the required attribute can be added.

2) if the value of the title attribute is included, the title information is displayed when the matching fails.

Example:

<Form action = "#"> <p> mobile phone number: <input type = "text" name = "phoneNumber" pattern = "[1] ([3] | [5]) [0-9] {9} "title =" phone number starting with 13 or 15 "/> </p> <input type =" submit "/> </form>

13) placeholder: sets the pre-display content of the text control.

Description: The value set for this attribute is displayed only when the document content is empty.

Example:

Name: <input type = "text" placeholder = "Enter your real name"/>

 

14) readonly: sets whether the element is read-only.

 

15) required: Set whether the control is required

Description: When a form is submitted, the system verifies whether this element is filled in. If this element is not filled in, a warning message is displayed and the submission is canceled.

Example:

<Form action = "#"> <p> User Name: <input type = "text" name = "loginName" required/> </p> <input type = "submit"/> </form>

 

2. Method

<Input> two verification-related methods are added to HTML5:

CheckValidity (): determines whether the control content is verified.

SetCustomValidity (): Set custom information that is out of date during verification.

2.1 details 1) boolean checkValidity (): determines whether the control content has been verified

Return Value:

{Boolean} returns a boolean value indicating whether the control content has been verified.

Example:

HTML:

Url: <input type = "url" id = "webURL"/>

JavaScript:

// Content: www.cnblogs.com/polk6console.log (document. getElementById ('weburl '). checkValidity (); // => false: Verification Failed // content: http://www.cnblogs.com/polk6console.log (document. getElementById ('weburl '). checkValidity (); // => true: verification passed

2) void setCustomValidity (string msg): sets custom information that cannot be verified

Description: A warning box is displayed on this element to display custom information.

Note:: Only custom warning information is displayed during form verification.

Parameters:

Msg {string}: Set the information to be displayed. If it is null, the warning box is closed.

Example:

HTML:

<Form> <p> New password: <input type = "password" id = "newPwd" oninput = "validityPwd () "required/> </p> <p> Confirm password: <input type =" password "id =" newPwdConfirm "oninput =" validityPwd () "/> </p> <input type =" submit "/> </form>

JavaScript:

// Verify that the two passwords are consistent. var validityPwd = function () {var newPwd = document. getElementById ('newpwd'); var newPwdConfirm = document. getElementById ('newpwdconfirm'); if (newPwd. value! = NewPwdConfirm. value) {newPwdConfirm. setCustomValidity ('inconsistent two passwords ');} else {newPwdConfirm. setCustomValidity ('');}}

 

 

3. New Controls

<Input> the value of the type attribute of an element determines what controls the <input> element displays.

In HTML5, many new controls are added to <input>, such as color, date, email, month, number, range, search, tel, time, url, and week.

If the browser does not support the new control, it will be displayed in the text box by default (type = "text ").

 

2.1 Brief Introduction

<Input> element type attribute value:

Color: Color Control. <Details>

Date: Date control. <Details>

Email: Email address input box. <Details>

Month: Date and month calendar control. <Details>

Number: Value input box. <Details>

Range: Slide bar. <Details>

Search: Search box. <Details>

Tel: Phone number input box. <Details>

Time: Time control. <Details>

Url: URL input box. <Details>

Week: Week control. <Details>

 

2.2 details 1) type = "color": color Control

Description: Display a color control and click the desired color.

Attribute:

Value {string}: set or obtain the color control value. The format of the value must be: "# rrggbb ".

Example:

<input type="color" />

 

2) type = "date": date Control

Description: Displays a date control. You can select a date, year, month, or day.

Attribute:

Value {string}: set or obtain the value of the date control. The format of the value must be "yyyy-MM-dd ".

Example:

<input type="date" value="2016-04-29" />

 

3) type = "email": email address input box

Description: Displays an input box that can only be entered in the email format.

Attribute:

Multiple: After this attribute is added, you can enter multiple email addresses separated by commas.

Example:

<input type="email" multiple />

 

4) type = "month": year and month control

Description: Provides a calendar control that can only select year and month.

Attribute:

Value {string}: set or obtain the value of the control. The format of the value must be "yyyy-MM ".

Example:

<input type="month" value="2016-04" />

 

5) type = "number": value input box

Description: Only numeric-related characters can be entered, such as numbers,. (decimal point), and-(negative number.

Attribute: Max indicates the maximum value, min indicates the minimum value, and step indicates the size of each beating button.

Example:

<input type="number" value="11.5" />

 

 

6) type = "range": Slider

Description: Represents a value in the form of a slider.

Attribute: Max indicates the maximum value; min indicates the minimum value.

Example:

<input type="range" max="100" min="0" value="80" />

 

 

7) type = "search": search box

Description: When there is no content in the Chrome search box, it is like a normal text input box. When there is content, there is an 'X' symbol on the right to clear the text content.

Example:

<input type="search" />

 

 

8) type = "tel": Phone number input box

Description: Phone numbers are in many formats, including numbers, hyphens, and brackets. The browser does not specify the phone number format, but displays a digital keyboard by default when using a mobile browser.

Example:

<input type="tel" />

 

9) type = "time": time Control

Description: Displays a time control, which allows you to select a time or enter it manually.

Attribute:

Value {string}: Specifies or obtains the value of the time control. The format of the value must be "HH: mm", "HH: mm: ss", or "HH: mm: ss. SSS ".

Example:

<input type="time" value="12:30" />

　

 

10) type = "url": url input box

Description: The entered URL must be prefixed with the Protocol, such as http: // and https.

Example:

<input type="url" />

 

 

11) type = "week": weekly widget

Description: Displays a calendar control that can be selected for years and weeks.

Attribute:

Value {string}: set or obtain the value of the week count control. The value format must be "yyyy-Www ". (The W character in the format cannot be omitted, and the ww week number must be 2 digits)

Example:

<input type="week" value="2016-W01"/>

 

====================================== Series of articles ==============================================

This article: 6.4 New Features of HTML5 input Elements

Web development path Series