label标签使⽤详解
label：
The <label> tag defines a label for an input element.
label⽤来为 input 元素定义标注（标记）。
The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.
label 元素不会向⽤户呈现任何特殊效果。不过，它为⿏标⽤户改进了可⽤性。如果您在 label 元素内点击⽂本，就会触发此控件。就是说，当⽤户选择该标签时，浏览器就会⾃动将焦点转到和标签相关的表单控件上。
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
Optional Attributes
DTD indicates in which the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute Value DescriptionDTD
element_id Specifies which form element a label is bound toSTF
Standard Attributes
The <label> tag supports the following standard attributes:
Attribute Value DescriptionDTD
accesskey character Specifies a keyboard shortcut to access an element STF class classname Specifies a classname for an element STF
dir rtl
ltr
Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF lang language_code Specifies a language code for the content in an element STF style style_definition Specifies an inline style for an element STF title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML
documents
STF
More information about .
Event Attributes
The <label> tag supports the following event attributes:
Attribute Value Description DTD
onblur script Script to be run when an element loses focus STF onclick script Script to be run on a mouse click STF ondblclick script Script to be run on a mouse double-click STF onfocus script Script
to be run when an element gets focus STF onmousedown script Script to be run when mouse button is pressed STF onmousemove script Script to be run when mouse pointer moves STF onmouseout script Script to be run when mouse pointer moves out of an element STF onmouseover script Script to be run when mouse pointer moves over an element STF onmouseup script Script to be run when mouse button is released STF onkeydown script Script to be run when a key is pressed STF onkeypress script Script to be run when a key is pressed and released STF onkeyup script Script to be run when a key is released STF
Browser Support
The <label> tag is supported in all major browsers.
关于label的兼容性。如果label中的是⽂字那么ie和firefox都是可以⽀持的。如果是图⽚firefox⼯作正常，但是ie不可以。
解决⽅案：
1. 传统的⽅法⽤js:
<script type="text/javascript">
var ElementsByTagName('label');
for (i=0;i<label.length;i++) {
label[i].onclick = function () {
var Attribute('for')?Attribute('for'):Attribute('HTMLfor')+'';
}
}
2.  将图⽚作为label的背景
3. ⽤span来覆盖整个li
<form action="">
<ul>
<li>
<label for="one"><img src="hl_logo.png" alt=""></label>            <input type="text" id="one">
</li>
<li>
<label for="two"><img src="hl_logo.png" alt=""></label>            <textarea cols="10" rows="3" id="two"></textarea>
</li>
<li>
<label for="three"><img src="hl_logo.png" alt=""></label>            <input type="checkbox" id="three">
</li>
<li>
<label for="four"><img src="hl_logo.png" alt=""></label>            <input type="radio" name="foo" id="four">
</li>
<li>
<label for="five"><img src="hl_logo.png" alt=""></label>            <input type="radio" name="foo" id="five">
</li>
</ul>
</form>
li {
overflow: hidden;
display: inline-block; /* gives layout for IE float clearing */
}
li { display: block; }
label {
float: left;
position: relative;
textarea中cols表示position: relative;
overflow: hidden;
}
label span {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 500px;
background: url(hl_logo.png) no-repeat -5000px; /* required for IE click bug fix */ }
例⼦来⾃于：haslayout/css/Image-Label-Focus-Bug

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。