label标签

最新推荐文章于 2024-07-19 15:20:42 发布

程序员小成在线买房

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量152

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/qq_40432598/article/details/139400401

版权

01、label标签

概述

label标签页属于：form元素的成员之一，它有啥意义呢？它主要用来修饰文本和form元素的指向和体验问题。我们只需要把文本和form元素使用label标签包裹，就可以产生一个奇妙的化学反应。就是：我们点击文本页可以让文本获取焦点。语法如下：

# 方式1
<label>文本：<input></label>
# 方式2
<label for="username">文本：<input type='text' id="username"></label>

代码

<!--重置按钮-->
<label for="username">用户名：<input  type="text" id="username" name="username" ></label>
<label for="password">密码：<input  type="text" id="password" name="password" ></label>

效果：

<!--文档类型：主要定义页面支持的标签类型，以及后续每个标签的命名，特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部：主要用来设置浏览器解析页面时候的编码，头信息，页面描述、关键字,css样式列表引入和js引入，响应式规则等-->

<head>
    <!--告诉浏览器解析网页的内容使用utf-8进行编码-->
    <meta charset="utf-8">
    <!--响应式规则-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--设置关键字和描述-->
    <meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴">
    <meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区.">
    <!--设置图标-->
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <!--给浏览器的标签上显示标题，也可以作为网页收藏的文字-->
    <title>form表单-label标签学习-学相伴</title>
</head>

<body>

    <div class="container">
        <h1>学相伴登录</h1>
        <form action="xxx" method="get">
            <p><label>账号：<input type="text" name="username" /></label></p>
            <p><label>密码：<input type="password" name="password" /></label>
            </p>
            <p>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </p>
        </form>
    </div>
    <hr>
    <div class="container">
        <h1>学相伴登录</h1>
        <form action="xxx" method="get">
            <p><label for="uname">账号：<input type="text" name="username" id="uname" /></label></p>
            <p><label for="pwd">密码：<input type="password" name="password" id="pwd"/></label>
            </p>
            <p>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </p>
        </form>
    </div>


</body>

</html>