HTML5表单及其应验
日期：2014-05-17 浏览次数：20780 次
HTML表单一直都是Web的核心技术之一，有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便我们做更复杂的应用，而不用借助其它Javascript框架，先说下表单的几个基本知识点：
表单仍是以<form>元素作为容器，我们可在其中设置基本的提交特性；
当用户提交页面时，表单仍然向服务器发送表单控件的值；
之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能；
仍然可以使用javascript操作表单控件。
下面详细说下HTML5中表单新增功能
1.输入型控件
|
Input type |
用途 |
说明 |
|
|
电子邮件地址文本框 |
? |
|
url |
网页URL文本框 |
? |
|
number |
数值的输入域 |
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 |
|
range |
特定值的范围的数值，以滑动条显示 |
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值 |
|
Date pickers |
日期，时间选择器 |
仅Opera9+支持，包含date, month, week, time, datetime, datetime-local |
|
search |
用于搜索引擎，比如在站点顶部显示的搜索框 |
与普通文本框用法一样，只不过这样更语文化 |
|
color |
颜色选择器 |
仅Opera支持 |
将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
如：
<
p
><
label
for
=
"runnername"
>Runner:</
label
>
?????????????
<
input
id
=
"runnername"
name
=
"runnername"
type
=
"text"
placeholder
=
"First and last name"
/>
??????????
</
p
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
