關於label標籤的做用

label標籤的定義和用法：

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

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

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

　　　　　　　　　　　　　　　　——W3school的解釋

常常見到這樣的表單元素，好比：點擊一張圖片能夠從新更換圖片，或者點擊下圖所示的複選框

    

以前個人作法是寫一個input標籤，設置type爲file或者checkbox，設置大小爲想要的大小，而後把想要的效果好比上圖所示或者一個圖片，放在input標籤的下面，使input標籤恰好能夠覆蓋住圖片，

最後把input設置成visibility：hidden，因此此時點擊的雖然是圖片，可是實際上點擊的是input框，這樣形成的假象就是點擊圖片實現上傳更新。（這樣的實現是挺蠢的OTZ）

後來偶然瞭解到label標籤的做用，才知道label元素和對應id的input元素是互相綁定的，也就是說點擊label就至關於點擊了input，那這樣就好辦了，就不須要營造假象了

因此如今代碼能夠這麼寫：

（1）複選框樣式：

主要HTML代碼：

<label class="demo"> 
    <input type="checkbox" name="">
    <i class="fa fa-check icon-selected"></i>
    <em>多選框1</em>
</label>

主要CSS代碼：

input{ display: none;
} input:checked~em{ color: #c6636c; border:1px solid #c6636c;
}

選中以前的樣式和選中以後的樣式

 

這樣的用法就顯得高級多啦

（2）上傳圖片樣式：

HTML代碼：

<label class="demo"> 
    <p>點擊上傳圖片</p>
    <input type="file" name="">
    <em></em>
</label>

CSS代碼：

input{ display: none;
} em{ display: inline-block; width: 175px; height: 173px; background: url(./add.png);
}

點擊下圖所示的圖片以後，即可以調用file文件實現圖片的選擇和上傳，以後在進行其餘操做

 

by 新手小白的記錄