文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5表单实例分析

2024-04-02 19:55

关注

这篇文章主要介绍了HTML5表单实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5表单实例分析文章都会有所收获,下面我们一起来看看吧。

一、表单结构更自由

XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来. 比如:

<FORM id=iform>    

<INPUT>    

    ...    

</FORM>    

<INPUT value=我在id为iform的表单外 form="foo">   

二、多样的输入类型

(大部分新类型目前并不为所有标准浏览器支持,请参见样例演示中的提示) email输入类型

<INPUT type=email name=email>   

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

<INPUT type=url>   

上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 日期时间相关输入类型(这些个很牛X的)

<INPUT type=date>    

<INPUT type=time>    

<INPUT type=month>    

<INPUT type=week>   

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

number输入类型(这些个很牛X的)

<INPUT type=number>  

这个不用多解释了,要求输入一个数字字符,若未输入则会抛出一个错误.

range输入类型 

<INPUT type=range>  

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

search输入类型

<INPUT type=search>  

此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标.

tel输入类型

<INPUT type=tel>  

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

color输入类型

<INPUT type=color>  

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

三、新增的表单属性

placeholder属性

<INPUT placeholder="点击我会以清除">  

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

require/pattern属性

<INPUT name=require>    

<INPUT name=require1 required="required">    

<INPUT name=require2 pattern="^[1-9]\d{5}$">   

表单验证属性,require类型时,若输入值为空,则拒绝提交,并会有一个提示.上面两种写法都对,这个很有用.并且可以用于textarea以及hidden/image/submit类型.pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.

autofocus属性

INPUT autofocus="true">  

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

list属性

<INPUT list="ilist">    

<DATALIST id=ilist>    

   <OPTION label="a" value="a">    

   </OPTION><OPTION label="b" value="b">    

   </OPTION><OPTION label="c" value="c">    

</OPTION></DATALIST>   

关于“HTML5表单实例分析”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“HTML5表单实例分析”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯