Forms

在 Lazy 裡面,大多有關表單元件與區塊都使用 .ctrl- 為開頭,方便統一辨別元件與模組。一個輸入框組合會使用 .ctrl-grp 來放置 <label> 與各式各樣的表單元件,表單元件則會在放置於 .ctrls 裏頭,這麼做是為了能夠排列更多組合與其他元件的安排。

未來有關表單相關的模組會經常使用到 <label>,避免將來發生覆寫以及直接賦予在標籤上的情形,所以請在 <label> 加上 .ctrl-label

在使用多個 .ctrl-grp 時,或許你可以把一個 Group 當作是一個 row 的安排。

記錄此次登入?
<form>
    <div class="ctrl-grp">
        <label class="ctrl-label">帳號</label>
        <div class="ctrls">
            <input type="text" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-grp">
        <label class="ctrl-label">密碼</label>
        <div class="ctrls">
            <input type="password" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-chkbox">
        <input type="checkbox" />
        記錄此次登入?
    </div>
    <div class="ctrl-grp">
        <button>登入</button>
    </div>
</form>

.ctrls 裡可放置 .input-grp

@
帳號已被申請
<form>
    <div class="ctrl-grp">
        <label class="ctrl-label">申請帳號</label>
        <div class="ctrls">
            <div class="input-grp">
                <span class="adorn">@</span>
                <input type="text" class="ctrl-input" />
                <span class="input-grp-btn">
                    <button class="btn">檢查</button>
                </span>
            </div>
            <div class="ctrl-help">帳號已被申請</div>
        </div>
    </div>
</form>

必填提示

可在 .ctrl-grp 加上 .required-field

記錄此次登入?
<form>
    <div class="ctrl-grp required-field">
        <label class="ctrl-label">帳號</label>
        <div class="ctrls">
            <input type="text" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-grp required-field">
        <label class="ctrl-label">密碼</label>
        <div class="ctrls">
            <input type="password" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-chkbox">
        <input type="checkbox" />
        記錄此次登入?
    </div>
    <div class="ctrl-grp">
        <button>登入</button>
    </div>
</form>

單排表單

當你需要簡單的表單內容用一行呈現時,你可以在 <form> 加上 .form-inline

<form class="form-inline">
    ~略~
</form>

表單水平排列

當你需要 <label> 與表單元件呈水平排列時,可在<form> 加上 .form-horizontal。在 Lazy 2 的時候,是使用固定寬度來做排列,本以為採用了最大寬度的可能性,不過當需求有點繁瑣時,固定寬度可能就會出現問題,因此,這裡你可以採用 Grid 的方式去做比較彈性的排列。

<form class="form-horizontal">
    <div class="ctrl-grp columns-12">
        <label class="ctrl-label col-2">帳號</label>
        <div class="ctrls col-10">
            <input type="text" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-grp columns-12">
        <label class="ctrl-label col-2">密碼</label>
        <div class="ctrls col-10">
            <input type="password" class="ctrl-input" />
        </div>
    </div>
    <div class="ctrl-group columns-12">
        <label class="ctrl-chkbox col-10 col-offset-2">
            <input type="checkbox" />
            記錄此次登入?
        </label>
        <div class="ctrls col-10 col-offset-2">
            <button class="btn">登入</button>
        </div>
    </div>
</form>

上傳封面

<label for="upload-cover" class="ctrl-upload flex-media">
    <input type="file" id="upload-cover" />
    <span class="ctrl-upload-caption">上傳一張照片</span>
</label>

Checkbox List

類似 <select multiple> 的操作方式,但以 <input type="checkbox" /> 表現。

<div class="chkbox-list">
    <label class="chkbox-list-item">
        <input type="checkbox" /> 選項一
    </label>
    <label class="chkbox-list-item">
        <input type="checkbox" /> 選項二
    </label>
    <label class="chkbox-list-item">
        <input type="checkbox" /> 選項三
    </label>
    <label class="chkbox-list-item">
        <input type="checkbox" /> 選項四
    </label>
    <label class="chkbox-list-item">
        <input type="checkbox" /> 選項五
    </label>
</div>