HTML5一步一步走――表单(二)

input tyPE="email"/> 自动验证email电子邮件格式是不是正确的。

input type="usl"/> 自动将提交的数据变为url

input type="number" name="points" min="1" max="10"/> 输入数字。
拥有的属性：
max:最大值
min:最小值
step:步长。
value:初始值

input type="range" name="points" min="1" max="10"/> 显示一个数字范围工具条。

input type="date" name="userDate"> 日期，如果类型为week就为周，month则为月，datetime具体的日期加时间。datetime-local时区

input type="color" name="userColor" /> RBG颜色

属性：
autofocus:页面加载显示时，页面中元素获得焦点。
placeholder:提示输入格式。在文本框中显示默认的值。
required:鼠标失去焦点的时候自动验证。

autocomplete:on/off是否自动补完这一文本框

autofocus:autofocus是否自动设置焦点，如果类型是hidden则不可以。

form:formname说明一个文本框属于某一个form

formaction:url本文本框将要被提交到何处去

formenctype:application/x-www-form-urlencoded multipart/  
form-data text/plain  指定改善的时候的编码方式

formmethod:post/get提交方式

formtarget:_blank/_self/_parent/_top/framename提交结果显示位置

list:datalist-id输入选择项

multiple:正则表达式pattern="[0-9]", 用正则格式化输入

meter> ：为了显示进度，度量的范围，仅用于已知最大和最小值的度量，例如：meter value="2" min="0" max="10"/> 一般用于图报表。
属性：form,high,low,max,min,optimum,value

PRogress> ：显示进度条，一般用于显示下载的进度。
文本下拉框，相似于ajax自动补全效果，主要用到datalist> 标签：
  input list="cars"/>
datalist id="cars">
   option value="abc"> /option>
   option value="Ford"> /option>
   option value="Volvo"> /option>
/datalist>
   input type="submIT" />

keygen> 加密传输数据。 rsa也可以是其它加密方式
数据结果显示，利用output标签实现自动提交计算结果：
例如：
input name="num1" type="number"/> +
input name="num2" type="number"/> =
output name="result" onforminput="value=num1.valueAsNumber + num2.valueAsNumber"> /output>

客户端脚本数据校验：
require属性：指定了该属性，则必须要输入。
checkValidaty:指定验证函数。
setCustomValidity()指定自己验证函数

input type="email"/> 自动验证email电子邮件格式是不是正确的。

input type="usl"/> 自动将提交的数据变为url

input type="number" name="points" min="1" max="10"/> 输入数字。
拥有的属性：
max:最大值
min:最小值
step:步长。
value:初始值

input type="range" name="points" min="1" max="10"/> 显示一个数字范围工具条。

input type="date" name="userDate"> 日期，如果类型为week就为周，month则为月，datetime具体的日期加时间。datetime-local时区

input type="color" name="userColor" /> RBG颜色

属性：
autofocus:页面加载显示时，页面中元素获得焦点。
placeholder:提示输入格式。在文本框中显示默认的值。
required:鼠标失去焦点的时候自动验证。

autocomplete:on/off是否自动补完这一文本框

autofocus:autofocus是否自动设置焦点，如果类型是hidden则不可以。

form:formname说明一个文本框属于某一个form

formaction:url本文本框将要被提交到何处去

formenctype:application/x-www-form-urlencoded multipart/  
form-data text/plain  指定改善的时候的编码方式

formmethod:post/get提交方式

formtarget:_blank/_self/_parent/_top/framename提交结果显示位置

list:datalist-id输入选择项

multiple:正则表达式pattern="[0-9]", 用正则格式化输入

meter> ：为了显示进度，度量的范围，仅用于已知最大和最小值的度量，例如：meter value="2" min="0" max="10"/> 一般用于图报表。
属性：form,high,low,max,min,optimum,value

progress> ：显示进度条，一般用于显示下载的进度。
文本下拉框，相似于ajax自动补全效果，主要用到datalist> 标签：
  input list="cars"/>
datalist id="cars">
   option value="abc"> /option>
   option value="Ford"> /option>
   option value="Volvo"> /option>
/datalist>
   input type="submit" />

keygen> 加密传输数据。 rsa也可以是其它加密方式
数据结果显示，利用Output标签实现自动提交计算结果：
例如：
input name="num1" type="number"/> +
input name="num2" type="number"/> =
output name="result" onforminput="value=num1.valueAsNumber + num2.valueAsNumber"> /output>

客户端脚本数据校验：
require属性：指定了该属性，则必须要输入。
checkValidaty:指定验证函数。
setCustomValidity()指定自己验证函数

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！