HTML5表单属性

1.<form> <input> autocomplete属性
form或input应该有用自动完成的功能。当用户在自动完成域开始输入时，浏览器应该在该域中显示填写的选项。
点击刷新后的效果图

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

2.form的novaildate属性
novaildate属性是一个boolean属性。该属性规定在提交表单时不应该验证form或input域。
代码不进行验证，邮箱的格式不正确，也可以输入。

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

3.input autofocus属性
autofocus属性是一个boolean属性。规定在页面加载时，域自动获得焦点。
页面打开之后，光标自动定位在last name

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname" ><br>
  Last name: <input type="text" name="lname" autofocus><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

4.input的form属性
规定输入域所属的一个或多个表单

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

5.input formaction属性
用于描述表单提交的url地址。该属性会覆盖form元素中的action属性。

<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 admin">//提交到不同页面的按钮
</form>

6.input的formenctype属性
用于表单提交到服务器的数据编码（只对form表单中method=”post”表单），该属性会覆盖form元素的enctype属性。

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

7 input formmethod属性，定义了表单的提交方式，覆盖了form元素的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>

8 input formnovalidate属性
input元素在表单提交时不需要验证

<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 validation">//不需要验证方式的提交
</form>

9.input formtarget属性
指定一个名称或一个关键字来指明表单提交数据接收后的展示

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

10.input height和width
height 和 width 属性规定用于 image 类型的<input>标签的图像高度和宽度。 height 和 width 属性只适用于 image 类型的<input> 标签。

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

11.input的list属性
list属性规定输入域的datalist。datalist是输出域的选项列表。

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

12.input的min和max属性
min，max和step属性为包含数字或日期的input类型规定约束。

<input type="number" name="quantity" min="1" max="5">

13.input的multiple属性
该属性规定input元素中可选择多个值。
multiple属性适用于以下类型的标签：email和file。

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

14.input的pattern属性
该属性描述了一个正则表达式用于验证input元素的值。适用于以下类型的input标签：text,search,url,tel,email,password.

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

15 input的placeholder属性
placeholder属性提供一种提示，描述输入域所期待的值。输入框中默认的输入内容。

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

16 input的required属性
该属性是一个boolean属性，required属性规定必须在提交之前填写输入域（不能为空）

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

17 step属性
step属性为输入域规定合法的数字间隔。