一、表单简介
表单元素简介
- 无论是实现功能还是展示页面元素,表单在HTML中都有不可能替代的作用
- 在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
- 上述的不足,都已经在HTML5中被客服了。HTML5在以上的基础上增加了许多标签以及属性,为开发人员带来了极大的方便
二、input 类型
电子邮件类型
- 功能描述: 输入E-mail地址的文本框
- 语法:
搜索类型
- 功能描述: 输入搜索关键字操作的文本框
- 语法:
URL类型
- 功能描述: 输入Web站点地址的文本框
- 语法:
电话号码类型
- 功能描述: 主要针对电话号码的输入,能够指示浏览器根据不同的设备进行调整
- 语法:
数字类型
- 功能描述: 只能接收数字值
- 语法:
- 属性:
- min: 当前域能接受的最小值
- max: 当前域能接受的最大值
- step: 决定了域所接受值递增或递减的步长,默认为1
范围类型
- 功能描述: 允许用户选择一个范围的数值
- 语法:
- 属性:
- min: 范围的下限值
- max: 范围的上限值
- step: 声明该值递增或递减的步长
- value: 设定初始值
颜色类型
- 功能描述: 预定义的颜色拾取控件
- 语法:
自定义调色器
- 通过三个范围选择控件表示R、G、B,并且默认值都为0,最大值为255
- 滑动不同的范围控件可以实现颜色的变化
日期类型
- 功能描述: 创建一个日期输入域
- 语法:
周类型
- 功能描述: 与date类型相似,但是只能选择周
- 语法:
月类型
- 功能描述: 与date类型相似,但是只能选择一个月份
- 语法:
三、新表单元素
新表单元素
- 元素
- 是一个表单特有的元素,它可以使用list属性预创建一组列表项,后面可以为输入框的输入提示
- 元素
- 表示一个任务的完成进度,而且通常这些任务都在表单中启动和处理
- 属性:
- value: 任务执行的进度
- max : 声明任务完成后达到的值
- 元素
- 与元素类似,可用于显示刻度,而非进度
- 属性:
- min和max: 设置范围的边界
- value : 确定测量的值
- low、high和opimum: 将范围划分为不同的部分和设置最佳位置
- 元素
- 通常用于显示表单元素处理的结果值
- 属性:
for : 将output元素与参与计算的源元素相关联,目的为了提高代码可读性
总结:本章内容主要介绍了下 HTML5高级特性之 表单元素(表单简介、input类型、新表单元素)。