一、表单简介
表单元素简介
- 无论是实现功能还是展示页面元素，表单在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元素与参与计算的源元素相关联，目的为了提高代码可读性