HTML5 label 顯式、隱式聯系

label 標簽有兩個屬性，分別是 for 與 accesskey。

for

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.

在相同文檔中作為標簽元素的一個可以被標記的表單相關的元素ID。在該文檔中符合該屬性值的第一個ID的元素就會被標記為該標簽的元素。

accesskey

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

The accesskey global attribute provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters (one single Unicode code point). The browser uses the first one that exists on the computer keyboard layout.

該快捷鍵的全局屬性提供了一個為當前元素生成一個鍵盤快捷鍵的提示。該屬性由一個以空格分隔的字符串組成（一個單一的Unicode 碼點）。瀏覽器會使用計算機鍵盤布局上存在的第一個。

The operation to activate the accesskey depends on browser and its platform.

激活快捷鍵的操作視瀏覽器和它所在的操作系統而定。

Note that Firefox can customize the required modifier key by user’s preferences.

注意：火狐瀏覽器可以通過用戶偏好來自定義所需的輔助按鍵。

補充說明

要將 label 綁定到其它的控件，請將 label 元素的 for 屬性設置為與該控件的 id 相同。如果用戶單擊 label，會先觸發 label上的 onclick 事件，然后觸發由 for 屬性所指定的控件上的 onclick 事件。按下 label 設定的快捷鍵將設置焦點但并不觸發 onclick 事件。

代碼實戰

點擊文字，輸入框獲取焦點

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

可以看到

顯式聯系時，用戶單擊，會觸發對應的元素的onclick事件

隱式聯系時，用戶單擊，對應的元素只是取得焦點，并不會觸發的onclick事件

HTML HTML5

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。