首页 > Web开发 > 详细

Html5之高级-1 HTML5表单元素(表单简介、input类型、新表单元素)

时间:2016-03-29 15:04:49      阅读:220      评论:0      收藏:0      [点我收藏+]

一、表单简介


表单元素简介

    - 无论是实现功能还是展示页面元素,表单在HTML中都有不可能替代的作用

    - 在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码

    - 上述的不足,都已经在HTML5中被客服了。HTML5在以上的基础上增加了许多标签以及属性,为开发人员带来了极大的方便


二、input 类型


电子邮件类型

    - 功能描述: 输入E-mail地址的文本框

    - 语法: <input type="email" />

技术分享


搜索类型

    - 功能描述: 输入搜索关键字操作的文本框

    - 语法: <input type="search" />

技术分享


URL类型

    - 功能描述: 输入Web站点地址的文本框

    - 语法: <input type="url" />

技术分享


电话号码类型

    - 功能描述: 主要针对电话号码的输入,能够指示浏览器根据不同的设备进行调整

    - 语法: <input type="tel" />

技术分享


数字类型

    - 功能描述:   只能接收数字值

    - 语法: <input type="number" />

    - 属性:

        - min:   当前域能接受的最小值 

        - max:   当前域能接受的最大值

        - step:  决定了域所接受值递增或递减的步长,默认为1

技术分享


范围类型

    - 功能描述: 允许用户选择一个范围的数值

    - 语法: <input type="range" min="10" max="1000" value="50" />

    - 属性: 

        - min:   范围的下限值

        - max:   范围的上限值

        - step:  声明该值递增或递减的步长

        - value: 设定初始值

技术分享


颜色类型

    - 功能描述: 预定义的颜色拾取控件

    - 语法: <input type="color" />

技术分享


自定义调色器

    - 通过三个范围选择控件表示R、G、B,并且默认值都为0,最大值为255

    - 滑动不同的范围控件可以实现颜色的变化


日期类型

    - 功能描述: 创建一个日期输入域

    - 语法: <input type="date" />

技术分享


周类型

    - 功能描述: 与date类型相似,但是只能选择周

    - 语法: <input type="week" />

技术分享


月类型

    - 功能描述: 与date类型相似,但是只能选择一个月份

    - 语法: <input type="month" />

技术分享



三、新表单元素


新表单元素

    - <datalist>元素

       - 是一个表单特有的元素,它可以使用list属性预创建一组列表项,后面可以为输入框的输入提示

    - <progress>元素

       - 表示一个任务的完成进度,而且通常这些任务都在表单中启动和处理

       - 属性:

           - value: 任务执行的进度

           - max  : 声明任务完成后达到的值

    - <meter>元素

       - 与<progress>元素类似,可用于显示刻度,而非进度

       - 属性: 

           - min和max: 设置范围的边界

           - value   : 确定测量的值

           - low、high和opimum: 将范围划分为不同的部分和设置最佳位置

    - <output>元素

       - 通常用于显示表单元素处理的结果值

       - 属性: 

           for : 将output元素与参与计算的源元素相关联,目的为了提高代码可读性


总结:本章内容主要介绍了下 HTML5高级特性之 表单元素(表单简介、input类型、新表单元素)。


本文出自 “技术交流” 博客,谢绝转载!

Html5之高级-1 HTML5表单元素(表单简介、input类型、新表单元素)

原文:http://jasonteach.blog.51cto.com/5192112/1757905

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!