HTML 5 Form Attributes

HTML5 new 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 autocomplete 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.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p>Fill out and submit the form, and then refresh the page to see how to auto-fill the content.</p>
<p>Note that the autocomplete attribute of the form is "on", but the e-mail is automatically "off".</p>

</body>
</html>

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

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p><strong>note:</strong>The novalidate attribute is not supported in Safari and Internet Explorer 9 and earlier versions.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the autofocus attribute of the input tag.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p> "Last name" The field is not in the form, but it is also part of the form.</p>

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

<p><b>note:</b> IE does not support the form attribute</p>

</body>
</html>

<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”.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<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>
<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the formaction attribute of the input tag.</p>

</body>
</html>

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

Main: This attribute is used in conjunction with type=”submit” and type=”image”.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the formenctype attribute of the input tag.</p>

</body>
</html>

<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”.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the formmethod attribute of the input tag.</p>

</body>
</html>

<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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="submit"><br>
  <input type="submit" formnovalidate="formnovalidate" value="Submit without verification">
</form>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE, or Safari do not support the formnovalidate attribute of the input tag.</p>

</body>
</html>

<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”.

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<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 normally">
  <input type="submit" formtarget="_blank" value="Submit to a new page">
</form>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the formtarget attribute of the input tag.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>


</body>
</html>

<input> list attribute

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>note:</strong> Internet Explorer 9 (earlier IE version), Safari does not support datalist tags.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">

 Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>

 Enter the date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>

  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5"><br>

  <input type="submit">
</form>

<p><strong>note:</strong> In Internet Explorer 9 and earlier versions of IE, Firefox does not support the max and min attributes of the input tag.</p>
<p><strong>note:</strong>
The max and min attributes in Internet Explorer 10 do not support date and time input, and IE 10 does not support these input types.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Select Image: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>Try to select one or more pictures.</p>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the multiple attribute of the input tag.</p>

</body>
</html>

<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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

<p><strong>note:</strong>  Internet Explorer 9 and earlier versions of IE, or Safari do not support the pattern attribute of the input tag.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE do not support the placeholder attribute of the input tag.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE, or Safari do not support the required attribute of the input tag.</p>

</body>
</html>

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

<p><strong>note:</strong> Internet Explorer 9 and earlier versions of IE, or Firefox do not support the step attribute of the input tag.</p>

</body>
</html>

HTML5 <input> tag

Label Description
<form>

Define a form

<input>

Define an input field