HTML5 form attributes

HTML5 New Form Attributes

HTML5 added several new attributes to the <form> and <input> tags.

New attributes of <form>:

• autocomplete
• novalidate

New attributes of <input>:

• 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 a form or input field should have auto-complete functionality.

When the user starts to input in an auto-complete field, the browser should display the filled options in that field.

Note:The autocomplete attribute may be enabled in a form element and disabled in an input element.

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

Instance

Autocomplete is enabled in a form field, but disabled in an input field:

<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 out »

Note:In some browsers, you may need to enable the auto-complete feature to make this attribute work.

<form> novalidate Attribute

The novalidate attribute is a boolean (true or false) attribute.

The novalidate attribute is a boolean attribute of the HTML form element used to set the browser not to validate the form.

When the novalidate attribute is added to the <form> element, the browser will not execute the default form validation and will not check if the input fields comply with the specified validation rules.

The novalidate attribute allows developers to control the form validation logic completely, which can be customized using JavaScript or other means.

Instance

No validation for submitted form data:

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

Try it out »

<input> autofocus Attribute

The autofocus attribute is a boolean attribute.

The autofocus attribute specifies that the domain should automatically acquire focus when the page loads.

Instance

Make the "First name" input field automatically acquire focus when the page loads:

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

Try it out »

<input> form Attribute

The form attribute specifies one or more forms that an input field belongs to.

Note:Use a list of space-separated values to reference multiple forms.

Instance

An input field outside of a form references an HTML form (the input field still belongs to 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 out »

<input> formaction Attribute

The formaction attribute describes the URL address for submitting the form.

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

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

Instance

The HTML form contains two different submission buttons with different URLs:

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

Try it out »

<input> formenctype Attribute

The formenctype attribute describes the data encoding sent to the server when the form is submitted (only for form elements with method="post").

The formenctype attribute overrides the enctype attribute in the <form> element.

Main:This attribute is used with type="submit" and type="image".

Instance

The first submit button sends the form data in the default encoding, while 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 with Multipart/form-data"> </form>

Try it out »

<input> formmethod Attribute

The formmethod attribute defines the way the form is submitted.

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

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

Instance

Re-define 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 with POST"> </form>

Try it out »

<input> formnovalidate Attribute

The formnovalidate attribute is a boolean attribute.

The formnovalidate attribute specifies that the input element should not be validated when the form is submitted.

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

Note:The formnovalidate attribute is used withtype="submit"together.

Instance

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="No validation submit"> </form>

Try it out »

<input> formtarget Attribute

The formtarget attribute specifies a name or keyword to indicate where the submitted data should be displayed after the submission.

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

Note:The formtarget attribute is used withtype="submit"andtype="image"together.

Instance

Two submit buttons 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>

Try it out »

<input> height and width Attributes

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

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

Note:Images are typically specified with both height and width attributes. When images are set with height and width, the space they occupy during page loading is retained. Without these attributes, the browser does not know the image's size and cannot reserve appropriate space. During the loading of images, the layout effects on the page may change (even if the image has been loaded).

Instance

Defines an image submission button that uses the height and width attributes:

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

Try it out »

<input> list Attribute

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

Instance

Predefines input values in a <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 out »

<input> min and max Attributes

The min, max, and step attributes are used to define constraints (limits) 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.

Instance

Sets the minimum and maximum values for an <input> 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">

Try it out »

<input> multiple Attribute

The multiple attribute is a boolean attribute.

The multiple attribute defines that an <input> element can select multiple values.

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

Instance

Upload multiple files:

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

Try it out »

<input> pattern Attribute

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

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

Hint:This attribute is used to describe the pattern.titleNote:

You can learn about regular expressions in ourJavaScript tutorial.Example:

Instance

Try it out »

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

The <input> placeholder attribute

<input> placeholder Attribute

A short hint is displayed on the input field before the user inputs a value.

Note:

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

Instance

Try it out »

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

The <input> required attribute

<input> required Attribute

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

Note:

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

Instance

Try it out »

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

The <input> step attribute

<input> step Attribute

If step is "3", then legal numbers are -3, 0, 3, 6, etc.

Hint:

The step attribute can create a range value with max and min attributes.Note:

The step attribute is used with the following type of input: number, range, date, datetime, datetime-local, month, time, and week.Example:

Instance

Try it out »

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

HTML5 <input> tag

HTML5 <input> Tag