Form

Bases 的 Form 只需要將部分 <input><select><textarea> 加上 .input 就完成了。

Input












Select



Textarea


[contenteditable]
<input type="text" class="input"> <input type="password" class="input"> <input type="search" class="input"> <input type="number" class="input"> <input type="tel" class="input"> <input type="email" class="input"> <input type="url" class="input"> <input type="datetime-local" class="input"> <input type="date" class="input"> <input type="time" class="input"> <input type="month" class="input"> <input type="week" class="input"> <select class="input"></select> <select multiple class="input"></select> <textarea class="input"></textarea> <div class="input" contenteditable></div>

注意的是 [type=checkbox][type=radio][type=color][type=button][type=reset][type=submit][type=image][type=file][type=hidden][type=range] 皆不支援。


屬性

表單除了預設屬性之外,另外還有 Readonly [readonly] 以及禁止模式 [disabled].is:off

預設

唯讀

禁止
<input type="text" class="input" readonly> <input type="text" class="input" disabled> <input type="text" class="input is:off">

狀態

每個 .input 都能設定回饋狀態,例如 Success .is:success、Warning .is:warning、Danger .is:danger

成功

警告

危險
<input type="text" class="input is:success"> <input type="text" class="input" status="success"> <input type="text" class="input is:warning"> <input type="text" class="input" status="warning"> <input type="text" class="input is:danger"> <input type="text" class="input" status="danger">