標籤的相關內容

㈠標籤的定義與用法

⑴標籤為 input 元素定義標註（標記）。

⑵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 
.input-group>input 
.input-group input::placeholder 
.input-group>input:focus 
.input-group>label 
.input-group>input:focus ~ label 
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:

標籤的相關內容

ORACLE相關內容

JVM相關內容

指標相關內容

標籤的相關內容

ORACLE相關內容

JVM相關內容

指標相關內容

相關推薦