HTML5表单新增元素与属性知识点总结

摘要: 在开发文本程序的过程中，表单是页面上非常重要的一块内容，用户可以输入的大部分内容都在表单当中。在html5中大大的增加的了表单的这一部分的功能。

一.表单新增的属性

1.form 2.formaction 3.formmethod 4.placeholder 5.autofocus 6.list 7.autocomplate

1.form属性，方便对其设置样式，目前是有oPera 10支持这一属性
<form id='testform'>
<input type='text' />
</form>
<textarea form='testform'></textarea>

2.formaction属性，可以使每一个标签元素都有一个提交的入口地址。
<form action='s3.jsp'>
<input type='text' formaction='s1.jsp' />
<input type='submit' formaction='s2.jsp' />
<input type='password' />
</form>

3.formmethod属性，可以给每个标签设置不同的提交方式。
<form method='get'>
<input type='text' formmethod='get' />
<input type='submit' formmethod='post' />
<input type='password' />
</form>

4.placeholder属性,文本框的提示文字，Safari4,chrome3,firefox4支持该属性
<input type='text'placeholder='click me ba !' />

5.autofocus属性，画面打开自动获取焦点。建议一个页面最好只有一个，Safari4,chrome3,firefox4
<input type='text'autofocus />

6.list属性，一般list和datalist是搭配使用,目前只有Opera10支持该属性
内容:<input type='text' list='sel'/>
<datalist style="display:none">
<option>安徽</option>
<option>江苏</option>
<option>上海</option>
<option>北京</option>
</datalist>

7.autoaomplate属性，自动完成功能。这个用的少，只有Opera10支持该属性

二、input元素的种类增加及改良

1.url类型，指定输入框为url地址，否则不给提交

[code=plain]<input type='url' value='www.baidu.com'/>
<input type='submit' />

2.email类型，指定输入框为email，否则不给提交

[code=plain]<input type='email' value='15062736226@163.com' />
<input type='submit' />

3.date类型，日期组件,在Opear10中有用

[code=plain]<input type='date' value='2016-05-15' />

4.time类型，专门用来输入时间的，提交时还可以检查是否输入了有效的时间,在Opear10中有用

[code=plain]<input type='time' value='10:22' />

5.datetime类型，输入日期和时间

[code=plain]<input type='datetime' value='2016-05-15 10:22' />

6.datetime-local类型，专门用来输入本地日期和时间的文本框，提交时可以自检。

[code=plain]<input type='datetime-local' />

7.month类型，输入月份的文本框

8.week类型，输入周号的文本框

9.number类型，专门用来用来输入数字的文本框

10..range专门用来输入某一值范围的

11.serarch类型专门用来输入关键词的，在一些浏览器当中和text的样式是差不多的。

12.color颜色选择器，现在只有blackbrry支持

13.tel类型专门用来输入电话号码的，没有校验规。但乐意通过patte模式进行验证

三.自动验证的相关属性

1.required属性要求输入框必须有内容（除了隐藏元素，图片元素按钮上）
2.pattern属性写上正则表达式来验证
3.min属性与max属性（验证输入的数值与日期的范围，Opera10支持）
4.step属性（Opera10支持）

[code=plain]<form>
<input type='text' required/>
<input type='tel' pattern='1[0-9]{10}'/>
<input type='submit'>

四..显示的验证：form元素和input元素都具有一个checkValidity方法

[code=plain]<form id='form' onsubmit="checkForm();">
<input type='text' id='emi'/>
<input type='submit' />
</form>
</form>

[code=plain]var oEmi = document.getElementById('emi');
function checkForm(){
if(oEmi.value==''){
alert('请填写email地址');
return false;
}
else if(!oEmi.checkValidity()){
alert('请填写有效的email地址');
}
else{
alert('恭喜您输入的地址有效！');
}
};