HTML表單里的Label標(biāo)簽_XHTML教程
在Dreamweaver中,只要一加入表單或表單對(duì)象,文本框等等,就會(huì)在代碼中加入一個(gè)<label></label>,一直沒明白這個(gè)label是做什么的,今天正好看到了解釋:
Label 中有兩個(gè)屬性是非常有用的,一個(gè)是FOR、另外一個(gè)就是ACCESSKEY了。
FOR屬性
功能:表示Label標(biāo)簽要綁定的HTML元素,你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候,所綁定的元素將獲取焦點(diǎn)。
用法:<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性:
功能:表示訪問Label標(biāo)簽所綁定的元素的熱鍵,當(dāng)您按下熱鍵,所綁定的元素將獲取焦點(diǎn)。
用法:<Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox" type="text">
局限性:accessKey屬性所設(shè)置的快捷鍵不能與瀏覽器的快捷鍵沖突,否則將優(yōu)先激活瀏覽器的快捷鍵。
注釋
要將 LABEL 綁定到其它的控件,請(qǐng)將 LABEL 元素的 FOR 屬性設(shè)置為與該控件的 ID 相同。將 LABEL 綁定到控件的 NAME 屬性毫無(wú)用處。但是,要提交表單,你必須為 LABEL 元素所綁定到的控件指定NAME。
有兩種方法給所指定的快捷鍵添加下劃線。LABEL 元素的 rich text 支持可以在 ACCESSKEY 屬性所指定的快捷鍵字符兩側(cè)加上 U 元素。如果你更愿意使用樣式表(CSS)來應(yīng)用樣式,可以將該字符包含在 SPAN 中,并設(shè)置樣式為“text-decoration: underline”。
如果用戶單擊 LABEL,則會(huì)先觸發(fā) LABEL 上的 onclick 事件,然后觸發(fā)由 htmlFor 屬性所指定的控件上的 onclick 事件。按下 LABEL 設(shè)定的快捷鍵將設(shè)置焦點(diǎn)但并不觸發(fā) onclick 事件。
需要注意的地方:
1、標(biāo)簽不允許嵌套。
2、此元素在Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。
3、此元素是內(nèi)嵌元素。
4、此元素需要關(guān)閉標(biāo)簽。
元素示例代碼
下面的例子使用了 LABEL 元素和 ACCESSKEY 屬性設(shè)置文本框的焦點(diǎn)。
- <LABEL FOR="oCtrlID" ACCESSKEY="1">
- <SPAN style="text-decoration:underline;">名字</SPAN>: <font color="#999999">按ALT+1到文本框</font>
- </LABEL>
- <INPUT TYPE="text" NAME="TXT1" VALUE="阿會(huì)楠" SIZE="20" TABINDEX="1" ID="oCtrlID">
- HTML5 INPUT placeholder及兼容性處理
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁(yè)布局中必須要了解的幾個(gè)XHTML標(biāo)簽
- title和alt 標(biāo)簽介紹及其異同
- 淺析HTML標(biāo)簽strong和em的區(qū)別
- 說說XHTML中的alt屬性和title屬性
- Semantics語(yǔ)義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- 九個(gè)W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問題
- 請(qǐng)注意頁(yè)面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗(yàn)證HTML代碼穿越多重瀏覽器標(biāo)準(zhǔn)
- XHTML具有語(yǔ)義的標(biāo)簽:有關(guān)H1位置的討論
- HTML結(jié)構(gòu)更加清晰、規(guī)范,學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。
XHTML教程Rss訂閱Div+Css教程搜索
XHTML教程推薦
- XHTML入門學(xué)習(xí)教程:網(wǎng)頁(yè)Head和DTD
- A Link 鏈接的rel、target屬性詳解
- HTML 5 預(yù)覽
- Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼
- HTML和CSS在Flash中的應(yīng)用
- HTML表格標(biāo)記教程(43):表頭的垂直對(duì)齊屬性VALIGN
- 初學(xué)者接觸HTML了解一些HTML標(biāo)記(1)
- 超鏈接圖標(biāo)規(guī)范:提升文章的可閱讀性
- W3C公布最新的HTML5標(biāo)準(zhǔn)草案
- HTML表格標(biāo)記教程(16):標(biāo)題水平對(duì)齊屬性ALIGN
猜你也喜歡看這些
- CSS初級(jí)教程應(yīng)用CSS
- DIVCSS中 左右抖動(dòng)的解決方案
- CSS教程:詳解visibility屬性CSS控制內(nèi)容顯示
- 巧妙運(yùn)用CSS立刻改變鼠標(biāo)的樣式
- CSS:清除浮動(dòng)的最優(yōu)方法
- DIVCSS技巧:在MacromediaDreamWeaver中編寫CSS的一些習(xí)慣建議
- CSS布局實(shí)例:上中下三行,中間自適應(yīng)
- CSS網(wǎng)站布局技巧幾則總結(jié)
- 語(yǔ)義化H1標(biāo)簽
- 網(wǎng)頁(yè)設(shè)計(jì)關(guān)于WEB標(biāo)準(zhǔn)的相關(guān)問題匯總
- 相關(guān)鏈接:
- 教程說明:
XHTML教程-HTML表單里的Label標(biāo)簽
。