h5表单新增元素与属性control、placeholder、list、AutoComplete、pattern、SelectionDirection、indeterminate、

标签的control属性

h5中可在标签内放置一个表单元素，并且通过该标签的control属性来访问该表单元素。

<form>
<label id="label">
学生在号码
<input id="txt_zip" maxlength="9">
<small>请输入9位数字</small>
</label>
<input type="button" value="请输入默认值" onclick="setValue()" />
</form>
<script>
function setValue() {
var label = document.getElementById("label");
var textbox = label.control;
textbox.value = "010101234";
}
</script>

文本框的placeholder属性

该属性是指当文本框处于未输入状态时显示的输入提示。当文本框未输入且未获光标焦点，模糊显示输入提示文字。

<input type="text" placeholder="登录账号" />

文本框的list属性

h5中为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是h5新增元素，该元素类似选择框，但当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

<input type="text" name="in" list="greetings" />
<datalist id="greetings" style="display: none;">
<option value="瓜子">瓜子</option>
<option value="水晶">水晶</option>
</datalist>

文本框的AutoComplete属性

帮助输入所用的自动完成功能。h5之前，都可看见输入值，之后使用该属性，安全性方面得到很好的保障。不填写和on一致，off和它们相反

文本框的pattern属性

h5中对input使用该元素并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定的格式时，则不允许提交，同事在浏览器中显示信息提示文字，提示输入内容必须符合给定格式。

<form action="MM.html">
请输入
<input pattern="[A-Z]{3}" name="part" />
<input type="submit" value="提交" />
</form>

文本框的SelectionDirection属性

对input、textarea元素，h5中增加了SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方形。当用户正向选取文字时，改属性值为“forward”，当用户反向选取文字时，该属性值为“backward”。当用户没有选取任何文字时，该属性值为“forward”

<form>
<input type="text" name="text" />
<input type="button" value="点击" onclick="heh()" />
</form>
<script>
function heh() {
var con = document.forms[0]['text'];
var dir = con.selectionDirection;
alert(dir);
}

复选框的indeterminate属性

h5中，可在js脚本中对checkbox元素使用indeterminate属性，易硕明复选框处于“尚未明确是否选取”状态（即第三种状态不明状态），而不是选取或者非选取两种状态。

<input type="checkbox" indeterminate id="check" />请选择
<script>
var c = document.getElementById("check")
c.indeterminate = true;
</script>

image提交按钮的height、width属性

针对image的input元素，h5新增了height、width属性用来指定图片按钮的高度和宽度

<form action="canvas.html" method="post">
姓名:<input type="text" name="name" />
<input type="image" src="img/oneself.jpg" alt="编辑" width="50" height="50" />
</form>
</body>