㈠標籤的定義與用法
⑴標籤為 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
>
![](https://pic.w3help.cc/72d/3c408d75e82af1e38c6abf05fcca8.jpeg)
★**分析:
⑴設定了 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相關內容
1 em,dbca,netca,netmgr出現亂碼方案 cd oracle home jre lib mv font.properties font.properties.bak mv font.properties.zh font.properties em,dbca,netca,netmgr詳...
JVM相關內容
本地 native code 每個因素對記憶體占用的影響又會隨著應用程式 執行環境和系統平台的不同而變化,那怎樣計算總的記憶體佔用量?是的,想得到乙個準確的數字不是那麼容易,因為 你很難控制本地 native 部分。你能控制的部分只有堆大小 xmx,類占用的記憶體 xx maxpermsize,還有...
指標相關內容
1.指標是變數,佔4位元組,存放的是位址 2.指標型別與零值比較 if n null 或者if n null 3.野指標 int p 空指標 int p null 避免野指標 以char型別為例 char p char mallloc sizeof char 10 要包含標頭檔案 include 使...