4.3 HTML5智能表单-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元4 HTML5新特性 4.3 HTML5智能表单 PART 01 <input>元素新增type类型 主要内容 CONTENTS PART 02 表单新增属性 2 HTML5智能表单 form属性 3.meter元素 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示： 表4-4 meter元素常用属性值 4.progress元素： <progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止），也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 在HTML5中，则可以把表单元素如input、select、textarea等放在form标签之外的网页任何位置，然后给表单元素添加一个form属性，属性值为所希望一起提交信息的form标签的id。 <form action="#" method="get" id="test"> 名字：<input type="text" name="name" /> <input type="submit" value="提交" /> </form> 密码：<input type="password" name="password" form="test" /> HTML5 在form标签之外添加元素 <input>元素新增type类型 【案例4.3.1】color类型 color 类型 3.meter元素 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示： 表4-4 meter元素常用属性值 4.progress元素： <progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止），也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 创建允许用户使用颜色的选择器，或输入兼容CSS语法的颜色代码的区域。 语法：<input type="color" name="名称" /> <input>元素新增type类型 【案例4.3.2】时间日期类型的使用 日期和时间类型 3.meter元素 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示： 表4-4 meter元素常用属性值 4.progress元素： <progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止），也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 HTML5提供了多种新的日期和时间输入表单控件Date pickers。 语法：<input type=” date, month, week ...” /> type属性值 说明 date 选取日、月、年 month 选取月、年 week 选取周和年 time 选取时间（小时和分钟） datetime 选取时间、日、月、年（UTC时间） datetime-local 选取时间、日、月、年（本地时间） <input>元素新增type类型 email类型 3.meter元素 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示： 表4-4 meter元素常用属性值 4.progress元素： <progress>标签用来表示页面中某个任务完成的进度，可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止），也可以是一个介于某个最小值（如0）与最大值（如100）之间的进度。 email类型的input元素专门用于输入E-mail地址的文本输入框，当提交数据时，会对输入的邮箱地址值自动进行校验，如果输入不符合格式就会给出提示。 语法：<input type=”email” /> 【案例4.3.3】input元素的email类型 <input>元素新增type类型 数字类型 3.meter元素 <meter>用于表示指定范围的数值，又称为尺度，常用于显示电脑硬盘容量、电池电量、汽车速度表等场合。<meter>常用的属性如表4-4所示： 表4-4 meter元素常用属性值 4.progress元素： <progress>标签用来表示页面中某个任务完