label標簽為input元素定義標注。
label元素不呈現任何特殊效果。不過他為鼠標用戶改進了可用性。如果你在label元素內點擊文本就會觸發此控件。就是說當用戶選擇該標簽是，瀏覽器就會自動的將焦點轉到與表單相關的控件上來。
其有兩個屬性for from。
for 規定綁定到哪一個表單元素上。（label元素的for屬性值必須和相關表單元素的id屬性值相同）
from規定字段所屬的一個或多個表單。
例：常見的網頁側邊欄彈出效果也可以完全用css動畫實現。此時label標簽就得到應用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p{ padding: 10px 0; } body{ min-height: 100%; } input{ display: none; } aside{ position: absolute; left: -200px; top: 0; bottom: 0; width: 200px; background-color: #BB6868;
transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #sidebutton:checked + aside{ left: 0; } #sidebutton:checked ~ #wrap{ padding-left: 220px; } #wrap{ margin-left: 20px; padding: 10px;
transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #wrap>label{ border:none; background-color: green; color: white; } #wrap>label:hover{ background: #000; } </style> </head> <body> <input type="checkbox" id="sidebutton"> <aside>導航欄</aside> <div id="wrap"> <label for="sidebutton">Menu</label> <p>HTML和CSS實現側邊欄彈出效果</p> </div> </body> </html>
此例很好的展示了label標簽的應用。通過label標簽與input的結合在應用上css動畫可以很好的解決網頁上面的一些簡單點擊動畫效果。（如ppt效果的幻燈片也可以用此實現）