Forms

<input> , <select> 以及 <textarea> 都要加上 .ctrl-input 才會顯示樣式,雖然原本都是直接賦予在標籤上,但因為 HTML 5 提供更多種的 Input 的 Type,並且還要再各別修正與調整,導致CSS混亂與繁瑣,所以最後決定以 Class 來解決這件事情。部分的 <input> 則是另外處理,例如 radio , checkbox , range 等等。


Inputs

以下會顯示各種 <input> 的變化以及需要的 class當 type 輸入錯誤或是沒有輸入時,瀏覽器會以 type=text 為預設

TEXT .ctrl-input
PASSWORD .ctrl-input
EMAIL .ctrl-input
NUMBER .ctrl-input
URL .ctrl-input
SEARCH .ctrl-input
DATE .ctrl-input
DATETIME .ctrl-input
DATETIME-LOCAL .ctrl-input
MONTH .ctrl-input
WEEK .ctrl-input
TIME .ctrl-input
<input type="text" class="ctrl-input" />
<input type="password" class="ctrl-input" />
<input type="email" class="ctrl-input" />
<input type="number" class="ctrl-input" />
<input type="url" class="ctrl-input" />
<input type="search" class="ctrl-input" />
<input type="date" class="ctrl-input" />
<input type="datetime" class="ctrl-input" />
<input type="datetime-local" class="ctrl-input" />
<input type="month" class="ctrl-input" />
<input type="week" class="ctrl-input" />
<input type="time" class="ctrl-input" />

以下不需要加上 class 並且保留預設樣式。

CHECKBOX
RADIO
COLOR
SUBMIT
RESET
BUTTON
IMAGE
FILE
RANGE
<input type="checkbox" />
<input type="radio" />
<input type="color" />
<input type="submit" />
<input type="reset" />
<input type="button" />
<input type="image" />
<input type="file" />
<input type="range" />

Select

<select> 必須加上 .ctrl-input 才能顯示樣式,同時也能使用 multiple 屬性。


<select class="ctrl-input">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>

<select class="ctrl-input" multiple>
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</select>

Textarea

<textarea> 必須加上 .ctrl-input 才能顯示樣式,並且也能用於 <div contenteditable>


臺灣的美術在1950年代,畫壇主流以大陸來臺的水墨畫家與日治時期的本土西畫家為主,繪畫技巧比較傳統。1960年代開始,新生代畫家引入西方的抽象畫等風格,美術風格走向西化。1970年代鄉土意識抬頭後,繪畫題材再趨本土化。解嚴之後,美術界生態多元自由,風格也日益前衛。 戲劇方面在二戰之後,由於早期政府的大力推廣下,京劇等中國劇種在臺灣得到大力扶持;另一方面歌仔戲、布袋戲等本土劇種則仍是庶民大眾的重要娛樂方式。隨著電視的出現,布袋戲、歌仔戲開始講求聲光效果,重新獲得人們的重視。而國劇與國語話劇則融入創新元素,經常以小劇場等形式表演,舞臺劇表演成為臺灣極具活力的藝術活動。
<textarea class="ctrl-input">臺灣的美術在1950年代,畫壇主流以大陸來臺的水墨畫家與日治時期的本土西畫家為主,繪畫技巧比較傳統。1960年代開始,新生代畫家引入西方的抽象畫等風格,美術風格走向西化。1970年代鄉土意識抬頭後,繪畫題材再趨本土化。解嚴之後,美術界生態多元自由,風格也日益前衛。

戲劇方面在二戰之後,由於早期政府的大力推廣下,京劇等中國劇種在臺灣得到大力扶持;另一方面歌仔戲、布袋戲等本土劇種則仍是庶民大眾的重要娛樂方式。隨著電視的出現,布袋戲、歌仔戲開始講求聲光效果,重新獲得人們的重視。而國劇與國語話劇則融入創新元素,經常以小劇場等形式表演,舞臺劇表演成為臺灣極具活力的藝術活動。</textarea>
<hr />
<div contenteditable class="ctrl-input">臺灣的美術在1950年代,畫壇主流以大陸來臺的水墨畫家與日治時期的本土西畫家為主,繪畫技巧比較傳統。1960年代開始,新生代畫家引入西方的抽象畫等風格,美術風格走向西化。1970年代鄉土意識抬頭後,繪畫題材再趨本土化。解嚴之後,美術界生態多元自由,風格也日益前衛。

戲劇方面在二戰之後,由於早期政府的大力推廣下,京劇等中國劇種在臺灣得到大力扶持;另一方面歌仔戲、布袋戲等本土劇種則仍是庶民大眾的重要娛樂方式。隨著電視的出現,布袋戲、歌仔戲開始講求聲光效果,重新獲得人們的重視。而國劇與國語話劇則融入創新元素,經常以小劇場等形式表演,舞臺劇表演成為臺灣極具活力的藝術活動。</div>

Status

Focus

表單元件裡的輸入框以及 <select> 都有 focus 的屬性,為了有時可以做到常駐效果,所以另外多加了 .focus 可供使用。

<input type="text" class="ctrl-input focus" />
<select class="ctrl-input focus">
    <option>Option</option>
</select>
<textarea class="ctrl-input focus"></textarea>
<div contenteditable class="ctrl-input focus"></div>

Disabled

表單元件基本上都能夠加上 [disabled] 屬性,只要在表單元件上加上 [disabled] 就能產生樣式。

<input type="text" class="ctrl-input" disabled />
<input type="checkbox" class="ctrl-input" disabled />
<input type="radio" class="ctrl-input" disabled />
<select class="ctrl-input" disabled>
    <option>Option</option>
</select>
<textarea class="ctrl-input" disabled></textarea>
<div contenteditable class="ctrl-input" disabled></div>

當要對整個區塊做 [disabled] 時,只要在區塊上加上 .disabled 或是 [disabled]

<fieldset disabled>
    <label>帳號</label>
    <input type="text" class="ctrl-input" />
    <label>密碼</label>
    <input type="password" class="ctrl-input" />
    <input type="submit" class="btn" value="登入" />
</fieldset>

Readonly

當表單元件設定了 [readonly] 時,使用者將無法修改,並且會顯示類似 [disabled] 的樣式。

<input type="text" class="ctrl-input" readonly />

驗證狀態

通常表單送出前後都會做驗證的動作,為了讓使用者能夠知道成功與否會顯示其狀態效果。

<input type="text" class="ctrl-input has-success" />
<input type="text" class="ctrl-input has-warning" />
<input type="text" class="ctrl-input has-error" />

當你要針對一個區塊顯示其驗證狀態時,可在區塊上加上 class

<div class="has-success">
    <label>帳號</label>
    <input type="text" class="ctrl-input" />
</div>
<div class="has-warning">
    <label>Email</label>
    <input type="email" class="ctrl-input" />
</div>
<div class="has-error">
    <label>個人網址</label>
    <input type="email" class="ctrl-input" />
</div>