html5的一些表单属性

IE8及以下不能很好支持这些属性

<pre>
input属性：
placeholder:输入框的默认值，向用户显示描述性说明文字或者提示信息

autocomplete：值为on和off。。on则代表当该字段填写并提交后再返回该页，再输入时会显示以前输入的。off则是关闭，包含用户输入数据的安全。默认为on
autofocus：页面载入时设置某个input自动获取焦点，注意该页面只能设置一个input的这个属性，设置多个相当于没有设置。
list特性和datalist：通过list为某个输入框增加下拉列表。。相当于js实现的“自动完成”功能，但是不能进行模糊查询
如果datalist内有2项值："a34343"和"并24234",用户希望的是输入了3后这2个值都出现，但实际上一个也不出现。
它要求是完全匹配，比如输入a，则下拉a34343出现，接着输入4，那么这个下拉值也就没有了。

required：表单提交前该元素必须填写，即不能为空。不建议使用，因为提示信息‘请填写此字段’，除非有属性可以代替该提示信息。
pattern：给input标签内写正则的地方。。type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。。
不建议给type为email或url的元素使用，因为提示信息固定,正则固定。。还不如js直接重写。

一些输入设置：
rangeUnderflow 限制数值控件的最小值 设置min， input type="number" min="0" value="20"
rangeOverflow 限制数值控件的最大值 设置max，input type="number" max="100" value="20"
stepMismatch 确保输入值符合min,max,step的设置 设置max min step， input type="number" min="0" max="100" step="10" value="20"
</pre>

<input type="number" min="0" value="0">

<input type="number" max="100" value="20">

<input type="number" min="0" max="100" step="10" value="20">

<hr />
List特性和datalist:<br/>
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<hr />
<form action="http://www.baidu.com" method="get" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option>
<option value="1980">1980</option>
<option value="1990">1990</option>
</select>
<input type="submit" value="注册" form="register"/>

<hr />
正则：<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>

邮箱：<input type="email" name="youxinag" value="" placeholder="这是默认值" autofocus="autofocus" form="register" required="required" /><br />
地址：<input type="url" name="url" form="register" form="register"/>
DATE:<input type="date" name="riqi" value="" form="register"/><br />
TIME:<input type="time" name="shijian" value=""/>
MONTH:<input type="month" name="yue" value="" />
周：<input type="week" name="zhou" value="" />
数字：<input type="number" name="suzhi" value="" form="register" /><br />
滑动条<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
颜色：<input type="color" name="huadong" form="register"/><br />
<input type="file" id="a33" />

<hr />
自动填充表单<br/>
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>
<hr />

输出表单output
<form action="" method="post" id="output" oninput="result.value=parseInt(no1.value*no2.value)" >
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result" ></output>
</form>
<hr />

<h3>number特性</h3>
<div id="info" style="width:350px;"></div>

<input type="number" min="0" value="0">

<input type="number" max="100" value="20">

<input type="number" min="0" max="100" step="10" value="20">

<hr />
<h3>List特性和datalist:</h3>
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<h3>datalist</h3>
<form>
<input id="myCar" list="car">
<datalist id="car">
<option value="BMW"></option>
<option value="Ford"></option>
<option value="Volvo"></option>
</datalist>
</form>
<hr />

<h3>表单</h3>
<form action="http://www.baidu.com" method="get" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option>
<option value="1980">1980</option>
<option value="1990">1990</option>
</select>
<input type="submit" value="注册" form="register"/>

正则：<input type="text" name="tt" pattern="\d{3}" value="" form="register"/>

邮箱：<input type="email" name="youxinag" value="" placeholder="这是默认值" autofocus="autofocus" form="register" required="required" /><br />
地址：<input type="url" name="url" form="register" form="register"/>
DATE:<input type="date" name="riqi" value="" form="register"/><br />
TIME:<input type="time" name="shijian" value=""/>
MONTH:<input type="month" name="yue" value="" />
周：<input type="week" name="zhou" value="" />
数字：<input type="number" name="suzhi" value="" form="register" /><br />
滑动条<input type="range" name="suzhi" value="" form="register" max="10" step="2"/>
搜索 :<input type="search" name="huadong" value="" form="register" results="n"/>
颜色：<input type="color" name="huadong" form="register"/><br />
<input type="file" id="a33" />

<hr />
<h3>自动填充表单</h3>
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>
<hr />

<h3>output</h3>
<form action="" method="post" id="output" oninput="result.value=parseInt(no1.value*no2.value)" >
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result" ></output>
</form>
<hr />

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

<h3>progress</h3>
<progress max="100" value="85">
<span>85</span>%
</progress>
<hr />

<h3>time</h3>
发布日期：<time datetime="2015-7-29T15:50">15:50</time>
更新日期：<time datetime="2015-7-29:16:00" pubdate>16:00</time>
<hr />

<h3>ruby</h3>
<ruby>
漢
<rt>这里是注释</rt>
<rp>汉（这里是不支持时显示）</rp>
</ruby>
<hr />

<h3>wbr软换行</h3>
<p>如果想学习 AJAX, 那么必须熟悉 XML<wbr></wbr>HttpRequest 对象。</p>
<hr />

<h3>canvas</h3>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
canvas.style.width = "200px";
canvas.style.height = "200px";
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 100);
</script>
<hr />

<h3>conmmand</h3>
<menu>
<conmmand onclick="alert('Hello World!')"></conmmand>
Click Me!
</menu>
<hr />

<h3>details</h3>
<details open>
<summary>MacBook Pro Specification</summary>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</details>
<hr />

<h3>keygen</h3>
<form action="www.baidu.com" method="get">
Username:
<label>
<input type="text" />
</label>
<keygen name="security">
<input type="submit">
</form>

<h3>menu</h3>
<menu type="toobar">
<li type="checkbox">Red</li>
<li type="checkbox">Blue</li>
</menu>