表单

aui-form-list是与aui-list结合实现的表单列表的布局形式

 

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-header">带有输入框</li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Text
                </div>
                <div class="aui-list-item-input">
                    <input type="text" placeholder="Name">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Password
                </div>
                <div class="aui-list-item-input">
                    <input type="password" placeholder="Password">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Number
                </div>
                <div class="aui-list-item-input">
                    <input type="number" placeholder="Number">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Radio
                </div>
                <div class="aui-list-item-input">
                    <label><input class="aui-radio" type="radio" name="demo1" checked> 选项一</label>
                    <label><input class="aui-radio" type="radio" name="demo1"> 选项二</label>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Select
                </div>
                <div class="aui-list-item-input">
                    <select>
                        <option>Option1</option>
                        <option>Option2</option>
                        <option>Option3</option>
                    </select>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Switch
                </div>
                <div class="aui-list-item-input">
                    <input type="checkbox" class="aui-switch" checked>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Range
                </div>
                <div class="aui-list-item-input">
                    <div class="aui-range">
                        <input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    Textarea
                </div>
                <div class="aui-list-item-input">
                    <textarea placeholder="Textarea">