關於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 新手小白的記錄