定义和用法

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

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

实例

带有两个输入字段和相关标签的简单 HTML 表单：

<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

<br />

<label for="female">Female</label>

<input type="radio" name="sex" id="female" />

</form>

例如：

<!DOCTYPE HTML>
<html>
<body>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

以上代码会显示如上图所示的效果，点击male和female或者两个圆点的时候，都能起到同样的效果

也就是通过label和它的for属性，把操作方式联系在了一起

html中label及加上属性for之后的用法的更多相关文章

  1. python中string模块各属性以及函数的用法

    任何语言都离不开字符,那就会涉及对字符的操作,尤其是脚本语言更是频繁,不管是生产环境还是面试考验都要面对字符串的操作.     python的字符串操作通过2部分的方法函数基本上就可以解决所有的字符串 ...

  2. 牛人总结python中string模块各属性以及函数的用法，果断转了，好东西

    http://blog.chinaunix.net/uid-25992400-id-3283846.html http://blog.csdn.net/xiaoxiaoniaoer1/article/ ...

  3. shell脚本中的逻辑判断 文件目录属性判断 if特殊用法 case判断

    case判断 • 格式 case  变量名 in                       value1)                           command            ...

  4. 关于<label>的for属性的简单探索

    在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话, It is considered best practice to se ...

  5. WinForms中的Label的AutoSize属性

    当大量使用UserControl组合UI时,如果更改了Label的Text属性,Label.AutoSize属性会影响UserControl的OnLoad事件的发生顺序; public overrid ...

  6. WPF中Label使用StringFormat

    1. 在WPF中Label的Content有时内容只需要改变个别数字,而不需要所以内容都修改,这时候就要使用StringFormat, 如: <Label Content="I hav ...

  7. HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  8. C#在WinForm开发中Label换行方法

    很多朋友都会在开发WinForm中遇到Label要显示的内容太长,但却不能换行的问题.这里我总结了几种方法,供大家参考. 第一种是把Label的AutoSize属性设为False,手动修改Label的 ...

  9. [原创]java WEB学习笔记59：Struts2学习之路---OGNL,值栈，读取对象栈中的对象的属性，读取 Context Map 里的对象的属性，调用字段和方法，数组，list，map

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. 【Cesium】物体显示

    viewer.zoomTo(entity1); viewer.zoomTo(viewer.entities); viewer.camera.flyTo({ destination: Cesium.Ca ...

  2. Linux应急响应（三）：挖矿病毒

    0x00 前言 ​ 随着虚拟货币的疯狂炒作,利用挖矿脚本来实现流量变现,使得挖矿病毒成为不法分子利用最为频繁的攻击方式.新的挖矿攻击展现出了类似蠕虫的行为,并结合了高级攻击技术,以增加对目标服务器感染 ...

  3. Web暴力破解--前端JS表单加密进行爆破

    0x01 前言 常见的js实现加密的方式有:md5.base64.shal,写了一个简单的demo作为测试. 0x02 代码 login.html <!DOCTYPE HTML> < ...

  4. [Maven]Maven中的一些基本概念

    Pom文件中的groupId.artifactId.version和name,这三个元素定义了一个项目的基本的坐标,在Maven世界中,任何的jar.pom或者war都是基于这些基本的坐标惊醒区分. ...

  5. requests 安装

    requests 是用来发送 HTTP 请求的一个库,requests 是对 urllib 和 urllib2 进行封装的一个模块,用来取代 urllib 和 urllib2,可以使用以下两种方法安装 ...

  6. Unity Animation需要Inspector右键打开Debug模式，然后勾选Legacy，最后再Inspector右键打开Normal

  7. Android文件系统编译出错记录

    错误1: 注意:external/protobuf/java/src/main/java/com/google/protobuf/GeneratedMessageLite.java 使用了未经检查或不 ...

  8. CentOS7--su和sudo

    在某些情况下, 以root用户身份访问系统有潜在危险,并可能导致系统和数据损害.我们可以用setuid程序,例如su和sudo解决. su命令 [app01rot@app-01 ~]$ su - ro ...

  9. 关于PullToRefreshView bug 的修复

    前几天网友yufengzungzhe@163.com指出PullToRefreshView的一个bug.当时麦洛还没有注意到,现在麦洛已经利用修复了.其实解这个bug也不难. 只要在下面这个方法做一点 ...

  10. es 5.0 拼音分词器 mac

    安装方法和ik中文分词器一样, 先下载: https://github.com/medcl/elasticsearch-analysis-pinyin 执行: mvn package; 打包成功以后, ...