【HTML】交互控件

>无扰阅读模式(测试)

交互控件

[Interactive contols]


何为交互控件?

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

①交互元素

Ⅰ. 下拉菜单栏(Detail元素与Summary元素)

detailssummary常常共同使用,并且常用于制作下拉菜单栏。

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 该属性确定发送数据的方式,有getpost可选,默认为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 规定输入框填写内容不可为空

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据