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):

<Form action = "demo-form.php" 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" autocomplete = "off"> <br > <Input type = "submit"> </ Form>

try it"

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

<Form action = "demo-form.php" novalidate> E-mail: <input type = "email" name = "user_email"> <Input type = "submit"> </ Form>

try it"

<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:

First name:<input type="text" name="fname" autofocus>

try it"

<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):

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

try it"

<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:

<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="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

try it"

<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:

<form action="demo-post_enctype.php" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

try it"

<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:

<form action="demo-form.php" method="get">
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>

try it"

<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):

<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

try it"

<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:

<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="正常提交">
<input type="submit" formtarget="_blank"
value="提交到一个新的页面上">
</form>

try it"

<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 type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

try it"

<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:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

try it"

<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:

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">

try it"

<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:

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

try it"

<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):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

try it"

<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 type="text" name="fname" placeholder="First name">

try it"

<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:

Username: <input type="text" name="usrname" required>

try it"

<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:

<input type="number" name="points" step="3">

try it"

HTML5 <input> tag