HTML5 form properties

HTML5's <form> and <input> tags add several new attributes.

<form>New attributes:

autocomplete
novalidate

<input> New attribute:

autocomplete
autofocus
form
##formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)

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

When the user starts typing in an autocomplete field, the browser should display the filled-in options in that field.

Tips:

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

Note:

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为  "on"（开），但是e-mail自动为“off”（关）。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Tips:

In some browsers, you may need to enable the autocomplete function for this attribute to take effect.

<form> novalidate attribute

A boolean attribute of the novalidate attribute.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

<input> autofocus attribute

The autofocus attribute is a boolean attribute.

The autofocus attribute specifies that the field automatically gains focus when the page is loaded.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

<input> form attribute

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

Tip:

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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" 字段没有在form表单之内，但它也是form表单的一部分。</p>

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

<p><b>注意:</b> IE不支持form属性</p>

</body>
</html>

Run instance»
Click the "Run instance" button to view the online instance

<input> formaction attribute

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

The formaction attribute will override the action attribute in the <form> element.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="提交"><br>
  <input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。</p>

</body>
</html>

Run instance»

Click "Run" Example" button to view online examples

##<input> formenctype attribute

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

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

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formenctype 属性。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

<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 with type="submit" and type="image".

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

<input> formnovalidate attribute

The novalidate attribute is a boolean attribute.

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

The formnovalidate attribute will override the novalidate attribute of the <form> element.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本,或Safari不支持input标签的 formnovalidate 属性。</p>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

# #<input> formtarget attribute

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

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

Note:

The formtarget attribute is used with type="submit" and type="image".

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formtarget 属性。</p>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

##<input> height and width attributes

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

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

Tip:Images usually specify both height and width attributes. If the image sets height and width, the space required by the image Will be retained when loading the page. Without these properties, The browser does not know the size of the image and cannot reserve it Proper space. The image will change the page layout effect during the loading process (Though the image is loaded).

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

Run Instance»Click the "Run Instance" button to view the online instance

<input> list attribute

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

<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 apply to the following types of <input> tags: date pickers, number, and range.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

 输入 1980-01-01 之前的日期:
  <input type="date" name="bday" max="1979-12-31"><br>

 输入 2000-01-01 之后的日期:
  <input type="date" name="bday" min="2000-01-02"><br>

  数量 (在1和5之间):
  <input type="number" name="quantity" min="1" max="5"><br>

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

<p><strong>注意:</strong> Internet Explorer 9及更早IE版本，Firefox不支持input标签的  max 和 min 属性。</p>
<p><strong>注意:</strong>
在Internet Explorer 10中max 和 min属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

<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. : email, and file.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>尝试选取一张或者多种图片。</p>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本不支持input标签的 multiple 属性。</p>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

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

Tips : is used for the global title attribute to describe the pattern.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意:</strong>  Internet Explorer 9及更早IE版本，或Safari不支持input标签的 pattern 属性。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

<input> placeholder attribute

The placeholder attribute provides a hint describing the value expected by the input field.

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

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 placeholder 属性。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Safari不支持input标签的 required 属性。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

<input> step attribute

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

If step="3", the legal numbers are -3,0,3,6, etc.

Tips: The step attribute can be used with The max and min attributes create a range value.

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Firefox不支持input标签的 step 属性。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance