html5自带的验证学,HTML5-表单 自带验证

表单语法

action="result.html">(表示向何处发送表单数据)

名字：

密码：

value="text"(input元素的值)/>

表单元素

文本框-语法

密码框-语法单选按钮-语法男女

复选框-语法运动聊天玩游戏

列表框-语法

…

…

按钮-语法

图片按钮多行文本域-语法文本内容 文件域-语法

邮箱-语法

邮箱:

注意：会自动验证Email地址格式是否正确

网址-语法

请输入你的网址:

注意：会自动验证URL地址格式是否正确

数字-语法

请输入数字:

滑块-语法

请输入数字:

搜索框-语法

请输入搜索的关键词:

表单的高级应用

隐藏域-语法只读和禁用-语法

表单元素的标注

1.增强鼠标的可用性

2.自动将焦点转移到与该标注相关的表单元素上

语法标注的文本

表单类型

email

此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.

url

要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.

number

要求输入格式数字，默认会有上下两个按钮，opera支持更好

tel

此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.

range

此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.

color

此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值

date, time, datetime, datetime-local, month, week

这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.

time

datetime

datetime-local

month

week

search

此类型表示输入的将是一个搜索关键字,通过results=s 或者 x-webkit-speech 可显示一个搜索小图标. [在chrome下才能看得见]

required

表单验证属性为require类型时,若输入值为空,则拒绝提交,并会有一个提示.这个很有用.并且可以用于textarea以及hidden/image/submit类型.

pattern

pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

placeholder

这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,标准浏览器都能很好的支持.

autofocus

默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().

list

该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.

aaaaa

bbbbb

ccccc

autocomplete

此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.

keygen

keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。

datalist

datalist 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 用 input 元素的 list 属性来绑定 datalist。

搜索引擎

output

output 标签定义不同类型的输出，比如脚本的输出。

meter

meter 标签定义度量衡。仅用于已知最大和最小值的度量。

progress

progress 标签定义运行中的进度(进程)。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。

contenteditable

此属性可以让摸个元素里面的文本节点或值变为可编辑

可以编辑的内容

可以编辑的内容

form表单演示

搜索  请输入搜索内容

加密强度

用户名

Email

密码

年龄

身高

生日

颜色

下载进度： 标签。

搜索引擎