「测试开发全栈-HTML」(18) label标签的使用

说完了标签属性后,接着说下HTML中最后的标签--label

首先是名称+单选框

之前点击单选框,必须要点击到小圆圈按钮处才行,现在点击颜色+小圆圈区域就可以了。

来看看代码展示:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<label for="color">

颜色

</label>

<input type="radio" name="红色" id="color">

</body>

</html>

其中for和id都是color, 我们加上复选框看看效果

点击后的效果:

然后看看已经添加了的代码:

<label for="color">

颜色

</label>

<input type="radio" name="红色" id="color">

蓝色<input type="checkbox" name="蓝色" id="color">

绿色<input type="checkbox" name="绿色" id="color">

紫色<input type="checkbox" name="紫色" id="color">

这里就多了复选框,但是发现点击文字不能勾选,然后是没有加

看下如何修改的代码:

<body>

<label for="color">

颜色

</label>

<input type="radio" name="红色" id="color">

<input type="checkbox" name="蓝色" id="color1"><label for="color1">蓝色</label>

<input type="checkbox" name="绿色" id="color2"><label for="color2">绿色</label>

<input type="checkbox" name="紫色" id="color3"><label for="color3">紫色</label>

</body>


每一个控件都会有一个label和一个id一一对应


好的,今天就先这样了