定义：<label> 标签为 input 元素定义标注（标记）。

label标签功能：关联input标签文本与表达元素，点击input标签文本时，如同点击表单元素一样。

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">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <!-- label标签是行内标签-->

            <label>用户名</label>

            <label>用户名</label>

        </form>

    </div>

</body>

</html>

for元素 表示与该label相关联的表单控件元素的id值，<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<!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">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <label for="user">用户名:</label>

            <input type="text" id="user" name="username">

        </form>

    </div>

</body>

</html>
label标签和input一同使用

    label for 与 id 做关联

    让用户点击用户名字段 也可以用户输入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!-- label标签和input一同使用

    label for 与 id 做关联

    让用户点击用户名 也可以用户输入

    -->

    <label for="username">用户名:</label>

    <input id='username' type="text">

</body>

</html>

 

前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  2. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  4. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  5. 前端 HTML body标签相关内容 常用标签 段落标签 p标签

    段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...

  6. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  7. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  8. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  9. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

随机推荐

  1. Mac: Alias[设置命令的别名]

    设置`.bash_profile` 1.打开终端`Terminal` 2.输入命令`cd ~`到用户主目录 $ cd ~ 3.生成一个新文件 $ touch .bash_profile 4.使用喜欢的 ...

  2. Android TextView文字空格

     表示全角空格, <string name="aaa">你好      啊</string> http://stackoverflow.com/questi ...

  3. 设计模式-行为型模式，python备忘录模式

    备忘录模式 备忘录模式(Memento Pattern)保存一个对象的某个状态,以便在适当的时候恢复对象.备忘录模式属于行为型模式. 介绍 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该 ...

  4. Win 10来袭，人工智能女将打头阵

    7月1日,微软小冰身"考官",其姐姐微软小娜(Cortana)解锁"科技动态"功能,为即将来临的Win 10打头阵. 中国IT产业界从来没有见过这样的阵势,难于 ...

  5. BackgroundWorker学习笔记

    1 简介 BackgroundWorker 类允许您在单独的专用线程上运行操作. 耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 似乎处于停止响应状态. 如果您需要能进行响 ...

  6. SQLAlchemy详细教程

    http://www.360doc.com/content/15/0914/16/360939_499094891.shtml

  7. 服务器中了蠕虫病毒Wannamine2.0小记

    近期用户反馈某台服务器总感觉性能不是很好存在卡顿,于是今天远程上去分析. 打开任务管理器发现CPU使用率非常低,内存使用也在接受范围内(10/64G).不过我有一个偏好就是不喜欢用系统自带的任务管理器 ...

  8. [转]sudo找不到命令：修改sudo的PATH路径

    sudo有时候会出现找不到命令,而明明PATH路径下包含该命令,让人疑惑.其实出现这种情况的原因,主要是因为当 sudo以管理权限执行命令的时候,linux将PATH环境变量进行了重置,当然这主要是因 ...

  9. python3 日志检索异常抛出异常 raise KeyError(key)，KeyError: 'formatters'

    原因分析,python3启动时,检索的不是项目包下的目录文件,所以日志文件必须指明路径.我原来的日志方式是: import logging.config log_path = "mlpcap ...

  10. mysql中将查询结果进行拼接处理及concat、group_concat的使用

    说明: 本文中使用的例子均在下面的数据库表tt2下执行: 一.concat()函数1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产 ...