㈠<label>標簽的定義與用法
⑴<label> 標簽為 input 元素定義標注（標記）。
⑵label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
⑶<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
㈡用途
在web項目中，有登陸/注冊模塊這個，此模塊的主體部分就是一個form表單，這個form表單包含兩個重要input組（用戶名/密碼），每個input組都包含label和input。在此重點就是美觀的布局啦。
㈢label+input的布局方案
⑴將label和input（palcholder關鍵字提示）分為上下兩部分
⑵將label和input（palcholder關鍵字提示）分為左右兩部分（label占據一定的寬度，而label中的字體采用左對齊，右對齊，兩端對齊這三種常見的方案），如微博登陸
⑶label和input（palcholder關鍵字提示）還是分為左右兩部分，不同的是label中的字體使用圖標代替，如：segment fault社區登陸頁面等
⑷只包含input（palcholder關鍵字提示），如手機淘寶的登陸頁面
⑸只顯示input（palcholder關鍵字提示），而label采用浮動並隱藏，當觸發input的焦點事件時label顯示。如參考JVFloatLabeledTextField
㈢label vs placholder的區分
label: 描述表單元素的角色，用來指定input的是唯一字段名稱
placeholder: 它提示用戶輸入內容的格式
㈣用偽類實現的浮動label的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用偽類實現的浮動label</title> <style> .input-group { position: relative; margin: 20px; font-size: 16px; } .input-group>input { display: block; box-sizing: border-box; width: 100%; padding: 1em; font-size: 16px; line-height: 1.0; border: none; border-bottom: 1px solid #cdcdcd; border-radius: 0.4em; transition: box-shadow 0.3s; } .input-group input::placeholder { font-style: italic; color: #cdcdcd; } .input-group>input:focus { outline: none; box-shadow: 0.2em 0.8em 1.6em #cdcdcd; } .input-group>label { position: absolute; bottom: 0; left: 1em; z-index: -1; visibility: hidden; color: #555555; opacity: 0; transform-origin: 0 0; transform: translate3d(0, 0, 0) scale(0); transition: opacity 0.3s, visibility 0.3s, transform 0.3s, z-index 0.3s; } .input-group>input:focus ~ label { z-index: 1; visibility: visible; opacity: 1; transform: translate3d(0, -2.4em, 0) scale(1); } </style> </head> <body> <!-- 賬號 --> <div class="input-group"> <input type="text" id="username" placeholder="用戶名/郵箱/卡號"> <label for="username">賬號</label> </div> <!-- 密碼 --> <div class="input-group"> <input type="text" id="password" placeholder="請輸入6~8位密碼"> <label for="password">密碼</label> </div> </body> </html>
效果圖：
★代碼分析：
⑴設置了 label 的位置（posiion: absolute），並定義了它的層級（z-index: -1）， 顯隱性為（visibility: hidden），透明度（opacity: 0）;
⑵設置了input的 placeholder樣式，可使用偽元素 ::placeholder 設置其樣式；
⑶設置了一個過渡動畫效果，當input元素標簽獲得焦點時，使用偽類 :focus 定義了input元素標簽獲得焦點時的陰影樣式（box-shadow）和輪廓樣式（outline）。
⑷在定義 label 樣式的集合內，添加它的初始 transform 形變效果，同時設置 transition 過渡效果樣式 ，然后定義當 input 獲得焦點時，它的兄弟元素 label 的樣式即可。
⑸這種label浮動的效果是當用戶輸入內容時（也就是placeholder消失時），label開始浮動。
參考：ttps://blog.csdn.net/weixin_41559723/article/details/83045249