在我啃了一遍書本之後，開始了在慕課看視訊的過程，從最開始的HTML+CSS的基礎課程看起，在第5-9小節講到了form表單的label標籤，

         首先看一下慕課的講解：

       label 標籤不會向用戶呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點選文字，就會觸發此控制元件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上（就自動選中和該 label標籤相關連的表單控制元件上）。然後她提到了一個特別注意：

注意：標籤的 for 屬性中的值應當與相關控制元件的 id 屬性值一定要相同。

        再來看一下W3CSchool對於label標籤的定義和用法：

         <label> 標籤為 input 元素定義標註（標記）。

         label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。

          同樣的，W3CSchool對於label標籤的用法中也提到了<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。那麼這一要求到底是起到什麼作用的呢，在慕課的講解中並沒有一個直觀的解釋，但是在W3CScho中給了一個解釋："for" 屬性可把 label 繫結到另外一個元素。請把 "for" 屬性的值設定為相關元素的 id 屬性的值。

在這裡引起我注意的就是繫結這個詞。以慕課上的的程式碼為例子

你對什麼運動感興趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="jog" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="climb" /><br />
  <label for="basketball">籃球</label>
  <input type="checkbox" name="basketball" id="basketball" />
 

          這組程式碼實際的作用是，在我的滑鼠單擊慢跑時，瀏覽器會自動的幫我把焦點相應的轉到與慢跑的label標籤for屬性的值相同的id屬性所在的input標籤，實際的顯示效果就是如下圖，在單擊慢跑時，它右側的複選框被選中。

在當時，我主觀形象的認為，繫結就是將這一行構成一個整體，點選這一行的哪個部分都視作在點選複選框。然而後來我認識到繫結不應該是這種顯式的構造整體，所以我又寫了下面這段程式碼：

你對什麼運動感興趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="climb" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="jog" /><br />
  <label for="basketball">籃球</label>
  <input type="checkbox" name="basketball" id="basketball" />

         通過這兩組程式碼的對比，應該可以比較明顯的看出繫結這個事件的具體表現。

        雖然label這個標籤的使用是非常簡單的，但也希望有人能夠通過我的這篇博文，充分認識到for屬性的值與id屬性值相同的必要，避免由於這點小的失誤造成程式碼的錯誤。

        作為作為剛剛走在前端這條路上的新手，雖然可能很多人都知道了label標籤的正確用法，我還是決定下下來，作為自己學習路上的見證。