设计过复杂用户界面的人都知道基本的HTML表单控件有哪些限制。文本字段、选择菜单、单选按钮、复选框等基本控件并不能很好的满足开发者的需求。有些设计出来的界面要反复教用户如何使用，这时创建一个有的Web表单显得举足轻重。
如同所有的优秀的Web开发者一样，你也要开始使用JQuery UI，或者结合HTML、CSS级JavaScript开发自己的控件或功能。但如果看到了一个带有活动条、日历控件、数字调节框、自动完成字段以及所见即所得编辑器的表单，瞬间你会发现自己以前做的竟是噩梦。对于自己开发的控件，务必要确保它们跟页面上的其他控件或其他JavaScript库不会产生冲突。试想，你花了几个小时开发出一个日志选择控件，之后却发现颜色选择控件无法工作了，原因是颜色选择控件代码有缺陷，导致它无法跟项目素偶偶那个的JQuery最新版本兼容，这该是多么大的打击。即使你解决了这个问题，之后可能还会产生或者延伸出其他的问题，这足以使程序员陷入深深的绝望之中。。。
如果你现在笑了，那是因为你也有过类似的经历；如果你火冒三丈，八成还是同样的原因。但是千万别泄气！现在我们来用HTML5表单字段类型来创建一些界面，并实现自动聚焦及占位文本功能。
1.电子邮件字段（<input type="email" />）：呈现一个用户输入电子邮件地址的表单字段
2.URL字段（ <input type="url" />）：呈现一个用于输入URL的表单字段
3.范围（滑动条）字段（ <input type="range" />）：呈现一个滑动条控件
4.数值字段（ <input type="number" />）：呈现一个用于输入数值的表单字段，显示为数值框
5.颜色字段（ <input type="color" />）：呈现一个用于指定颜色的表单字段
6.日期字段（ <input type="date" />）：呈现一个用于选择日期的表单字段。支持日期、月份或是星期等选项
7.日期/时间选择字段（ <input type="datetime" />）：呈现一个用于选择日期及时间的表单字段。支持日期时间、本地时间或时间等多种选项
8.搜索字段（ <input type="search" />）：呈现一个用于输入搜索关键的表单字段
9.电话号码字段（<input type="tel" />）：呈现一个用于输入十一位电话号码字段
10.自动聚焦功能（ <input type="text" autofocus />）：支持将焦点防止在指定元素上
11.占位文本功能（<input type="email" placeholder="my@example.com" />）：支持在表单字段中呈现占位文本
12必填字段（ <input type="email" required />）：如果指定字段未填入值，则不允许提交表单
13.正则表达式验证功能（ <input type="text" pattern="/^(\s*|\d+)$/" />）：如果字段内容不匹配指定模式，则不允许提交表达
14.就地编辑功能（ <p contenteditable="true">test</p>）：在浏览器中提供内容就地编辑功能
现在我们浏览我们写的表单页面，最终的表单效果如果所示。
接下来创建一个HTML5页面，让它包含一个基本的HTML表单，表单将提交POST请求，假设有个目标页面会处理这个表单请求。由于对项目名并没有特定要求，因此，使用可靠的文本字段作为表单的第一个输入字段。
我们创建了一个表单，其标签包裹在一个有序列表中。在创建可达性良好的表单时，标签的使用非常重要。标签的for属性引用其关联表单元素的ID。这样能够帮助屏幕阅读器识别页面中的相关字段。有序列表提供了一个列出素哟有字段的有效方式避免采用复杂的表格或滥用<div>标签；同时也提供了一种标识字段顺序并让用户按顺序填写字段。一旦创建好整个表单，就用CSS规则把标签及其关联表单字段排列在同一行上。
作者：一码当先 除非注明，本文原创：欢迎转载！转载请以链接形式注明本文地址，谢谢。 原文链接：http://www.51ymdx.net/Article/Read?id=1
