表单

表单效果进行了全面优化,使用.aui-form定义表单容器,.aui-input-row来布局行。

.aui-input-addon为输入框名称(label),可以在其内插入字体图标,使用.aui-pull-left  .aui-pull-righ控制位置。

.aui-input  定义输入框效果。

<div class="aui-form"><div class="aui-input-row">
        <label class="aui-input-addon">name</label>
        <input type="text" class="aui-input" placeholder="name" />
    </div><div class="aui-input-row">
        <span class="aui-input-addon">pass</span>
        <input type="password" class="aui-input" placeholder="password" />
    </div><div class="aui-input-row">
        <span class="aui-input-addon">num</span>
        <input type="number" class="aui-input" placeholder="number" />
    </div><div class="aui-input-row">
        <span class="aui-input-addon">email</span>
        <input type="email" class="aui-input" placeholder="email" />
    </div><div class="aui-input-row">
        <span class="aui-input-addon">url</span>
        <input type="url" class="aui-input" placeholder="http://" />
    </div><div class="aui-btn-row"><div class="aui-btn aui-btn-success" onclick="return false;">确认</div><div class="aui-btn aui-btn-warning" onclick="return false;">取消</div></div></div>