>无扰阅读模式（测试）

交互控件

[Interactive contols]

---

何为交互控件？

交互控件就是可以与用户完成交互动作（如点击、输入）的一种特殊化语义的标签

①交互元素

Ⅰ. 下拉菜单栏（Detail元素与Summary元素）

details与summary常常共同使用，并且常用于制作下拉菜单栏。

details&summary元素

[Dou.Blo]

示例：

<details>
  <summary>否认三连</summary>
  <ul>
    <li>我不是</li>
    <li>我没有</li>
    <li>我可没说过啊</li>
 </ul>
</details>

效果：

否认三连

• 我不是
• 我没有
• 我可没说过啊

不难看出，下拉菜单的实质是一个Summary标签用于下拉菜单显示标题，然后使用一个列表标签表示菜单选项

Ⅱ.进度条（progress元素和meter元素）

㈠progress元素

[Dou.Row]
progress元素可以定义一个普通进度条，其常用属性有：

属性	说明
max	定义进度条的最大值，默认为1元素
min	定义进度条的最低值，默认为0
value	定义进度条显示的值

示例：

<progress value=60 max=100></progress>

效果：

㈡meter元素

[Dou.Row]
meter元素凭借可以定义较高值与较低值的优势更多的是显示数据

属性	说明
high	定义一个“高值范围”，若进度条的值高于此值则告诉浏览器“过高”
low	定义一个“低值范围”，若进度条的值低于此值则高速浏览器“过低”
max	定义进度条的最大值，默认为1
min	定义进度条的最低值，默认为0
optimum	定义一个“最佳值”，若该值高于high，则代表值越高越好，若低于low，则代表值越低越好
value	定义进度条显示的值

示例：

<h6>学生成绩</h6>
<p>
学霸：<meter value=90 max=100 high=80 low=60></meter>90<br/>
班长：<meter value=75 max=100 high=80 low=60></meter>75<br/>
学渣：<meter value=50 max=100 high=80 low=60></meter>50<br/>
</p>

效果：

学生成绩

学霸：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	文件域
–	email	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	规定输入框填写内容不可为空