HTML5 form Properties
HTML5’s new form properties
HTML5’s <form> and <input> several new attributes have been added to the tag.
<form> new attribute:
Autocomplete
Novalidate
<input> new attribute:
Autocomplete
Autofocus
Form
Formaction
Formenctype
Formmethod
Formnovalidate
Formtarget
Height and width
List
Min and max
Multiple
Pattern (regexp)
Placeholder
Required
Step
< form > / < input > autocomplete attribute
autocomplete Attribute regulation form or input the domain should have autocomplete capabilities.
When the user starts typing in the autocomplete field, the browser should display the filled options in that field.
Tip: autocomplete property may be found in the form is open in the element, and in the input is closed in the element.
Note: autocomplete applicable to <form> tags, and the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range and color.
Example
Enabled in HTML form autocomplete (one input field closed autocomplete ):
<formaction="demo-form.php"autocomplete="on">First
name:<inputtype="text"name="fname"><br>Last
name:<inputtype="text"name="lname"><br>E-mail:<inputtype="email"name="email"autocomplete="off"><br><inputtype="submit"></form>
Tip: in some browsers, you may need to enable autocomplete for this property to take effect.
< form > novalidate Attribute
novalidate Property is a boolean (Boolean) attribute.
novalidate Property specifies that the form should not be validated when it is submitted form or input domain.
Example
There is no need to validate submitted form data
<formaction="demo-form.php"novalidate>E-mail:<inputtype="email"name="user_email"><inputtype="submit"></form>
< input > autofocus attribute
autofocus property is a Boolean property.
autofocus property specifies that the domain automatically gets focus when the page is loaded.
Example
Let “First name” input the input field is automatically focused when the page is loaded:
First name:<inputtype="text"name="fname"autofocus>
<input>Form attribute
form property specifies the form or forms to which the input field belongs.
Tip: if you need to reference more than one form, use a space-separated list.
Example
Located in form out of the form input field references HTML form (the input form still belongs to form part of the form):
<formaction="demo-form.php"id="form1">First
name:<inputtype="text"name="fname"><br><inputtype="submit"value="submit to"></form>Last
name:<inputtype="text"name="lname"form="form1">
< input > formaction attribute
The formaction property is used to describe the URL address of the form submission.
The formaction Property overrides the <form> in the element action attribute.
Note: the The formaction property is used for type="submit" and type="image" .
Example
The following HTMLform form contains two submit buttons with different addresses:
<formaction="demo-form.php">First
name:<inputtype="text"name="fname"><br>Last
name:<inputtype="text"name="lname"><br><inputtype="submit"value="submit to"><br><inputtype="submit"formaction="demo-admin.php"value="submit to"></form>
< input > formenctype attribute
formenctype property describes the data encoding that the form submits to the server (only for form method= “post” form in the form)
formenctype Attribute override form of the element enctype property.
Main: this attribute is similar to that of type="submit" and type="image" use it together.
Example
The first submit button is encoded to send form data by default, and the second submit button sends form data in “multipart/form-data” encoded format:
<formaction="demo-post_enctype.php"method="post">First
name:<inputtype="text"name="fname"><br><inputtype="submit"value="submit to"><inputtype="submit"formenctype="multipart/form-data"value="
Multipart/form-data submit to"></form>
< input > formmethod attribute
formmethod property defines how the form is submitted.
formmethod Property overrides the <form> of the element ``method``property.
Note: this property can be associated with the type="submit" and type="image" use it together.
Example
Redefine the form submission method example:
<formaction="demo-form.php"method="get">First
name:<inputtype="text"name="fname"><br>Last
name:<inputtype="text"name="lname"><br><inputtype="submit"value="submit to"><inputtype="submit"formmethod="post"formaction="demo-post.php"value="use
POST submit to"></form>
< input > formnovalidate attribute
novalidate property is a boolean attribute.
novalidate Property describes the <input> elements do not need to be validated when the form is submitted.
formnovalidate property overrides the <form> of the element novalidate attribute.
Note: formnovalidate attribute and type="submit" use together
Example
A form with two submit buttons (with and without validation):
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="submit to"><br>
<input type="submit" formnovalidate value="Submit without verification">
</form>
< input > formtarget attribute
formtarget property to specify a name or keyword to indicate the display after the form submission data is received.
The formtarget Attribute override <form> of the element ``target``attribute.
Note: formtarget attribute and type="submit" and type="image" use it together.
Example
A form with two submit buttons, displayed in different windows:
<form action="demo-form.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Normal submission">
<input type="submit" formtarget="_blank"
value="Submit to a new page">
</form>
< input > height and width properties
height and width the attribute is specified for the image of type <input> the image height and width of the label.
Note: height and width property applies only to the image of type <input> label.
Tip: images usually specify both height and width attributes. If the image sets the height and width, the space required by the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image and cannot reserve the appropriate space. The picture changes the layout of the page during the loading process (although the picture has been loaded).
Example
Defines an image submission button that uses the height and width Attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
< input > list attribute
list property of the input field datalist . datalist is a list of options for the input field.
Example
In <datalist> predefined in <input> value:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
< input > min and max properties
min 、 max and step property is used for the input type specification limits (constraints).
Note: min 、 max and step the attribute applies to the following types of < input > tags: date pickers 、 number and range .
Example
<input> the minimum and maximum value settings of the element:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
< input > multiple attribute
multiple property is a boolean attribute.
multiple attribute regulation <input> multiple values can be selected in the element.
Note: multiple property applies to the following types of <input> Label: email and file :
Example
Upload multiple files:
Select images: <input type="file" name="img" multiple>
< input > pattern attribute
pattern property describes a regular expression for validation <input> the value of the element.
Note: pattern property applies to the following types of <input> tags: text, search, url, tel, email, and password.
Tip: it is used for the global situation title property describes the pattern.
Tip: you can learn about regular expressions in our JavaScript tutorial
Example
The following example shows a text field that can only contain three letters (without numbers and special characters):
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
< input > placeholder attribute
placeholder property provides a hint that describes the expected value of the input field.
A short prompt is displayed on the input field before the user enters the value.
Note: placeholder property applies to the following types of <input> tags: text, search, url, telephone, email and password.
Example
input field prompt text t:
<input type="text" name="fname" placeholder="First name">
< input > required attribute
required property is a boolean Attribute.
required property states that the input field must be filled in before submission (cannot be empty).
Note: required property applies to the following types of <input> tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.
Example
Input field that cannot be empty:
Username: <input type="text" name="usrname" required>
< input > step attribute
step property specifies a legal numeric interval for the input field.
If step= “3”, then the legal number is-3jing0jue 3jin6 and so on.
Tip: step property can be associated with the max and min property to create a region value.
Note: The ‘step’ attribute is used in conjunction with the following ‘type’ types: number , range , date , datetime , datetime-local , month , time and week
Example
Set the input step step size to 3:
<input type="number" name="points" step="3">
HTML5 < input > tag
Label |
Description |
|---|---|
< form > |
Define an form form |
< input > |
Define an input domain |