html5教程-HTML5一步一步走――表单(二)

发布时间:2018-12-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-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()指定自己验证函数


作者:shiyuan17

<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()指定自己验证函数


作者:shiyuan17

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

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5一步一步走――表单(二)全部内容,希望文章能够帮你解决html5教程-HTML5一步一步走――表单(二)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: