转载自【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提供了多样的输入类型和风格，让设计界面更加丰富
<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>
分享到：
相关推荐
-为所有的表单字段增加AJAX属性ReadOnly(feedback:skydb)。 -Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件...
-为所有的表单字段增加AJAX属性ReadOnly(feedback:skydb)。 -Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件...
form.html 表单范例。 css.html CSS范例。 第3章（\Chapter 03） 示例描述：本章介绍C# 2.0程序设计基础。 3-01.cs 第一个C#程序。 3-02.cs 不导入命名空间来改写程序3-01.cs。 3-03.cs ReadLine()方法...
form.html 表单范例。 css.html CSS范例。 第3章（\Chapter 03） 示例描述：本章介绍C# 2.0程序设计基础。 3-01.cs 第一个C#程序。 3-02.cs 不导入命名空间来改写程序3-01.cs。 3-03.cs ReadLine()方法读数据。...
第5章 ext js的事件及其应用 / 170 5.1 概述 / 170 5.2 浏览器事件 / 170 5.2.1 绑定浏览器事件的过程：ext.eventmanager / 170 5.2.2 封装浏览器事件：ext.eventobject / 179 5.2.3 移除浏览器事件 / 181 5.3...
创建Application，首先需要新建项目用于开发Web Application，单击菜单栏上的【文件】按钮，在下拉菜单中选择【新建项目】选项，在弹出窗口中选择【ASP.NET应用程序】选项，如图4-5所示。 图4-5 创建ASP.NET应用...
9.3.4 使用ASP.NET的Form-Parameter对象 279 9.3.5 使用ASP.NET的Profile-Parameter对象 281 9.3.6 使用QueryStringParameter对象 282 9.3.7 使用SessionParameter对象 284 9.4 通过程序执行SqlDataSource命令 285 ...
常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中，让你的组件也可以绑定 .NET20 一种简单的窗口控件UI状态控制方法 翻译MSDN...
9.3.4 使用asp.net的formparameter对象317 9.3.5 使用asp.net的profileparameter对象319 9.3.6 使用querystringparameter对象320 9.3.7 使用sessionparameter对象322 9.4 通过程序执行sqldatasource命令323 9.4.1 ...
实例079 利用TStringGrid实现表单式批量录入数据 96 实例080 在TStringGrid中实现单元格下拉列表 98 实例081 在TStringGrid组件中绘图 99 实例082 TStringGrid组件上回车移动焦点 100 实例083 在...
1.2.2 DOM..............................................5 1.2.3 BOM..............................................8 1.3 小结..............................................8 第 2 章 ECMAScript 基础..........
1. 介绍.........................................................................................................18 1.1. 关于本书..........................................................................
1. 介绍.........................................................................................................18 1.1. 关于本书...........................................................................