李涛自留地
回到顶部
首页 > 前端 > Html中label标签用法 使用label标签实例代码

Html中label标签用法 使用label标签实例代码

文章目录

在html中label标签也是一个很实用的标签，通常label标签是配合input标签使用，看到input标签就大致明白label大部分都是在form表单中使用的，本文将和大家一起学习Html中label标签用法以及与PHP数据传输的一个实例。

label标签定义

label标签为 input 元素定义标注或者说是标记。

label标签使用说明

1、label标签不会向用户呈现任何特殊效果。不过，label标签为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

2、label标签内的 for 属性应当与相关元素的 id 属性相同，意思就是label标签配合input标签使用时，label标签中的for属性和input标签内的id属性值要一样，否则就不会将选中这个input选项。

label标签使用实例Html部分代码

这一部分是笔者写的一段由form表单、label标签、input标签和简单的PHP自定义函数的代码实例，以下是html部分代码：

<!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>label标签使用实例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .form {
            width: 300px;
            height: 200px;
            margin: 30px;
            padding: 30px;
            background-color: #f8f8f8;
            border: 1px solid #333;
        }

        .form p,
        .form form input {
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div class="form">
        <p>请在下面选择您的性别：</p>
        <form action="label.php" method="post">
            <label for="man">man</label>
            <input type="radio" name="sex" id="man" value="man"><br>
            <label for="woman">woman</label>
            <input type="radio" name="sex" id="woman" value="woman"><br>
            <button type="submit">提交</button>
        </form>
    </div>
</body>

</html>

以下是前端页面显示效果图：

Html中label标签用法 使用label标签实例代码

在html代码中我使用了内联样式简单写了一些Css样式。

label标签使用实例PHP部分代码

<?php

function label(){
    echo $_POST['sex'];
};
label();
?>

在Html代码中form表单中我action填写的提交地址是label.php，以上代码就是label.php中的代码。

当我在Html中选择那个选项点击提交按钮后就最后跳转到label.php页面，label.php页面就会输出所选选项的值。比如我选择了man，PHP页面会输出什么值呢？

Html中label标签用法 使用label标签实例代码

最后输出的就是man。

对label标签使用的理解

在使用label标签时，必须与所需要实现联动的那一个标签相邻，并且label标签要在那个标签前面，label标签的for值必须要和相邻的那个标签的id值一样，这样才可以实现点击实现关联标记的效果。

label标签其实在前端中还是比较实用的一个标签，不仅可以通过Form表单实现选中选项功能，还能在前端移动端页面时点击导航菜单小图标，实现导航栏的显示与隐藏，本站移动端实用点击导航小图标然后弹出导航栏就使用了label和input标签实现的，后续将分享如何使用label和input标签实现点击导航菜单显示与隐藏导航栏。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。