layui 写一个表单,包含:报表名称(文本输入框),报表组(搜索下拉框),报表路径(文本输入框),报表抽样条件路径(文本输入框),是否启用(开关
时间: 2023-12-21 17:05:55 浏览: 94
可以使用LayUI的form模块来快速实现表单的构建,以下是一个简单的示例:
```html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">报表名称</label>
<div class="layui-input-inline">
<input type="text" name="reportName" 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">
<select name="reportGroup" lay-verify="required">
<option value=""></option>
<option value="1">报表组1</option>
<option value="2">报表组2</option>
<option value="3">报表组3</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">报表路径</label>
<div class="layui-input-inline">
<input type="text" name="reportPath" 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="text" name="samplePath" 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="checkbox" name="enable" lay-skin="switch" lay-text="是|否">
</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>
```
这个表单包含了报表名称、报表组、报表路径、报表抽样条件路径、是否启用等几个字段。其中,报表组的下拉框使用了LayUI的select组件,其他字段均使用了input组件。
在代码中,我们使用了LayUI的form模块,并给表单添加了class="layui-form"属性。每个表单项都被包裹在一个layui-form-item类的div中,label标签表示表单项的名称,input或select标签表示表单项的输入框。其中,报表组的下拉框中使用了option标签来表示下拉框的选项。
最后,我们还添加了一个提交按钮和一个重置按钮,使用了LayUI的button组件。在提交按钮上,我们使用了lay-submit和lay-filter两个属性来声明表单的提交事件和对应的处理函数。
阅读全文