HTML5 Form Attributes


Several new attributes have been added to HTML5's <form> and <input> tags.

<form> New Attributes:

  • autocomplete

  • novalidate

<input> New Attributes:

  • 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

The autocomplete attribute specifies that the form or input field should have an autocomplete function.

When the user starts typing in the auto-complete field, the browser should display the filled-in options in the field.

Tip: The autocomplete attribute may be turned on in the form element, but turned off in the input element.

Note: autocomplete is applicable to <form> tags and the following types of <input> tags: text, search, url, telephone, email, password, datepickers, range and color.

OperaSafariChromeFirefoxInternet Explorer

Example

Turn on autocomplete in the HTML form (an input field turns off autocomplete):

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

Tip: In some browsers, you may need to enable the auto-completion function for this property to take effect.

 Try It! 


<form> "novalidate" Attribute

The novalidate attribute is a boolean attribute.

The novalidate attribute specifies that the form or input field should not be validated when the form is submitted.

OperaSafariChromeFirefoxInternet Explorer

Example

No need to verify submitted form data

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

 Try It! 


<input> "autofocus" Attribute

The autofocus attribute is a Boolean attribute.

The autofocus attribute specifies that when the page loads, the domain automatically gets the focus.

OperaSafariChromeFirefoxInternet Explorer

Example

Let the "First name" input field be automatically focused when the page loads:

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

 Try It! 


<input> Form Attribute

The form attribute specifies one or more forms to which the input field belongs.

Tip: If you need to quote more than one form, please use a space-separated list.

OperaSafariChromeFirefoxInternet Explorer

Example

The input field outside the form refers to the HTML form (the input form is still part of the form):

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

 Try It! 


<input> "formaction" Attribute

The formaction attribute is used to describe the URL address of the form submission.

The formaction attribute overrides the action attribute in the <form> element.

Note: The formaction attribute is used for type="submit" and type="image".

OperaSafariChromeFirefoxInternet Explorer

Example

The following HTMLform form contains two submit buttons with different addresses:

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

 Try It! 


<input> "formenctype" Attribute

The formenctype attribute describes the data encoding of the form submitted to the server (only for the form with method="post" in the form)

The formenctype attribute overrides the enctype attribute of the form element.

Note: This attribute is used in conjunction with type="submit" and type="image".

OperaSafariChromeFirefoxInternet Explorer

Example

The first submit button has the default encoding to send the form data, and the second submit button sends the form data in the "multipart/form-data" encoding format:

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

 Try It! 


<input> "formmethod" Attribute

The formmethod attribute defines how the form is submitted.

The formmethod attribute overrides the method attribute of the <form> element.

Note: This attribute can be used in conjunction with type="submit" and type="image".

OperaSafariChromeFirefoxInternet Explorer

Example

Examples of redefining the form submission method:

<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="Submit">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="Submit using POST">
</form>

 Try It! 


<input> "formnovalidate" Attribute

The novalidate attribute is a boolean attribute.

The novalidate attribute describes that the <input> element does not need to be validated when the form is submitted.

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

Note: The formnovalidate attribute is used with type="submit"

OperaSafariChromeFirefoxInternet Explorer

Example

Forms 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"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

 Try It! 


<input> "formtarget" Attribute

The formtarget attribute specifies a name or a keyword to indicate the display of the form submission data after it is received.

The formtarget attribute overrides the target attribute of the <form> element.

Note: The formtarget attribute is used in conjunction with type="submit" and type="image".

OperaSafariChromeFirefoxInternet Explorer

Example

Two submit button forms, 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="Submit as normal">
  <input type="submit" formtarget="_blank" value="Submit to a new window">
</form>

Try It! 


<input> "height" and "width" Attributes

The height and width attributes specify the height and width of the image used for the <input> tag of the image type.

Note: The height and width attributes are only applicable to <input> tags of image type.

Tip: Images usually specify height and width attributes at the same time. If the height and width of the image are set, the space required by the image will be reserved when the page is loaded. Without these attributes, the browser does not know the size of the image and cannot reserve adequate space. The picture will change the page layout effect during the loading process (even though the picture is already loaded).

OperaSafariChromeFirefoxInternet Explorer

Example

An image submit button is defined, using the height and width attributes:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

 Try It! 


<input> "list" attribute

The list attribute specifies the datalist of the input field. datalist is a list of options for the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

Predefine <input> value in <datalist>:

<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

The min, max, and step attributes are used to specify limits (constraints) for input types that contain numbers or dates.

Note: The min, max, and step attributes are applicable to the following types of <input> tags: date pickers, number, and range.

OperaSafariChromeFirefoxInternet Explorer

Example

<input> element 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" Attribute

The multiple attribute is a boolean attribute.

The multiple attribute specifies that multiple values can be selected in the <input> element.

Note: The multiple attribute applies to the following types of <input> tags: email and file:

OperaSafariChromeFirefoxInternet Explorer

Example

Upload multiple files:

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

 Try It! 


<input> "pattern" Attribute

The pattern attribute describes a regular expression used to validate the value of the <input> element.

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

Tip: It is used to describe the mode with the global title attribute.

Tip: You can learn about regular expressions in our JavaScript tutorial

OperaSafariChromeFirefoxInternet Explorer

Example

The following example shows a text field that can only contain three letters (excluding numbers and 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

The placeholder attribute provides a hint that describes the expected value of the input field.

A short prompt will be displayed on the input field before the user enters the value.

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

OperaSafariChromeFirefoxInternet Explorer

Example

Input field prompt text "First name":

<input type="text" name="fname" placeholder="First name">

 Try It! 


<input> "required" Attribute

The required attribute is a boolean attribute.

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

Note: The required attribute applies to the following types of <input> tags: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file.

OperaSafariChromeFirefoxInternet Explorer

Example

Input fields that cannot be empty:

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

 Try It! 


<input> "step" Attribute

The step attribute specifies a legal number interval for the input field.

If step="3", the legal number is -3,0,3,6, etc.

Tip: The step attribute can be combined with the max and min attributes to create an area value.

Note: The step attribute is used with the following types: number, range, date, datetime, datetime-local, month, time and week.

OperaSafariChromeFirefoxInternet Explorer

Example

The input step is specified as 3:

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

 Try It! 


HTML5 <input> Tags

TagDescription
<form>Define a form
<input>Define an input field