HTML 5 基础教程

• 新的 form 属性：
  • autocomplete
  • novalidate
• 新的 input 属性：
  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height 和 width
  • list
  • min, max 和 step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

• autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
• 在某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。
• autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

<form action="/static/example/html5/form.php" method="get" autocomplete="on">
    姓:<input type="text" name="fname" autocomplete="on" /><br />
    名: <input type="text" name="lname" autocomplete="on" /><br />
    电子邮件: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
</form>

• autofocus 属性适用于所有 <input> 标签的类型。
• autofocus 属性存在浏览器兼容，需要根据实际浏览器进行测试使用

<form action="/static/example/html5/form.php" method="get">
    用户名称: <input type="text" name="user_name" autofocus="autofocus" />
    <input type="submit" />
</form>

• form 属性适用于所有 <input> 标签的类型。
• form 属性必须引用所属表单的 id。
• 如需引用一个以上的表单，请使用空格分隔的列表。

<form action="/static/example/html5/form.php" method="get" id="user_form">
    姓：<input type="text" name="fname" />
    <input type="submit" />
</form>
<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
名： <input type="text" name="lname" form="user_form" />

• formaction - 重写表单的 action 属性
• formenctype - 重写表单的 enctype 属性
• formmethod - 重写表单的 method 属性
• formnovalidate - 重写表单的 novalidate 属性
• formtarget - 重写表单的 target 属性

• 表单重写属性适用于以下类型的 <input> 标签：submit 和 image。
• 这些属性对于创建不同的提交按钮很有帮助。
• 这些属性存在浏览器兼容问题，使用前请注意测试。

<form action="/static/example/html5/form.php" method="get" id="user_form">
    电子邮件：<input type="email" name="user_email" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formaction="/static/example/form.php" value="使用formaction重写接口提交" /><br />
    <input type="submit" formnovalidate="true" value="使用formnovalidate重写验证提交" /><br />
    <input type="submit" formmethod="post" value="使用formmethod重写提交方式提交" /><br />
</form>

• height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。这里的 height 和 width 属性针对的是 输入组件 input，正常情况下大部分的HTML标签都有这两个属性，但是它们不适用于 input组件；也就是在HTML5之前这两个属性对 input无效。
• height 和 width 属性只适用于 image 类型的 <input> 标签。
• 我们通常会同时指定图像的高度和宽度属性，有利于浏览器的存储优化和好的浏览器页面布局兼容。如果图像设置了高度和宽度，图像所需的空间在浏览器加载页面时会被保留。如果没有宽高属性， 浏览器不知道图像的大小，并不能预留适当的空间。尽管图片已加载，图片在加载过程中也会使页面布局效果改变 。

<form action="/static/example/html5/form.php" method="get">
    用户名：<input type="text" name="user_name" /><br />
    <input type="image" src="/static/example/img/btn.png" width="99" height="99" />
</form>

• list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
• list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。
• Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。

<form action="/static/example/html5/form.php" method="get">
    网站URL地址: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="W3capi" value="http://www.w3capi.com" />
        <option label="Google" value="http://www.google.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit"  />
</form>

• min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
• max 属性规定输入域所允许的最大值。
• min 属性规定输入域所允许的最小值。
• step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
• min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
• Internet Explorer 9及更早 IE 版本，Firefox 不支持 input 标签的 max 和 min 属性。
• 在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间，IE 10 不支持这些输入类型。

1. 显示一个数字域，该输入域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）
2. 控制用户只能 输入 1980-01-01 之前的日期
3. 控制用户只能 输入 2000-01-01 之后的日期
4. 控制用户只能输入在1和5之间的数字

<form action="/static/example/html5/form.php" method="get">
    输入0-10之间3的倍数：<input type="number" name="num" min="0" max="10" step="3"/><br/>
    输入 1980-01-01 之前的日期：<input type="date" name="date1" max="1979-12-31"><br>
    输入 2000-01-01 之后的日期：<input type="date" name="date2" min="2000-01-02"><br>
    数量 (在1和5之间)：<input type="number" name="quantity" min="1" max="5"><br>
    <input type="submit" />
</form>

• multiple 属性规定输入域中可选择多个值。
• multiple 属性适用于以下类型的 <input> 标签：email 和 file。
• Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。

<form action="/static/example/html5/form.php" method="get">
   请选择文件：<input type="file" name="imgs" multiple="multiple" />
   请输入电子邮件：<input type="email" name="emails" multiple="multiple" />
    <input type="submit" />
</form>

<p>当您浏览文件时，请试着选择多个文件。</p>

• novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
• novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
• 在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。

<form action="/static/example/html5/form.php" method="get" novalidate="novalidate">
    电子邮件：<input type="email" name="user_email" />
    <input type="submit" />
</form>

<p>当我们使用novalidate属性后，浏览器在提交数据时不会对电子邮件地址进行合法验证</p>

• pattern 属性规定用于验证 input 域的模式（pattern）。
• 模式（pattern） 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
• pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
• Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 pattern 属性。

<form action="/static/example/html5/form.php" method="get">
    国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"  title="三个字母的国家代码" />
    <input type="submit" />
</form>

• placeholder 属性提供一种提示（hint），描述输入域所期待的值。
• placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
• 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失。
• Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。

<form action="/static/example/html5/form.php" method="get">
    <input type="search" name="user_search" placeholder="输入内容在W3CAPI中搜索" />
    <input type="submit" />
</form>

• required 属性规定必须在提交之前填写输入域（不能为空）。
• required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
• Internet Explorer 9及更早 IE 版本，或 Safari 不支持 input 标签的 required 属性。

<form action="/static/example/html5/form.php" method="get">
    用户名称：<input type="text" name="user_name" required="required" />
    <input type="submit" />
</form>

<p>点击提交按钮，浏览器会提示用户名称必须填写。</p>