HTML label标签的一点理解

label标签为input元素定义标注。

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

其有两个属性for from。

for 规定绑定到哪一个表单元素上。（label元素的for属性值必须和相关表单元素的id属性值相同）

from规定字段所属的一个或多个表单。

例：常见的网页侧边栏弹出效果也可以完全用css动画实现。此时label标签就得到应用。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        p{

            padding: 10px 0;

        }

        body{

            min-height: 100%;

        }

        input{

            display: none;

        }

        aside{

            position: absolute;

            left: -200px;

            top: 0;

            bottom: 0;

            width: 200px;

            background-color: #BB6868;
　　　　　　　transition:0.25s ease-out;

            -webkit-transition:0.25s ease-out;

        }

        #sidebutton:checked + aside{

            left: 0;

        }

        #sidebutton:checked ~ #wrap{

            padding-left: 220px;

        }

        #wrap{

            margin-left: 20px;

            padding: 10px;
　　　　　　　transition:0.25s ease-out;

            -webkit-transition:0.25s ease-out;

        }

        #wrap>label{

            border:none;

            background-color: green;

            color: white;

        }

        #wrap>label:hover{

            background: #000;

        }

    </style>

</head>

<body>

    <input type="checkbox" id="sidebutton">

    <aside>导航栏</aside>

    <div id="wrap">

        <label for="sidebutton">Menu</label>

        <p>HTML和CSS实现侧边栏弹出效果</p>

    </div>

</body>

</html>

此例很好的展示了label标签的应用。通过label标签与input的结合在应用上css动画可以很好的解决网页上面的一些简单点击动画效果。（如ppt效果的幻灯片也可以用此实现）

巴特西

HTML label标签的一点理解

最新文章

热门文章