HTML表單里的Label標簽_XHTML教程
在Dreamweaver中,只要一加入表單或表單對象,文本框等等,就會在代碼中加入一個<label></label>,一直沒明白這個label是做什么的,今天正好看到了解釋:
Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。
FOR屬性
功能:表示Label標簽要綁定的HTML元素,你點擊這個標簽的時候,所綁定的元素將獲取焦點。
用法:<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性:
功能:表示訪問Label標簽所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將獲取焦點。
用法:<Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input 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 事件。
需要注意的地方:
1、標簽不允許嵌套。
2、此元素在Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。
3、此元素是內嵌元素。
4、此元素需要關閉標簽。
元素示例代碼
下面的例子使用了 LABEL 元素和 ACCESSKEY 屬性設置文本框的焦點。
- <LABEL FOR="oCtrlID" ACCESSKEY="1">
- <SPAN style="text-decoration:underline;">名字</SPAN>: <font color="#999999">按ALT+1到文本框</font>
- </LABEL>
- <INPUT TYPE="text" NAME="TXT1" VALUE="阿會楠" SIZE="20" TABINDEX="1" ID="oCtrlID">
- HTML5 INPUT placeholder及兼容性處理
- 淺析HTML與javascript中常用編碼
- CSS網頁布局中必須要了解的幾個XHTML標簽
- title和alt 標簽介紹及其異同
- 淺析HTML標簽strong和em的區別
- 說說XHTML中的alt屬性和title屬性
- Semantics語義是Html Xhtml是否真正符合標準的重要部分
- 九個W3C XHTML1.0及CSS標準認證需要注意的問題
- 請注意頁面head區域的編碼是不是規范
- HTML validate - 驗證HTML代碼穿越多重瀏覽器標準
- XHTML具有語義的標簽:有關H1位置的討論
- HTML結構更加清晰、規范,學習HTML5優化結構的思路。
- 相關鏈接:
- 教程說明:
XHTML教程-HTML表單里的Label標簽。