html5中form的新特性

学习 Dive Into HTML5 的 A Form of Madness 一章的笔记。

html5中form的新特性可分新类型和新属性两部分。


* 新类型

html5中，<input>有了更多更语义的type。现在就可以用它们，浏览器如果不支持这些type，会以type="text"显示，而不必担心出现乱七八糟的东西。

1.email
<input type="email">
桌面浏览器上看不出它与text有什么区别，但在一些没有实体键盘的移动设备（如iPhone）上，键入email时会出现针对email（@.）优化过的键盘。可以放心的在需要输入email的地方用type="email"，最坏不过仍是文本框。

2.url
<input type="url">
同上。

3.搜索框
<input type="search">
mac上的safari对其有定制，使之像itunes或其他apple软件的搜索框，或是apple网站上那样。可以放心用。

以下几种目前支持都不好（或是还没支持），需要一定fallback策略。

4.数字
<input type="number"
min="0"
max="10"
step="2"
value="6">
<input type="range"
min="0"
max="10"
step="2"
value="6">
所有属性都是可选的。
fallback：
<script>
if (!Modernizr.inputtypes.number) {
// no native support for type=number fields
// maybe try Dojo or some other JavaScript framework
}
</script>

4.时间与日期
type="date"，type="month"，type="week"，type="time"，type="datetime"，type="datetime-local"。
fallback：
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No native date picker support
// Use Dojo/jQueryUI/YUI/Closure to create one,
// then dynamically replace that <input> element.
}
</script>

5.取色器
<input type="color">


* 新属性

1. placeholder
占位文本，如firefox右上角搜索框没焦点时显示的文字。只支持纯文本。
<input name="q" placeholder="Search Bookmarks and History" />

2.autofocus
使指定input在网页加载后（其实不应是加载后，而应是尽快）自动获得焦点。
<input name="q" autofocus/>
目前支持不好，需要fallback。不应在用户在浏览一个慢网页或在这个慢网页写帖子写了两分钟时焦点突然跳走，所以要检查的js紧跟着此input。
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
但如果编码规范或是别的什么不容许在html里加js，要记住绝不应该把判断放在window.onload中。
<script>
$(document).ready( function() {
if (!("autofocus" in document.createElement("input"))) {
$("#q").focus();
}
});
</script>

3.novalidate
新版本的浏览器会在提交时对email、number等语义input作验证，有的会显示验证失败信息（ff，opera），有的则不提示失败信息只是不提交（chrome，safari），若不想用html5的验证，可在form标签加novalidate。
<form novalidate>

4.required
必填项。
<input id="q" required>