传统表单：http://www.prosetech.com/html5/Chapter%2004/ZooKeeperForm_Original.html

翻新表单：http://www.prosetech.com/html5/Chapter%2004/ZooKeeperForm_Revised.html

占位符显示文本

<input id="name" placeholder="Jane Smith" autofocus="" required="">

一般是浅灰色的文本，也叫水印，不支持此属性的浏览器会忽略它，比如IE，可以通过Javascript补丁来使得IE支持（http://tinyurl.com/polyfills）

autofous属性石自动获取焦点，一个表单中只能有一个元素具备这个属性。IE不支持，可以利用第一章中的Modernizr来检测

为了获取更好的用户体验，可以在文本框获得焦点的时候改变样式

input:focus {

1. background-color: lightyellow;

}

比如required属性在表单提交时会触发HTML5的验证，如果有元素为空则给出相应的提示

某些情况下需要关闭验证功能，只在服务器端处理，可以在form表单中添加novalidate属性  <form id="myForm" action="/do?action=test" novalidate></form>

验证样式挂钩：

required和optional（选填）
valid（有效）和invalid（无效）
in-range和out-of-range：根据空间的min和max属性判断是否超出范围
这些伪类的作用可以体现在突出显示验证的结果
input :required :invalid{
    background-color:lightyellow;
}

正则表达式

[A-Z]{3}-[0-9]{3}：表示必须是从A-Z的3个大写字母，一个短横线，从0-9的3个数字拼接而成的字符串
<input id="name" placeholder="XXX-023" title="3个大写字母-3个数字" pattern="[A-Z]{3}-[0-9]{3}">

自定义验证

使用javascript进行表单验证，可以调用setCustomValidity()方法，提供一条错误消息
function validateComments(input) {
   if (input.value.length < 20) {
     input.setCustomValidity("你需要评论更多内容！");
   }
   else {
     //如果没有错误就清楚错误提示
     input.setCustomValidity("");
   }
}

此外，可以调用现成的用于验证表单的javascript类库，比如webforms2（http://github.com/westonruter/webforms2）

几个特殊的输入属性
spellcheck检测用户输入的是否是单词，设为true表示进行拼写检查
autocomplete  自动完成功能
autocorrect  自动纠错功能，适用于移动设备
autocapitalize  自动大小写 ，适用于移动设备
multiple     <input>元素可以添加这个属性，包括用于上传文件的file类型和email类型，在支持的浏览器中可以多个文件一起上传

email    <input id="email" type="email" required><br>

url

search

Tel

number     <input id="age" type="number" min="0" max="120" step="0.1" required><br>

range   滑动条    <input id="weight" type="range" min="50" max="1000" value="160">

datetime

date

month

week\time

color

datalist

<datalist>可以在普通文本框中添加一个下拉建议列表

<form id="zooKeeperForm" action="#">

  <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>

  <fieldset>

    <legend>What's Your Favorite Animal?</legend>

    <datalist id="animalChoices">

    <span class="Label">Pick an option:</span>

      <select id="favoriteAnimalPreset">              <!--添加select元素在这里面是为了在不支持dalalist的浏览器中也能够正常显示，因为只有少部分浏览器支持这个元素-->

        <option label="Alpaca" value="alpaca">

        <option label="Zebra" value="zebra">

        <option label="Cat" value="cat">

        <option label="Caribou" value="caribou">

        <option label="Caterpillar" value="caterpillar">

        <option label="Anaconda" value="anaconda">

        <option label="Human" value="human">

        <option label="Elephant" value="elephant">

        <option label="Wildebeest" value="wildebeest">

        <option label="Pigeon" value="pigeon">

        <option label="Crab" value="crab">

      </select>

    <br>

    <span class="Label">Or type it in:</span>

    </datalist>

    <input list="animalChoices" id="favoriteAnimal">

  </fieldset>

  <p><input type="submit" value="Submit Application"></p>

</form>

progress 和meter 

 进度条和计量条。在不支持的浏览器下显示为后备内容，即元素中的文本内容

<progress max="100" value="50">50%</progress>

<meter min="5" max="100" high="70" value="79">79 pounds</meter>

可以使用contentEditable和designMode两个属将浏览器转变为简单的HTML编辑器

http://www.prosetech.com/html5/Chapter%2004/ElementEditing.html

http://www.prosetech.com/html5/Chapter%2004/PageEditing.html

contentEditable加到任意元素上都可以使得该元素的内容可以编辑。这个功能是可以向用户提供一种简单便捷的编辑HTML内容的方式。但如果需要富文本的话还是使用已经成熟的编辑器吧。（http://ajaxian.com/archives/richtexteditors-compared提供一些可选择的富文本编辑器，学习元用的就是CKEditor）

designMode属性可以让用户编辑整个页面，把要编辑的文档放到一个iframe元素中，然后在父页面就可以控制编辑过程了。