HTML5--新增input类型、表单属性和元素

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

 一、新增<input>类型

并不是所有浏览器都支持新增的input类型，但若是不被支持仍可以显示为常规的文本域。

• color --- 选取颜色
• date --- 选择日期(年/月/日)
• datetime --- 选择日期和时间(本地时间)
• datetime-local --- 选择日期和时间(无时区限制)
• email --- 邮箱地址，提交时会自动验证值是否合法有效
• month --- 选择月份
• number --- 定义一个数值输入域，有如下属性对区域进行限定：
  • max --- 最大值
  • min --- 最小值
  • step --- 数字间隔
  • value --- 默认值
• range --- 一定范围内数字值的输入域，表现为滑动条，限定属性如number
• search --- 搜索条
• tel --- 电话号码
• time --- 选择时间(无时区)
• url --- 包含 URL 地址的输入域，提交时会自动验证值
• week --- 选择周和年(第--周 年)

二、表单元素

1  <datalist>元素

规定输入域的选项列表，当用户在自动完成域中开始输入时，将显示可填内容的选项列表。

以下代码段中，当input被选中后会自动提供datalist中的可选列表。

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

 在使用过程中，我们使用<input>的list属性来绑定<datalist>。

2  <keygen>元素

首先，该元素已经从web标准中删除了。

提供验证用户的可靠方法。<keygen>会规定用于表单的密钥对生成器字段，当提交表单时，会自动生成两个键--私钥和公钥，私钥存储于客户端，公钥将发送至服务器，用于验证用户的客户端证书。

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

3 <output>元素

用于不同类型的输入，如计算或者脚本输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

 该元素包含以下属性：

三、表单属性

1 <form>

1.1 novalidate

规定在提交表单时不验证form或input域(布尔类型)。

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

2 <input>

2.1 autofocus

在页面加载时，自动获得焦点(布尔类型)。

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

2.2 form

 使处于form外的<input>仍属于某个表单的一部分。

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

2.3 formaction 

描述表单提交的url地址，会覆盖<form>的action属性，仅用于submit和image类型。

<form action="b">
 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="a"
  value="Submit as admin">
</form>

2.4 formenctype 

描述表单提交到服务器的数据编码（仅作用域method="post"的表单），会覆盖<form>的enctype属性，仅适用于submit和image类型。

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

 2.5 formmethod

定义表单的提交方式，会覆盖<form>的method属性，和submit以及image类型配合使用。

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

 2.6 formnovalidate

描述提交时无需验证，会覆盖<form>的novalidate属性，与submit类型一起使用。

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

2.7 formtarget

指定一个名称或一个关键字来指明表单提交数据接收后的展示方式，会覆盖<form>的target属性，与submit、image类型配合使用。

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

同样有四个属性：

• _blank --- 在新窗口打开
• _parent --- 在父窗口打开
• _self --- 默认，在当前窗口打开
• _top  --- 顶端打开窗口

2.8 width和height

宽高，仅适用于image类型。

2.9 list

规定input绑定的datalist，详见表单元素。

2.10 min和max

对包含数字或日期的input类型进行约束，如date pickers、number和range。

2.11 multiple

规定input是否可选多个值，为true时可多选，适用于email和file。

<input type="file" name="img" multiple>

2.12 pattern

描述用于验证input值的正则表达式，适用于test、search、url、email和password。

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

2.13 placeholder

 描述input期待的值，也就是提示，适用于text、search、url、telephone、email和password。

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

2.14 require

规定提交前必须填写的input域。

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

2.15 step

为input域规定合法的数字间隙。

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

3 共有的

3.1 autocomplete

自动完成，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

注意：在form中autocomplete开启但该form内的input的autocomplete属性可能是关闭的

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

表单属性有点多，我的排版可能会不太好看，详见HTML5 表单属性_w3cschool