html5-智能form表单新属性

本文介绍了HTML5中智能表单的新特性及其使用方法,包括表单元素的位置灵活性、新增输入类型及样式、以及如autofocus、required等新属性的应用示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载自【http://www.656463.com/article/335】
HTML5 智能form表单新属性,主要包括智能表单介绍和智能表单使用与规范。但在不同支持HTML5的浏览器效果有所差异,使用的时候要注意
智能表单介绍

1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。
<FORM id=foo>

</FORM>
<INPUT … form="foo">

2、HTML5提供了多样的输入类型和风格,让设计界面更加丰富
[img]http://pic.yupoo.com/naxsu_v/CyOevkUg/GKJZp.gif[/img]

[img]http://pic.yupoo.com/naxsu_v/CyOewb5w/11hIu2.gif[/img]


<input type="text" list="mydata" />

<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value=“PHP100">
</datalist>
新属性介绍:
autofocus 载入时自动获得焦点
required 必填项目
placeholder 点击input内容消失
pattern 验证正则表达式


3、实例

<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5视频教程-canvas</title>
</head>
<body>
<form action="" method="get" id="foo">
邮件<input type="email" placeholder="请输入正确mail地址"><br>
网址<input type="url"><br>
日期<input type="date"><br>
月份<input type="month"><br>
周 <input type="week"><br>
时间<input type="time"><br>
数字<input type="number"><br>
滑动<input type=range min="0" max="3" step="1"><br>
搜索<INPUT type=search results="n" value="搜索"><br>
颜色<INPUT type=color><br>
正则测试<input type="text" pattern="[789]+" required />
<input type="text" list="mydata" />
<datalist id="mydata">
<option label="Top1" value="656463">
<option label="Top2" value="HTML5">
<option label="Top3" value="Javascript">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
<input type="submit" value="sub">
</form>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值