交互控件
[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>
效果:
学生成绩
学霸:
班长:
学渣:
②表单
表单是一种要求用户输入的可视化控件集合
创建一个表单
创建表单需要引入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 | 规定输入框填写内容不可为空 |