首页 表单


简约风格表单
预览效果
辅助文字
  • HTML
  • SCSS
  • CSS
  • UniApp
<form class="layui-form ul-form-basic" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block"><textarea
                name="desc"
                placeholder="请输入内容"
                class="layui-textarea"
            ></textarea></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button></div>
    </div>
</form>
/* 简约风格Form */
.ul-form-basic {

    .layui-form-item {
        clear        : unset;
        margin-bottom: 6px;
    }

    .layui-form-label {
        float     : unset;
        width     : unset;
        text-align: left;
        padding   : 5px 0;
        font-size : 14px;
        color     : #000;
    }

    .layui-input-block {
        margin-left: unset;
        min-height : 30px;
    }

    .layui-input {
        padding: 10px 11px;
        height : unset;
    }

    .layui-form-mid {
        padding: 5px 0 !important
    }

    .layui-form-select dl {
        top: 28px;
    }

    .layui-form-select dl dd,
    .layui-form-select dl dt {
        height: 30px
    }

}
@charset "UTF-8";
/* 简约风格Form */
.ul-form-basic .layui-form-item {
  clear: unset;
  margin-bottom: 6px;
}
.ul-form-basic .layui-form-label {
  float: unset;
  width: unset;
  text-align: left;
  padding: 5px 0;
  font-size: 14px;
  color: #000;
}
.ul-form-basic .layui-input-block {
  margin-left: unset;
  min-height: 30px;
}
.ul-form-basic .layui-input {
  padding: 10px 11px;
  height: unset;
}
.ul-form-basic .layui-form-mid {
  padding: 5px 0 !important;
}
.ul-form-basic .layui-form-select dl {
  top: 28px;
}
.ul-form-basic .layui-form-select dl dd, .ul-form-basic .layui-form-select dl dt {
  height: 30px;
}

<form class="layui-form ul-form-basic" action="">
    <view class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <view class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </view>
    </view>
    <view class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <view class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </view>
        <view class="layui-form-mid layui-word-aux">辅助文字</view>
    </view>
    <view class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <view class="layui-input-block">
            <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </view>
    </view>
    <view class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <view class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <input type="checkbox" name="like[dai]" title="发呆">
        </view>
    </view>
    <view class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <view class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch">
        </view>
    </view>
    <view class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <view class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </view>
    </view>
    <view class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <view class="layui-input-block"><textarea
                name="desc"
                placeholder="请输入内容"
                class="layui-textarea"
            ></textarea></view>
    </view>
    <view class="layui-form-item">
        <view class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button></view>
    </view>
</form>
极简对称表单
预览效果
辅助文字
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-data-card" style="width: 320px;">
    <div class="body">
        <form class="layui-form ul-form-space-between" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" lay-skin="primary" title="写作">
                    <input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
                    <input type="checkbox" name="like[dai]" lay-skin="primary" title="发呆">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block"><textarea
                        name="desc"
                        placeholder="请输入内容"
                        class="layui-textarea"
                    ></textarea></div>
            </div>
            <div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">立即提交</button></div>
        </form>
    </div>
</div>
.ul-form-space-between {
    .layui-form-item {
        display        : flex;
        align-items    : flex-start;
        justify-content: space-between;
        border-bottom  : 2px solid #eee;

        &::after {
            content: unset
        }

        &:last-child {
            border: unset;
        }

        .layui-form-label {
            text-align: left;
            float     : unset;
        }

        .layui-input-block {
            margin-left: unset;
            width      : 60%;
            text-align : right;

        }

        .layui-input {
            border    : unset;
            text-align: right;
        }

        .layui-form-mid {
            text-align: right;
            display   : block;
            float     : unset
        }
    }
}
.ul-form-space-between .layui-form-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid #eee;
}
.ul-form-space-between .layui-form-item::after {
  content: unset;
}
.ul-form-space-between .layui-form-item:last-child {
  border: unset;
}
.ul-form-space-between .layui-form-item .layui-form-label {
  text-align: left;
  float: unset;
}
.ul-form-space-between .layui-form-item .layui-input-block {
  margin-left: unset;
  width: 60%;
  text-align: right;
}
.ul-form-space-between .layui-form-item .layui-input {
  border: unset;
  text-align: right;
}
.ul-form-space-between .layui-form-item .layui-form-mid {
  text-align: right;
  display: block;
  float: unset;
}

<view class="ul-data-card" style="width: 320px;">
    <view class="body">
        <form class="layui-form ul-form-space-between" action="">
            <view class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <view class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </view>
            </view>
            <view class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <view class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    <view class="layui-form-mid layui-word-aux">辅助文字</view>
                </view>
            </view>
            <view class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <view class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </view>
            </view>
            <view class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <view class="layui-input-block">
                    <input type="checkbox" name="like[write]" lay-skin="primary" title="写作">
                    <input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
                    <input type="checkbox" name="like[dai]" lay-skin="primary" title="发呆">
                </view>
            </view>
            <view class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <view class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                </view>
            </view>
            <view class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <view class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </view>
            </view>
            <view class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <view class="layui-input-block"><textarea
                        name="desc"
                        placeholder="请输入内容"
                        class="layui-textarea"
                    ></textarea></view>
            </view>
            <view class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">立即提交</button></view>
        </form>
    </view>
</view>
表格输入
预览效果
输入 选择框 复选框
单选框
文本域
  • HTML
  • SCSS
  • CSS
  • UniApp
<div class="ul-table-form">
    <div class="layui-form">
        <div class="layui-form-item">
            <table class="layui-table ul-input-table" lay-even>
                <tbody>
                    <tr>
                        <td>输入</td>
                        <td>
                            <input type="text" name="input-1" placeholder="请输入" class="layui-input" id="">
                        </td>
                        <td>选择框</td>
                        <td>
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">北京</option>
                                <option value="1">上海</option>
                                <option value="2">广州</option>
                                <option value="3">深圳</option>
                                <option value="4">杭州</option>
                            </select>
                        </td>
                        <td>复选框</td>
                        <td>
                            <input type="checkbox" name="like[write]" lay-skin="primary" title="写作">
                            <input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
                            <input type="checkbox" name="like[dai]" lay-skin="primary" title="发呆">
                        </td>
                    </tr>
                    <tr>
                        <td>单选框</td>
                        <td colspan="5">
                            <input type="radio" name="sex" value="男" title="国产">
                            <input type="radio" name="sex" value="男" title="日韩">
                            <input type="radio" name="sex" value="男" title="欧洲">
                            <input type="radio" name="sex" value="男" title="美国">
                            <input type="radio" name="sex" value="女" title="俄罗斯" checked>
                        </td>
                    </tr>
                    <tr>
                        <td>文本域</td>
                        <td colspan="5"><textarea
                                name=""
                                class="layui-textarea"
                                rows="3"
                            ></textarea></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
.ul-table-form {

}
<view class="ul-table-form">
    <view class="layui-form">
        <view class="layui-form-item">
            <table class="layui-table ul-input-table" lay-even>
                <tbody>
                    <tr>
                        <td>输入</td>
                        <td>
                            <input type="text" name="input-1" placeholder="请输入" class="layui-input" id="">
                        </td>
                        <td>选择框</td>
                        <td>
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">北京</option>
                                <option value="1">上海</option>
                                <option value="2">广州</option>
                                <option value="3">深圳</option>
                                <option value="4">杭州</option>
                            </select>
                        </td>
                        <td>复选框</td>
                        <td>
                            <input type="checkbox" name="like[write]" lay-skin="primary" title="写作">
                            <input type="checkbox" name="like[read]" lay-skin="primary" title="阅读" checked>
                            <input type="checkbox" name="like[dai]" lay-skin="primary" title="发呆">
                        </td>
                    </tr>
                    <tr>
                        <td>单选框</td>
                        <td colspan="5">
                            <input type="radio" name="sex" value="男" title="国产">
                            <input type="radio" name="sex" value="男" title="日韩">
                            <input type="radio" name="sex" value="男" title="欧洲">
                            <input type="radio" name="sex" value="男" title="美国">
                            <input type="radio" name="sex" value="女" title="俄罗斯" checked>
                        </td>
                    </tr>
                    <tr>
                        <td>文本域</td>
                        <td colspan="5"><textarea
                                name=""
                                class="layui-textarea"
                                rows="3"
                            ></textarea></td>
                    </tr>
                </tbody>
            </table>
        </view>
    </view>
</view>