表单案例

复选框

单选框

控制开关的切换

    <label class="input-control checkbox">
        <input type="checkbox">
        <span class="helper">CheckBox Caption</span>
    </label>
 
    <label class="input-control radio">
        <input type="radio">
        <span class="helper">CheckBox Caption</span>
    </label>
 
    <label class="input-control switch">
        <input type="checkbox">
        <span class="helper">CheckBox Caption</span>
    </label>

按钮

    <input type="button" value="Button"/>
    <input type="submit" value="Submit"/>
    <input type="reset"  value="Reset"/>
    <input type="button" disabled value="Button"/>

文本框

    <div class="input-control text">
        <input type="text" />
        <button class="helper"></button>
    </div>

密码框

    <div class="input-control password">
        <input type="password" />
        <button class="helper"></button>
    </div>

    <div class="input-control text">
        <input type="text" />
        <button class="btn-search"></button>
    </div>

    <div class="input-control text">
        <input type="phone" />
        <button class="helper"></button>
    </div>

    <div class="input-control text">
        <input type="email" />
        <button class="helper"></button>
    </div>

    <div class="input-control text">
        <input type="url" />
        <button class="helper"></button>
    </div>

下拉选择框

    <div class="input-control select">
        <select>
            <option>...</option>
        </select>
    </div>

    <div class="input-control select">
        <select multiple="">
            <option>...</option>
        </select>
    </div>

    <div class="input-control textarea">
        <textarea>
        </textarea>
    </div>

Fieldset

    <fieldset>
        <legend>...</legend>
        ...
    </fieldset>

Input使用spanN类名

    <div class="input-control text spanN">
        <input type="text" />
        <button class="helper"></button>
    </div>