交互控件
[Interactive contols]
何为交互控件？
交互控件就是可以与用户完成交互动作（如点击、输入）的一种特殊化语义的标签
①交互元素
Ⅰ. 下拉菜单栏（Detail元素与Summary元素）
details与summary常常共同使用，并且常用于制作下拉菜单栏。
details&summary元素
[Dou.Blo]
示例：
1 | <details> |
效果：
否认三连
- 我不是
- 我没有
- 我可没说过啊
不难看出，下拉菜单的实质是一个Summary标签用于下拉菜单显示标题，然后使用一个列表标签表示菜单选项
Ⅱ.进度条（progress元素和meter元素）
㈠progress元素
[Dou.Row] progress元素可以定义一个普通进度条，其常用属性有：
属性
说明
max
定义进度条的最大值，默认为1元素
min
定义进度条的最低值，默认为0
value
定义进度条显示的值
示例：
1 | <progress value=60 max=100></progress> |
效果：
㈡meter元素
[Dou.Row] meter元素凭借可以定义较高值与较低值的优势更多的是显示数据
属性
说明
high
定义一个“高值范围”，若进度条的值高于此值则告诉浏览器“过高”
low
定义一个“低值范围”，若进度条的值低于此值则高速浏览器“过低”
max
定义进度条的最大值，默认为1
min
定义进度条的最低值，默认为0
optimum
定义一个“最佳值”，若该值高于high，则代表值越高越好，若低于low，则代表值越低越好
value
定义进度条显示的值
示例：
1 | <h6>学生成绩</h6> |
效果：
学生成绩
学霸：90
班长：75
学渣：50
②表单
表单是一种要求用户输入的可视化控件集合
创建一个表单
创建表单需要引入form元素，通过更改form元素的属性可以初步确定数据的发送对象、发送方式等信息。
form
[Dou.Blo]
常用属性：
属性
说明
action
该属性确定发送数据的目标页面地址
method
该属性确定发送数据的方式，有get和post可选，默认为post前者为数据一次性传送，后者为分步传送。但get保密性差，且有数据限制，所以推荐使用post
novalidate
指定是否为用户输入该form中的控件内容进行检查
input
[Sig.Blo] 需要注意的是，input元素需要嵌套在form元素中才可用！
属性
属性值
说明
效果
type
text
单行为本输入框
-
password
密码输入框
-
radio
单选按钮
-
checkbox
复选框
-
button
普通按钮
-
submit
提交按钮
-
reset
重置按钮
-
image
图片形式的提交按钮
-
hidden
隐藏域
-
file
文件域
-
E-mail地址输入区域
-
url
URL地址输入区域
-
number
数字输入区域
-
range
一定范围的数字输入区域(轨迹条）
-
date、month、week、time、datetime（-local）
时间选择区域（示例为date）
-
search
搜索区域
-
color
颜色输入区域
-
tel
电话号码输入区域
name
开发人员任取
空间名称
value
开发人员任取
空间默认值
size
正整数
空间在页面中显示的宽度
readonly
readonly
控件只读（不可修改）
disabled
disabled
控件禁用
checked
checked
控件默认选中
maxlength
正整数
空间允许输入的最大字符数量
autocomplete
on/off
设定是否自动完成表单字段内容
autofocus
autofocus
指定页面加载后是否自动将焦点移至本控件
form
fom的元素id
设定字段隶属于哪一个或多个表单
list
datalist的元素id
指定字段的候选数据值列表
multiple
multiple
指定输入框是否可以选择多个值
min、max和step
数值
指定输入框所允许的最大值、最小值及间隔
pattern
字符串
验证输入内容是否与正则表达式匹配
placeholder
字符串
为input类型的输入框提供一种提示
required
required
规定输入框填写内容不可为空