Form
Bases 的 Form 只需要將部分 <input>、<select>、<textarea> 加上 .input 就完成了。
Input
Select
Textarea
[contenteditable]
<input class="input" type="text">
<input class="input" type="password">
<input class="input" type="search">
<input class="input" type="number">
<input class="input" type="tel">
<input class="input" type="email">
<input class="input" type="url">
<input class="input" type="datetime-local">
<input class="input" type="date">
<input class="input" type="time">
<input class="input" type="month">
<input class="input" type="week">
<select class="input"></select>
<select class="input" multiple></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 class="input" type="text" readonly>
<input class="input" type="text" disabled>
<input class="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">