Form

Component 的 Form 提供更多樣的組件與排列方式。所有表單排版組件的類別名稱前綴詞皆為 .form


Layout

Form 排版可以隨個人喜好排列,沒有公式化的規則。一組 Input 可用一個 .form_grp 做容器並設置 .form_label.form_ctrl

使用 email
至少八位數
<div class="form_grp"> <label class="form_label"></label> <div class="form_ctrl"> <input type="text" class="input"> <div class="form_note"></div> </div> </div> <div class="form_grp"> <label class="form_opt"> <input type="checkbox"> {文字} </label> </div> <div class="form_grp"> <button class="btn">{文字}</button> </div>

使用 Grid System 排版

Form 排版可搭配 Grid System 並且透過該眾多屬性適應不同螢幕大小裝置。

使用 email
至少八位數
<div class="form_grp f-row"> <label class="form_label [email protected]:2"></label> <div class="form_ctrl"> <input type="text" class="input"> <div class="form_note"></div> </div> </div> <div class="form_grp f-row"> <label class="form_opt [email protected]:2 [email protected]:10"> <input type="checkbox"> {文字} </label> </div> <div class="form_grp f-row"> <div class="[email protected]:2 [email protected]:10"> <button class="btn">{文字}</button> </div> </div>

使用 email
至少八位數
<div class="form f-row"> <div class="form_grp [email protected]:auto f-row"> <label class="form_label [email protected]:2"></label> <div class="form_ctrl"> <input type="text" class="input"> <div class="form_note"></div> </div> </div> <div class="form_grp [email protected]:auto"> <label class="form_opt"> <input type="checkbox"> {文字} </label> </div> <div class="form_grp [email protected]:auto"> <button class="btn">{文字}</button> </div> </div>

狀態

.input 可以直接設置狀態類別或屬性,同時也可以對元件 .form_grp 設定,並且多了必填 .is:required 選項。

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="form_grp is:required"></div> <div class="form_grp is:success"></div> <div class="form_grp" status="success"></div> <div class="form_grp is:warning"></div> <div class="form_grp" status="warning"></div> <div class="form_grp is:danger"></div> <div class="form_grp" status="danger"></div>

Option List

將 Checkbox 與 Radio 群組化。使用類別名稱為 .opt-list


<div class="opt-list"> <label class="opt-list_item"> <input type="{checkbox / radio}"> {文字} </label> </div>