HTML5添加一个新的表单标签

新标准中增加了很多输入控件，如数字、网址、电子邮件、范围、颜色等。而且都是和输入标签的type属性一起出现的，我来简单的逐一介绍一下。【请用Opera浏览器浏览以下所有例子】

1)只能输入数字类型的输入标签

Html代码是：输入类型=' number ' name=' demo number ' min=' 1 ' max=' 100 ' step=' 2 '/

跑步效果：

注意：这个标签其实是一个普通的输入标签，只是类型类型指向数字，表示当前标签接受数字类型输入。此外，添加了四个属性。

名称：属性熟悉用于标识表单提交的键值

Min:是表单标签新增属性在当前输入框中输入的最小值

Max:最多了

Step:表示步长，即点击增加或减少时增加或减少的步长

摘要：最小、更大和步长是添加到表单标签中的新属性。此外，一个新的数字类型被添加到类型，它接受数字输入。之前只有js失焦的时候才要判断这个效果，不太方便控制。现在一切都那么简单简洁。

2)输入新电子邮件类型的标签

Html代码：输入类型=' email '名称=' email '占位符='请输入注册的电子邮件地址'/

运行效果：

注意：在上面的HTML代码中，与之前的标签相比，区别在于：type='email '表示当前输入标签接受来自某个邮箱的输入。另一个是：属性占位符的作用='请输入注册邮箱'。相信这个时候看到效果你会觉得很激动。在实现这个提示信息之前，你需要先听一下文本框的模糊事件，然后判断是否为空。如果为空，则为文本框指定一个灰色字体提示消息。现在你只需要指定一个简单的属性，浏览器已经帮我们实现了。

总结：表单提交前，此文本框会自动检查是否符合邮箱的正则表达式。另外占位符属性带来的提示信息太强大了。

3)新的网址类型输入标签

这里就不赘述了，类似Email类型的输入标签。只看一个效果：

Html代码：输入类型='url '占位符='请输入网址'名称='url'/

运行效果：

4)新电话类型输入标签

Html代码：输入类型='tel '占位符=' enter phone '名称='phone'/

运行效果：

5)新范围类型输入标签

Html代码：输入类型=' range ' min=' 0 ' max=' 50 ' step=' 5 ' name=' range demo ' value=' 0 '/

运行效果：

加上这种类型的标签，输入范围内的数据变得非常简单容易，非常标准，用户输入可感知的体验非常好。此外，该标签可以与表单新添加的输出标签一起使用，以实现链接效果。参见演示源代码：

表单操作=' '方法='POST' id='form1 '

输入类型=' range ' min=' 0 ' max=' 50 ' step=' 5 ' name=' range demo ' value=' 0 '/

output onforminput=' value=range demo . value ' 0/output

/form

运行效果：

6)新的日期、时间、月和周输入标签

相信如果你做过相关的Web项目开发，一定会遇到相关的js日期控制。而一系列的版本问题，使用不方便等等都会一去不复返，因为……看下面这个标签:

Html代码：输入类型=' date' name=' datedemo'/

运行效果：

还有其他类型：月、时间、周、日期时间-本地、日期时间。让我们快点实验。

7)颜色选择输入标签

颜色选择器实现起来有点困难，但是现在一切都这么简单。看看代码：

Html代码：输入类型='color'/

运行效果：

8)输入标签自动完成功能

如果有一定的开发经验，一定做过相关的自动完成或者输入提示功能。那么这个就没那么复杂了，这个功能用几个简单的标签就自动实现了。请参见下面的演示：

输入类型=' text ' autocomplete=' on ' name=' Demoautocomplete ' list=' AutoNames '/

数据列表id='自动名称'

期权价值='龙与天'/期权

期权价值='美德IT '/期权

选项值='飞龙'/选项

/datalist

向HTML5表单添加属性

输入标签的新特殊属性

1)自动对焦特性

演示：输入类型=' text ' autofocus=' autofocus '/该属性可以设置加载当前页面的输入标签后获得的焦点。

2)以上介绍的max、min、step都与数字有关。

3)placeholder:提示信息属性，带有演示。

4)多重：用于文件上传控制。设置此属性后，可以上传多个文件。

5)验证属性：设置需要的属性表示当前文本框在提交前必须有数据输入，这一切都是浏览器自动完成的。

这和使用Jq Validate一样酷。进一步补充：模式正则表达式的验证。

演示：输入类型='文本'自动对焦='自动对焦'所需模式='\d ' /

6)另一个很大的改进是增加了表单属性，也就是说，任何标签都可以指定它属于一个表单，而不必用form/form来包装。

再看演示：输入类型=' text ' form=' demo form ' name=' demo '/

向表单标签添加新属性

1)novalidate属性指定提交表单时不应验证表单或输入字段。

演示：表单操作=' '方法=' POST ' novalidate=' true '/表单

2)自动完成属性指定表单或输入字段应该具有自动完成功能。

表单分组

图例只能以形式演示：请使用最新的Opera浏览器/图例

表单操作=' '方法='POST' id='form1 '

输入类型='文本'自动对焦='自动对焦'要求模式=' \ d '名称='自动'占位符='要求测试'/

输入类型=' number ' name=' DeMonumber ' min=' 1 ' max=' 100 ' step=' 2 '/

输入类型='电子邮件'占位符='请输入邮箱'名称='邮件'/

输入类型='网址'名称='网址'占位符='输入正确的网址'/

br /

日期：输入类型=' datetime '名称=' time'/

颜色：

输入类型='color' name='color' /br /

br /

输入类型=' range ' min=' 0 ' max=' 50 ' step=' 5 ' name=' range demo ' value=' 0 '/

output onforminput=' value=range demo . value ' 0/output

br /

输入类型='提交'值='提交表单'/

/form

表单外的输入标签:

输入类型=' text ' form=' form 1 ' name=' demo '/

/fieldset

因为有些属性无法正常提交到Blog Park后台，所以在前面的图片中添加源代码：

实际操作：

仅表格展示：请使用最新的Opera浏览器

表单外的输入标签: