lable在html中,html中的label
html中设置有和没有的label标签
本篇文章主要的介绍的是关于HTML中的label标签设置高度的方法。还有关于HTML label标签的使用方法介绍。下面就让我们一起来看这篇关于html label标签的文章吧
首先我们先来看看在html中label标签设置高度的方法：
html中标签label/label 为表单元素定义文字标注，label属于内联元素，元素前后没有换行符，并且不可以设置高度。
若想要设置高度，需要设置label的display属性，默认属性是inline，此时元素会被显示为内联元素，元素没有换行符，只需要在inline后面加上block，即display:inline-block。此时label改为块元素，现在就可以修改label高度了。
HTML表单元素之
label标签表示用户界面中某个元素的说明，提高其他表单元素(如input /select等标签)的可及性。
与input元素进行关联，点击label元素==点击input元素。点击label元素之后，input元素会获取焦点。
index.html
运行截图：
1. 不要在label内放置可交互的元素 ：如a标签、button标签、input type='button'，如果这样做，将会起到反作用。
2. 在label标签中不要添加 标题元素 ： 因为标题元素通常用于辅助导航，会干扰辅助技术。
标签有什么用
label标签在HTML中的作用是定义input元素的标注。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
label 标签的 for 属性应当与相关元素的 id 属性相同。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
扩展资料
特点
1、由尖括号包围的关键词，比如 html
2、通常是成对出现的，比如 div 和 /div
3、标签对中的第一个标签是开始标签，第二个标签是结束标签；
4、开始和结束标签也被称为开放标签和闭合标签。
5、也有单独呈现的标签，如：img src="百度百科.jpg" /等。
6、一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如h1标题/h1和 input type="text" value="按钮" /。
7、网页的内容需在html标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在head标签中，而网页需展示的内容需嵌套在body标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
参考资料来源：百度百科-html标签
HTML代码中的label标签的作用是什么？
Label
中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：Label
FOR="InputBox"姓名/Labelinput
ID="InputBox"
type="text"
ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：Label
FOR="InputBox"
ACCESSKEY＝"N"姓名/Labelinput
ID="InputBox"
type="text"
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
注释
要将
LABEL
绑定到其它的控件，请将
LABEL
元素的
FOR
属性设置为与该控件的
ID
相同。将
LABEL
绑定到控件的
NAME
属性毫无用处。但是，要提交表单，你必须为
LABEL
元素所绑定到的控件指定
NAME。
有两种方法给所指定的快捷键添加下划线。LABEL
元素的
rich
text
支持可以在
ACCESSKEY
属性所指定的快捷键字符两侧加上
U
元素。如果你更愿意使用样式表(CSS)来应用样式，可以将该字符包含在
SPAN
中，并设置样式为“text-decoration:
underline”。
如果用户单击
LABEL，则会先触发
LABEL
上的
onclick
事件，然后触发由
htmlFor
属性所指定的控件上的
onclick
事件。按下
LABEL
设定的快捷键将设置焦点但并不触发
onclick
事件。
标签不允许嵌套。
此元素在
Internet
Explorer
4.0
及以上版本的
HTML
和脚本中可用。
此元素是内嵌元素。
此元素需要关闭标签。
元素示例代码
下面的例子使用了
LABEL
元素和
ACCESSKEY
属性设置文本框的焦点。
This
example
uses
the
LABEL
element
and
the
ACCESSKEY
attribute
to
set
focus
on
a
text
box.
Html代码
1.LABEL
FOR="oCtrlID"
ACCESSKEY="1"
2.!--SPAN
style="text-decoration:underline;"1/SPAN:
Press
Alt+1
to
set
focus
to
textbox--
3./LABEL
4.INPUT
TYPE="text"
NAME="TXT1"
VALUE="binding
sample
1"
5.SIZE="20"
TABINDEX="1"
ID="oCtrlID"
html中label是块级标签吗?
在页面布局中,一般会将html元素分为两种，即块级元素和行内元素。label为行内元素，不是块级元素。块级元素默认占一行高度，一行内有一个块级元素后一般无法添加其他元素，除非添加了float浮动。两个块级元素连续放置时，会在另起一行。块级元素一般可嵌套块级元素或行内元素。最直观的体现如下：
!DOCTYPE?html
html
head?
meta?charset="utf-8"?
title测试label标签/title?
/head
body
p?style="border-bottom:1px?solid?#ccc;color:red;padding-bottom:10px;margin-bottom:40px"测试label标签/p
label?for="male"label标签/label
span?style="background-color:#ccc;padding:10px;margin-right:10px"分割/span
label?for="male"label标签/label
/body
/html
显示效果：
可见，两个label并没有换行显示。
HTML 表单之label标签介绍
转自： HTML 表单之label标签介绍
label标签介绍
label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。
label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。
主要使用场景
label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。如下图，点击文字和点击前面的单选框效果相同，即加大了控件的可点击区域较大，因为点击标签或控件都将激活控件，这对于复选框和单选框特别有用。
label标签和特定表单元素关联方式
label标签的关联方式主要有两种，显示关联和隐式关联：
显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。如：
效果图：
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。如下：
label点击我可以使文本框获得焦点
input type='text' name='theinput' id='theinput'
/label
效果图如下，点击文字便能是文本框获得焦点：
显示关联和隐式关联的优缺点：
显式关联优点：
可以减少标签嵌套层数
label标签和表单可以在不同的位置
显示关联缺点：
控件需要定义id属性
label标签和表单控件不利于作为一个整体来控制
隐式关联优点：
控件无需定义id
标签和控件方便作为一个整体控制
隐式关联缺点：
增加了标签嵌套层数
不能将标签和关联控件放到不同的位置
以上是个人对两种方式的看法，使用时可按需要选择显示或隐式。
label标签的浏览器支持及可关联的表单元素
所有主流浏览器都支持label标签。Safari 2 或更早的版本不支持label标签。
能使用显示关联的表单元素有：
input type="text" 文本框，点击标签时关联的文本框获得焦点。
input type="checkbox" 复选框，点击标签时选中或取消选中复选框。
input type="radio" 单选框，点击标签时选中单选框。
input type="file" 文件上传，点击标签时打开文件选择对话框。
input type="password" 密码框，点击标签时密码框获得焦点。
textarea 文本域，点击标签时文本域获得焦点。
select 下拉框，点击标签时，下拉框获得焦点，不过并不展开下拉框选项。
label标签的form属性
form 属性指定label标签元素所属的表单。如下，虽然label标签在myform表单外，但仍属于myform表单。如下：
form action="" id="myform"
input type="radio" name="sex" id="male" value="male"
label for="female"女/label
input type="submit" value="提交"
/form
label for="male" form="myform"男/label
效果图如下，点击”男”同样可以选中第一个单选框
注：
该form属性已于2016年4月28日从HTML规范中删除。但是，脚本仍然可以访问只读HTMLLabelElement.form属性; 它返回标签的关联控件是成员的形式，或者null如果标签未与控件相关联或控件不是表单的一部分。