<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">报表名称</label> <div class="layui-input-block"> <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-block"> <select name="reportGroup" lay-verify="required"> <option value=""></option> <option value="group1">分组1</option> <option value="group2">分组2</option> <option value="group3">分组3</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表路径</label> <div class="layui-input-block"> <input type="text" name="reportUrl" 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="text" name="reportCdnUrl" 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="checkbox" name="enable" lay-skin="switch" lay-filter="switchTest" 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> 调整label的宽度为200
时间: 2023-10-05 18:08:16 浏览: 40
可以通过修改CSS样式来调整label的宽度为200,代码如下:
```
<style>
.layui-form-label {
width: 200px;
}
</style>
```
将上述代码放在HTML代码之前或者在外部CSS文件中即可。
相关问题
在这个form中添加一个单选框,分别为学生、教师、招聘官,<div class="layui-container"> <div class="admin-login-background"> <div class="layui-form login-form"> <form class="layui-form" action=""> <div class="layui-form-item logo-title"> <h1>用户注册</h1> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-username" for="username"></label> <input type="text" name="email" lay-verify="required|account" placeholder="邮箱" autocomplete="off" class="layui-input" value="admin"> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-password" for="password"></label> <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456"> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="register">注 册</button> </div> </form> </div> </div> </div>
可以在 form 中添加一个 layui 的单选框组件,代码如下:
```
<div class="layui-form-item">
<label class="layui-form-label">身份选择</label>
<div class="layui-input-block">
<input type="radio" name="identity" value="student" title="学生">
<input type="radio" name="identity" value="teacher" title="教师">
<input type="radio" name="identity" value="recruiter" title="招聘官">
</div>
</div>
```
注意要将单选框的 name 属性设置为 "identity",方便后续获取用户选择的身份。另外,这里使用了 layui 的样式,需要在页面中引入 layui 的样式文件。
<form id="updateForm"> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-block"> <input type="text" id="title" 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="text" id="author" name="author" 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="text" id="price" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input"> </div> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form; // 表单验证 form.verify({ title: function(value){ if(value.length > 50){ return '标题不能超过50个字符'; } }, author: function(value){ if(value.length > 20){ return '作者不能超过20个字符'; } }, price: function(value){ if(isNaN(value)){ return '价格必须是数字'; } } }); }); </script>将该代码的<head>和样式等文件补充完整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单验证示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<form id="updateForm" class="layui-form" action="" method="post">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="title" name="title" required lay-verify="required|title" 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="text" id="author" name="author" required lay-verify="required|author" 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="text" id="price" name="price" required lay-verify="required|price" placeholder="请输入价格" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="updateForm">提交</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
// 自定义表单验证规则
form.verify({
title: function(value){
if(value.length > 50){
return '标题不能超过50个字符';
}
},
author: function(value){
if(value.length > 20){
return '作者不能超过20个字符';
}
},
price: function(value){
if(isNaN(value)){
return '价格必须是数字';
}
}
});
// 监听表单提交事件
form.on('submit(updateForm)', function(data){
// 在这里进行表单提交的操作
// ...
return false; // 阻止表单跳转
});
});
</script>
</body>
</html>