html5的智能表单技术

widuu 2012-12-19 前台技术 4,944 0 喜欢 (0)

大家都知道一般表单就是传输给后台,后台接收的东西,有的我们需要验证,就要用到正则之类的程序判断,有的时候我们一个
页面可能会有很多表单,分布在不同的位置上,有时候一个大form不行,有好多一块传输过去了,现在html5为我们简化了很多
并且可用性大大的提高了
一段代码
[html]
<!dpctype html>
<html>
<head></head>
<body>
<form action="" post="" id="register"></form>
<input type="email" required="required" form="register">
</body>
</html>
[/html]
简单的实例给大家介绍一下,能看到更多的不同,其实表单是很简单的东西,其实就是现在新增的东西,我给大家粘贴过来,大家
回去研究一下他的使用,自己尝试一下
[html]
Input表单的type新属性值
Type="email" 限制用户输入必须为Email类型
Type="url" 限制用户输入必须为URL类型
Type="date" 限制用户输入必须为日期类型
Type="time" 限制用户输入必须为时间类型O
Type="month" 限制用户输入必须为月类型O
Type="week" 限制用户输入必须为周类型O
Type="number" 限制用户输入必须为数字类型
Type="range" 产生一个滑动条的表单
Type="search" 产生一个搜索意义的表单 配合results="n"属性 C
Type="color" 生成一个颜色选择表单

属性 值 说明
Required required 表单拥有该属性表示其内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不显示
Autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
Pattern 正则表达式 输入的内容必须匹配到指定正则
[/html]
还有新出的这个,仿的百度下拉框很好用

[html]
<input type="search" name="move" list="search" >

<datalist id="search" >
<option>黑老师的由来</option>
<option>男人缘何肾虚</option>
<option>佳佳婕婕不得不说的故事</option>
</datalist>
[/html]

还有一个和大家说的就是output表单

[html]
<form oninput="res.value=no1.value*no2.value“ >
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>
[/html]
这哥东西可以简化好多程序,这样我们简单的计算器很简单不需要php或者.net或者asp的大量代码了
欢迎转载,转载请注明来自微度网络-网络技术中心http://www.widuu.com
下一个我们就讲强大的canvas这个东西灰常强大学好了哈,能做游戏,灰常神奇吧!!

转载请注明来自微度网络,本文标题:《html5的智能表单技术》

喜欢 0 发布评论
Top