21lable标签

最新推荐文章于 2024-08-01 00:10:06 发布

原创最新推荐文章于 2024-08-01 00:10:06 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了HTML中Label标签的两种使用方法：一种是只包裹内容并与表单控件ID关联，另一种是包含内容和控件且无需额外属性。这两种方式分别适用于不同场景，有助于增强用户体验。

21lable标签

用途

绑定文字与表单控件的关系

增加表单控件的点击范围

示例

写法一

lable标签只包裹内容，不包裹表单控件

lable标签的for属性值与表单控件的id属性值相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签</title>
</head>
<body>
    <!-- 写法一：lable标签只包裹内容，不包裹表单控件，lable标签的for属性值与表单控件的id属性值相同 -->
    性别：
    <input type="radio" name="gender" id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    <br><br> 
</body>
</html>

写法二

lable标签包括内容和表单控件，不需要任何属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签</title>
</head>
<body>
     <!-- 写法二：lable标签包括内容和表单控件，不需要任何属性 --> 
     <label>兴趣爱好：</label>
     <label><input type="checkbox">看书</label>
     <label><input type="checkbox">看电影</label>
  
</body>
</html>