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 HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
Attribute | Value | DescriptionDTD | |
---|---|---|---|
for | 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 Standard Attributes .
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 label=document.getElementsByTagName('label');
for (i=0;i<label.length;i++) {
label[i].onclick = function () {
var labelFor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
document.getElementById(labelFor).click();
}
}
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;
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 */
}
例子來自於:http://haslayout.net/css/Image-Label-Focus-Bug