您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
html5中智能表单的使用
发布时间：2015-05-20 07:20:30编辑：雪饮阅读（）
HTML4中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。 html5中智能表单确实添加了不少的新的属性，给我们省去了好大的功夫去判断。
静态页面源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="php.php" method="post" id="html5form"></form>
<!--html5中可以不用使用表单的开始与结束标签包含，只需要将表单元素在html5中的新增元素属性form的值指定为表单的id名称即可-->
<input type="text" form="html5form" value="雪饮个人博客1" id="xy1" name="xy1">
<input type="text" form="html5form" value="雪饮个人博客2" id="xy2" name="xy2">
<input type="submit" value="提交" form="html5form" />
<hr/>
邮箱：<input type="email" form="html5form" required />
<!--html5中新增的邮箱类型表单元素默认几次着邮箱的验证正则，只要你指定有要提交的表单，那么只要提交该表单自动检查该元素是否是符合邮箱地址规范
required属性可以强制用户必须输入该字段
-->
带协议的网址：<input type="url" form="html5form" autofocus />
<!--和上面的邮箱类型表单元素一样，这个集成了带协议的网址验证正则
autofocus="autofocus"属性可以使得当前表单元素拥有自动聚焦功能（当你鼠标聚焦在地址栏时可以通过直接回车就聚焦到了当前表单元素）-->
日期：<input type="date" form="html5form" />
<!--date类型表单元素可以产生一个日期选择器-->
时间：<input type="time" form="html5form" />
<!--time类型表单元素可以产生一个时间选择器-->
月份:<input type="month" form="html5form" />
<!--月份选择器，一次只能选择一个月，外观和日期选择器一样-->
星期：<input type="week" form="html5form" />
<!--仅能够选择星期-->
整型数字：<input type="number" form="html5form" />
<!--该类型表单元素约束用户只能够输入整型数字类型的值方能有效，自动集成了对数字的正则验证-->
滑动条:<input type="range" form="html5form" step="2" max="7"/>
<!--滑动条的step属性规定了值的规范，例如这里的max值为7，而step值为2（规范值必须为2的倍数），那么当拉动滑块时，无法达到7。5,3也会被跳过，不信你可以试试，滑块只滑动了4次（即符合规范的4个值）-->
搜索：<input type="search" placeholder="雪饮个人博客" results="n" form="html5form"/>
<!--search表单类型和普通的text表单类型没有什么区别主要是其results属性值为n时拥有一个默认的小搜索按钮与表单元素内
placeholder属性可以使得表单元素拥有默认值该默认值不同于之前html4中的value，该默认值不会被提交
-->
颜色:<input type="color" form="html5form" />
<!--color类型表单元素将会自动产生一个颜色选择器-->
正则:<input type="text" pattern="\d{3}" form="html5form" />
<!--pattern属性值为一个正则模式，规定了该表单元素里面的值必须符合该正则模式，否则不予提交，当前正则的意思是，表单元素值必须是3个数字-->
自动填充表单:<input type="text" name="auto" value="" list="boke" />
<datalist id="boke">
<option>个人博客</option>
<option>雪饮个人博客</option>
<option>高久攀个人博客</option>
</datalist>
<!--当某个表单元素的name属性为auto时可以拥有一个自动填充表单，需要给当前表单元素的list属性绑定一个id（该id为自动填充表单的列表项目的id），然后建立一个自动填充表单的列表项目datalist（双标签），在该标签里面嵌套option标签，每一个option标签都是一个列表项。此时当你鼠标进入该表单元素时就会自动和百度搜索中的关键字提示列表一样-->
<hr/>
输出表单：
<form action="" method="post" oninput="result.value=parseInt(no1.value)*parseInt(no2.value)" >
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
<!--输出表单需要给表单form一个oninput属性值以一个字符串的形式的计算公式，如其form中的两个input的值进行相乘，然后结果会在output标签中输出（公式中可以将结果赋值给output，以其name名称.value的形式接收计算结果，此表单的计算主要适合整型数据的运算，所以公式中先将被进行参与运算的两个表单元素的value值进行了强制转换为整型之后才进行相乘的运算）-->
</body>
</html>
关键字词：html5,智能表单,个人博客
上一篇：canvas标签介绍