HTML lable标签

一、HTML < label> 定义与用法

< label> 标签为 input 元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
for属性可把 label 绑定到另外一个元素，< label> 标签的 for 属性应当与相关元素的 id 属性相同。

二、< label>和特定表单元素关联方式
1.显示关联
通过label标签的for属性，显式与另一个表单控件关联，for属性的值必须是与label标签在同一文档中的可标记表单元素的id
注：是id而不是name

爱好：
<input type='checkbox' name='basket' id='basketball'>
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>
<label for="football">足球</label>

优点：减少标签嵌套层数；label标签和表单可以在不同的位置
缺点：控件需要定义id属性；label标签和表单控件不利于作为一个整体来控制

2.隐式关联
直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效

<label>点击我可使文本框获得焦点<input type='text' name='theinput' id='theinput'>
</label>

优点：控件无需定义id；标签和控件方便作为一个整体控制
缺点：增加了标签嵌套层数；不能将标签和关联控件放到不同的位置

三、HTML 5 < label> form 属性

form 属性规定 label 所属的一个或多个表单。
form 属性的值必须是其所属的表单的 id。
如需引用一个以上的表单，使用空格分隔的列表。

<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get" id="genderform"><label>Male<input type="radio" name="sex" id="male" value="male" /></label><br /><label>Female<input type="radio" name="sex" id="female" value="female"  /></label><input type="submit" value="提交" />
</form><p>用于第一个单选按钮的 label 位于 form 元素之外，但仍然是表单的一部分。请尝试点击这个 label，可以切换到 radio 控件。</p><label for="male" form="nameform">Male</label>
</body>
</html>

HTML lable标签相关推荐

lable标签的用途
lable标签的用途:为iput输入框元素定义标注: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选 ...
解决Android Studio默认AppTheme 没有lable标签，不显示等问题
解决Android Studio默认AppTheme 没有lable标签,不显示等问题参考文章: (1)解决Android Studio默认AppTheme 没有lable标签,不显示等问题 (2) ...
关于lable/lable标签的理解
学完HTML和CSS,再去学习bootstrap的时候,在关于表格样式的时候,常常会看到<lable></lable>,然而在HTML中,给人的感觉好像是没有什么用,因为它好像 ...
lable标签的妙用
最近在设计网页时,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释: Label ...
lable标签的宽度_html中的label标签怎么设置高度？label标签的使用方法介绍
本篇文章主要的介绍的是关于HTML中的label标签设置高度的方法.还有关于HTML label标签的使用方法介绍.下面就让我们一起来看这篇关于html label标签的文章吧首先我们先来看看在ht ...
Bootstrap 内联标签和徽章，lable标签
bootstarp 经常使用 bage ,它可以有不同颜色的 <div class="container"> <div class="row&q ...
android lable标签,android:label说明
文章目录 1. 说明 android:label 用于app 在切换activity的时候,自动更换左上角的显示 2. 代码架构 3. String.xml 字符串资源文件 My Applicatio ...
lable、ul、ol、dl和table、fieldset标签
lable标签有时候,我们希望点击文件的时候,鼠标的光标自动跳到输出框中.这需要使用lable功能 <div><label for="name2">姓名: ...
零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签无序列表有序列表 ...

HTML lable标签

HTML lable标签相关推荐

最新文章

热门文章