What are the properties of the HTML5 form?

Source: Internet
Author: User
To see an explanation of the elements of the form, see the HTML5 form element here

The elements of the form are mentioned above, so let's take a look at some of the new properties.

I haven't seen it. Links: HTML5 Elements of a form

HTML5 new Form properties are mainly in two aspects <form><input> new attributes of elements.

HTML5 Properties of a form

The new form property:

    • AutoComplete

    • Novalidate

The new input property:

    • AutoComplete

    • Autofocus

    • Form

    • Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)

    • Height and width

    • List

    • Min,max and step

    • Multiple

    • Pattern (regexp)

    • Placeholder

    • Required

AutoComplete property

The AutoComplete property specifies that the form or input field should have auto-complete functionality.

Note: AutoComplete applies to <form> tags, as well as the following types of <input> tags: text, search, URL, telephone, email, password, datepickers, RA Nge and color.

When the user starts typing in the AutoComplete field, the browser should display the fill-in options in that field:

<form action= "demo_form.asp" method= "Get" autocomplete= "on" >first Name: <input type= "text" name= "FName"/> <BR/>last Name: <input type= "text" name= "lname"/><br/>e-mail: <input type= "email" name= "email" au Tocomplete= "Off"/><br/><input type= "Submit"/></form>

Note: In some browsers, you may need to enable the AutoComplete feature for this property to take effect.

Autofocus Property

The Autofocus property specifies that the domain automatically receives focus when the page loads.

Note: The Autofocus property applies to all <input> label types.

User Name: <input type= "text" name= "user_name" autofocus= "autofocus"  />

Form Property

The form property specifies one or more forms to which the input domain belongs.

Note: The form property applies to all <input> label types.

The Form property must refer to the ID of the owning form:

<form action= "demo_form.asp" method= "Get" id= "User_form" >first name:<input type= "text" name= "FName"/> <input type= "Submit"/></form>last Name: <input type= "text" name= "lname" form= "User_form"/>

Note: If you want to refer to more than one form, use a space-delimited list.

Form Override Properties

The form Override property (form override attributes) allows you to override some of the property settings of a FORM element.

Form Override properties are:

FormAction-Override the form's Action property

Formenctype-Rewrite the Enctype property of the form

FormMethod-Override the form's Method property

Formnovalidate-Rewrite the Novalidate property of the form

Formtarget-Override the target property of the form

Note: The form override property applies to the following types of <input> tags: submit and image.

<form action= "demo_form.asp" method= "Get" id= "User_form" >e-mail: <input type= "Email" name= "userid"/>< BR/><input type= "Submit" value= "Submit"/><br/><input type= "Submit" formaction= "demo_admin.asp" Value= "Submit as admin"/><br/><input type= "Submit" formnovalidate= "true" value= "Submit without validation "/><br/></form>

Note: These properties are useful for creating different submit buttons.

Height and Width properties

The Height and Width properties specify the image heights and widths for the input label of the image type.

Note: The height and Width properties apply only to the <input> label of the image type.

<input type= "image" Src= "Img_submit.gif" width= "" "Height="/> "

List Property

The List property specifies the DataList of the input domain. DataList is a list of options for the input domain.

Note: The List property applies to the following types of <input> tags: text, search, URL, telephone, email, date pickers, number, range, and color.

Webpage: <input type= "url" list= "url_list" name= "link"/><datalist id= "url_list" ><option label= " W3Schools "value=" http://www.w3school.com.cn "/><option label=" Google "value=" http://www.google.com "/> <option label= "Microsoft" value= "http://www.microsoft.com"/></datalist>

Min, max, and step properties

The Min, max, and step properties are used to specify a qualification (constraint) for input types that contain numbers or dates.

The Max property specifies the maximum allowable value for the input field.

The Min property specifies the minimum allowable value for the input field.

The Step property specifies a valid number interval for the input field (if step= "3", the legal number is -3,0,3,6, etc.).

Note: the Min, Max, and step properties apply to the following types of <input> tags: date pickers, number, and range.

The following example shows a numeric field that accepts a value between 0 and 10 with a stepping of 3 (that is, a valid value of 0, 3, 6, and 9):

Points: <input type= "number" name= "Points" min= "0" max= "ten" step= "3"/>

Multiple Property

The Multiple property specifies that multiple values can be selected in the input field.

Note: The Multiple property applies to the following types of <input> tags: email and file.

Select images: <input type= "file" Name= "img" multiple= "multiple"/>

Novalidate Property

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

Note: The Novalidate property applies to <form> and the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, rang E and color.

<form action= "demo_form.asp" method= "Get" novalidate= "true" >e-mail: <input type= "Email" name= "User_email"/ ><input type= "Submit"/></form>

Pattern Property

The Pattern property specifies the mode (pattern) used to validate the input field.

Pattern is a regular expression. You can learn something about regular expressions in our JavaScript tutorials.

Note: The pattern attribute applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The following example shows a text field (with no numbers and special characters) that can contain only three letters:

Country code: <input type= "text" name= "Country_code" pattern= "[a-z]{3}" title= "Three letter country Code"/>

Placeholder Property

The placeholder property provides a hint (hint) describing the value that the input field expects.

Note: The placeholder property applies to the following types of <input> tags: text, search, URL, telephone, email, and password.

The hint (hint) appears when the input field is empty and disappears when the input field gets focus:

<input type= "Search" name= "User_search"  placeholder= "search php"/>

Required Property

The Required property specifies that the input field must be filled in before submission (cannot be empty).

Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox, Radi O and file.

Name: <input type= "text" name= "Usr_name" required= "required"/>

"Recommended"

HTML base element that gives you 0 basic learning HTML

The development history of HTML and HTML5

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.