定义和用法

<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. 【AI】图像识别-物体检测-百度AI-EasyDL-NodeJS

    var https = require('https') var express = require('express'); var app = express(); var bodyParser = ...

  2. php git pull

    http://jondavidjohn.com/git-pull-from-a-php-script-not-so-simple/

  3. [Z]修炼成C++高手必看的C++书单

    增添于网上的一些书单: C++/OPP/OOD系列: 层级一:语法/语意(C++) [Lippman2000] Essential C++ Essential C++,by Stanley B. Li ...

  4. SpringMVC系列之主要组件

    一.组件说明 DispatcherServlet:前端控制器,用于请求到达前端控制器,由它调用其他组件处理用户的请求. HandlerMapping:处理器映射器,负责根据用户请求找到Handler( ...

  5. c++学习笔记——个单词转换的map程序详解

    实现功能:给定一个string,将它转换为另一个string.程序输入是两个文件,第一个文件保存转换规则,第二个文件为将要进行转换的文本. IDE:Windows7+VS2013 #include & ...

  6. JS-几大排序算法(更新中...)

    关于排序都会讲的名词:(我自己的理解) 时间复杂度: 指排序过程中,程序消耗的时间. 空间复杂度: 指排序过程中,程序所消耗内存的大小. 稳定: 如果两个值相等,a和b,a=b且a在b位置的左边,排序 ...

  7. Android手机端抓包方法

    抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...

  8. EGL 1.0 学习笔记

    http://hi.baidu.com/leo_xxx/item/b01b1fc29abff355ac00ef5c 基本概念 EGL是OpenGL ES与本地Window系统之间的桥梁.EGL创建渲染 ...

  9. Android studio Unable to start the daemon process

    Unable to start the daemon process.This problem might be caused by incorrect configuration of the da ...

  10. ndk编译android的lame库

    1.lame c库: https://github.com/intervigilium/liblame 下载后解压,进入目录,terminal里运行ndk-build即可 2.lame android ...