定义:<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. PHP最全笔记(一)(值得收藏,不时翻看一下)

    PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任 ...

  2. [DL] *Deep Learning for Industry - Wang Yi

    Link: 分布式机器学习系列讲座 - 04 Deep Learning WANG Yi. https://cxwangyi.wordpress.com/ https://www.zhihu.com/ ...

  3. [Python] 07 - Statements --> Functions

    故事背景 一.阶级关系 1. Programs are composed of modules.2. Modules contain statements.3. Statements contain ...

  4. HttpSenderUtil向指定 URL 发送POST方法的请求

    package com.founder.ec.common.utils; import java.io.BufferedReader; import java.io.IOException; impo ...

  5. websql的使用/phonegap操作数据库 sqlite

    对websql的常用操作进行了一个封装,项目是基于phonegap的,不过phonegap默认已经集成了数据库操作的插件,所以无需再配置什么,直接用就可以了: /** *数据库操作辅助类,定义对象.数 ...

  6. 【消灭代办】第1周 - 敏感词判断、图片206、parseInt

    11.16代办一:[敏感词判断] 代办描述: 一堆字符串组成的数组,给你一个字符串,让你去查找这个字符串是否在这个数组当中? 关键考点: 数组匹配,看一个数组中有没有这个字符串. 解决思路: 遍历数组 ...

  7. G - SDOI

    The Annual National Olympic of Information(NOI) will be held.The province of Shandong hold a Select( ...

  8. 3D Slicer 4.7.0 VS 2010 Compile 编译

    花了将近一周的时间的,终于在VS2010成功的编译了最新版的3D Slicer 4.7.0,感觉快要崩溃了.Slicer用了20多个外部的库,全都要一起编译,完整编译一次起码要七八个小时,光VS的Ou ...

  9. 7.26-STOIRegularMatch-08-#14

    A-3 SRM 08 描述 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足  且 . 输入格式 一行,一个 01 串 输出格式 一行,字母 ...

  10. [No0000159]C# 7 中的模范和实践

    关键点 遵循 .NET Framework 设计指南,时至今日,仍像十年前首次出版一样适用. API 设计至关重要,设计不当的API大大增加错误,同时降低可重用性. 始终保持"成功之道&qu ...