HTML5 Form Properties
HTML5 New Form Properties
HTML5's <form> and <input> tag adds several new properties.
<Form> new attributes:
- autocomplete
- novalidate
<Input> New properties:
- 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 specifies the form or input field should have autocomplete.
When users start typing in the autocomplete field, the browser should display options to fill in this field.
Tip: autocomplete attribute possible form element is turned on, and in the input element is turned off.
Note: autocomplete apply <form> tag, and the following types of <input> tag: text, search, url, telephone , email, password, datepickers, range and color.
Examples
HTML form in open autocomplete (a shutdown input field autocomplete):
Tip: Some browsers, you may need to enable the AutoComplete feature, in order to pick up the property.
<Form> novalidate property
A boolean property novalidate property.
novalidate attribute specifies when submitting the form should not validate form input or domain.
Examples
Without verification form data submission
<Input> autofocus attribute
autofocus attribute is a boolean attribute.
autofocus attribute specifies when the page loads, the domain automatically receive focus.
Examples
Let "First name" input field enter the auto focus on page load:
<Input> form property
attribute specifies a form input field belongs to one or more forms.
Tip: To cite more than one form, use a space-separated list.
Examples
Located in form form outside the input field refers to HTML form (the form is still a form input forms part of):
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
<Input> formaction property
The formaction property is used to describe the URL of form submission.
The formaction attributes override <form> element in the action attribute.
Note: The formaction attribute type = "submit" and type = "image".
Examples
HTMLform submit the following form contains two different addresses button:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>
<Input> formenctype property
formenctype attribute describes the form is submitted to the server data encoding (only for form form method = "post" form)
formenctype property overrides enctype attribute form elements.
Main: This attribute type = "submit" and type = "image" used in conjunction.
Examples
The first submit button to send the form data is encoded by default, the second submit button to "multipart / form-data" encoding format to send the form data:
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>
<Input> formmethod property
formmethod attribute defines the way form submission.
formmethod property covering the <form> element's method attribute.
Note: This attribute can be used with type = "submit" and type = "image" used in conjunction.
Examples
Redefine the form submission by way of example:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>
<Input> formnovalidate property
novalidate property is a boolean property.
novalidate attribute describes the <input> elements do not need to be validated when the form is submitted.
formnovalidate attributes override novalidate attribute <form> element.
Note: formnovalidate attribute type = "submit for use with
Examples
Two buttons submit the form (not applicable with verification):
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>
<Input> formtarget property
formtarget attribute specifies a name or a keyword to indicate the display data received after the form is submitted.
The formtarget property overrides <form> target attribute of the element.
Note: formtarget attribute type = "submit" and type = "image" used in conjunction.
Examples
Two buttons submit the form displayed in different windows:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>
<Input> height and width attributes
height and width attributes specified for the image type of <input> tag image height and width.
Note: height and width properties only apply to image type <input> tag.
Tip: The image will usually specify the height and width attributes.If the image set the height and width of the space required for the image when the page is loaded will be retained. Without these attributes, the browser does not know the size of the image, and can not set aside the appropriate space. Photos during the loading process will effect change page layout (although image has loaded).
Examples
Defines an image submit button, use the height and width attributes:
<Input> list properties
datalist list attribute specifies the input fields. datalist is a list of options for the input fields.
Examples
Predefined in <datalist> in <input> value:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<Input> min and max attributes
min, max, and step attributes are used as input types containing numbers or dates Limited (constraints).
Note: min, max, and step attributes apply to the following types of <input> tag: date pickers, number and range.
Examples
<Input> elements of the minimum and maximum settings:
<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 properties
multiple attribute is a boolean attribute.
multiple attribute specifies <input> element to select multiple values.
Note: multiple properties apply to the following types of <input> tag: email and file:
Examples
Upload multiple files:
<Input> pattern property
pattern attribute describes a regular expression used to validate the value of <input> elements.
Note: pattern attribute applies to the following types of <input> tag: text, search, url, tel , email, and password.
Tip: It is used for the global title attribute describes the mode.
Tip: You can in our JavaScript tutorial to learn about the content of a regular expression
Examples
The following example shows a three letters contain only text field (no numbers or special characters):
<Input> placeholder attribute
placeholder attribute provides a hint (hint), describe the expected value of the input field.
A brief reminder will be displayed on the input field before the user input value.
Note: placeholder attribute applies to the following types of <input> tag: text, search, url, telephone , email and password.
Examples
input field prompt text t:
<Input> required Attribute
required attribute is a boolean attribute.
required attribute specifies that an input field must be filled (not empty) before submitting.
Note: required attributes for the following types of <input> tag: text, search, url, telephone , email, password, date pickers, number, checkbox, radio and file.
Examples
Can not empty input fields:
<Input> step attributes
step attribute for the input field specifies the legal number intervals.
If step = "3", legal numbers could be -3,0,3,6, etc
Tip: step attribute can create a regional value max and min attributes.
Note: step attribute types used in conjunction with the following type: number, range, date, datetime , datetime-local, month, time and week.
Examples
Predetermined input step step 3:
HTML5 <input> tag
标签 | 描述 |
---|---|
<form> | 定义一个form表单 |
<input> | 定义一个 input 域 |