说完了标签属性后 。接着说下HTML中最后的标签–label
<label>标签为input元素定义标注 。用于绑定一个表单元素 。当点击一个<label>标签内的文本时 。浏览器就会自动讲焦点(光标)转到或者选择对应的表单元素上 。用来增加用户体验 。接着看下语法:
<label for=”sex”>男</label>
<input type=”radio” name=”sex” id=”sex”>
<label>里的for和<input>里的id需要对应起来 。值需要是一样的 。即核心点为: <label>标签的for属性应当与<input>元素的id属性相同 。可以看下效果:
首先是名称+单选框
文章插图
之前点击单选框 。必须要点击到小圆圈按钮处才行 。现在点击颜色+小圆圈区域就可以了 。
文章插图
来看看代码展示:
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<labelfor=”color”>
颜色
</label>
<inputtype=”radio”name=”红色”id=”color”>
</body>
</html>
其中for和id都是color, 我们加上复选框看看效果
文章插图
点击后的效果:
文章插图
【html中label标签的用法 测试开发全栈-HTML】然后看看已经添加了的代码:
<labelfor=”color”>
颜色
</label>
<inputtype=”radio”name=”红色”id=”color”>
蓝色<inputtype=”checkbox”name=”蓝色”id=”color”>
绿色<inputtype=”checkbox”name=”绿色”id=”color”>
紫色<inputtype=”checkbox”name=”紫色”id=”color”>
这里就多了复选框 。但是发现点击文字不能勾选 。然后是没有加<label>标签属性 。我们再加上试试(终于写出来代码bug)
文章插图
看下如何修改的代码:
<body>
<labelfor=”color”>
颜色
</label>
<inputtype=”radio”name=”红色”id=”color”>
<inputtype=”checkbox”name=”蓝色”id=”color1″><labelfor=”color1″>蓝色</label>
<inputtype=”checkbox”name=”绿色”id=”color2″><labelfor=”color2″>绿色</label>
<inputtype=”checkbox”name=”紫色”id=”color3″><labelfor=”color3″>紫色</label>
</body>
每一个控件都会有一个label和一个id一一对应
好的 。今天就先这样了
- 2023河南省中职对口升学考试科目和分值
- 南通2023上半年中小学教资面试考区有哪些？
- 洗衣机上水中途暂停 洗衣机为什么进水停不了
- 2021年河南省中职对口升学的时间 2023河南省中职生对口升学政策
- 江苏省2023年上半年中小学教资面试报名通告
- 如何在内网中使用代理服务器？ 内网怎么用代理服务器
- 2023绵阳城区小学初中入学登记报名时间+条件+方式
- 如何在内网中登录FTP服务器？ 内网怎么登录FTP服务器
- 刑法中放火罪规定刑事量刑幅度是怎样
- 中国夫妻需要哪些情趣？