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 f-col@sm: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 f-offset@sm:2 f-col@sm:10">
<input type="checkbox">
{文字}
</label>
</div>
<div class="form_grp f-row">
<div class="f-offset@sm:2 f-col@sm:10">
<button class="btn">{文字}</button>
</div>
</div>
使用 email
至少八位數
<div class="form f-row">
<div class="form_grp f-col@lg:auto f-row">
<label class="form_label f-col@lg:2"></label>
<div class="form_ctrl">
<input type="text" class="input">
<div class="form_note"></div>
</div>
</div>
<div class="form_grp f-col@lg:auto">
<label class="form_opt">
<input type="checkbox">
{文字}
</label>
</div>
<div class="form_grp f-col@lg: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>