一、表单简介

表单元素简介

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

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

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

二、input 类型

电子邮件类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_文本框

搜索类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_控件_02

URL类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_控件_03

电话号码类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_表单_04

数字类型

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

- 语法:

- 属性:

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

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

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

HTML5表单新元素练习题 html5新增的表单元素类型_文本框_05

范围类型

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

- 语法:

- 属性:

- min:   范围的下限值

- max:   范围的上限值

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

- value: 设定初始值

HTML5表单新元素练习题 html5新增的表单元素类型_文本框_06

颜色类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_表单_07

自定义调色器

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

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

日期类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_控件_08

周类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_文本框_09

月类型

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

- 语法:

HTML5表单新元素练习题 html5新增的表单元素类型_HTML5表单新元素练习题_10

三、新表单元素

新表单元素

- 元素

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

- 元素

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

- 属性:

- value: 任务执行的进度

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

- 元素

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

- 属性:

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

- value   : 确定测量的值

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

- 元素

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

- 属性:

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

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