在这个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>
时间: 2023-10-18 21:04:22 浏览: 155
可以在 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 的样式文件。
相关问题
已bootstrap为基础写一个单选题页面 选择错误样式变红并把正确答案的单选框样式变绿
以下是一个示例代码,使用了Bootstrap 4和jQuery库:
```html
<!DOCTYPE html>
<html>
<head>
<title>单选题页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>请选择正确答案</h1>
<form>
<div class="form-group">
<label>问题1:以下哪个是一种果汁?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="a">
<label class="form-check-label">牛奶</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="b">
<label class="form-check-label">橙汁</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="c">
<label class="form-check-label">可乐</label>
</div>
</div>
<div class="form-group">
<label>问题2:以下哪个是一种动物?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="a">
<label class="form-check-label">苹果</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="b">
<label class="form-check-label">狗</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="c">
<label class="form-check-label">桌子</label>
</div>
</div>
<button type="button" class="btn btn-primary" id="submitBtn">提交</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submitBtn').click(function () {
var q1 = $('input[name=q1]:checked').val();
var q2 = $('input[name=q2]:checked').val();
if (q1 !== 'b') {
$('input[name=q1]').parent().addClass('text-danger');
$('input[name=q1][value=b]').parent().addClass('text-success');
}
if (q2 !== 'b') {
$('input[name=q2]').parent().addClass('text-danger');
$('input[name=q2][value=b]').parent().addClass('text-success');
}
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了Bootstrap的表单组件来创建单选题选项。当用户点击提交按钮时,使用jQuery获取选择的答案,并根据是否正确来添加样式类。
正确的单选框使用了`text-success`类,错误的单选框使用了`text-danger`类。你可以根据需要调整样式类和颜色。
写一个注册页面。有用户名,密码,性别,邮箱,所在城市,爱好,性别是单选框。
创建一个简单的在线注册表单,通常用于网站或应用程序中,可以按照以下HTML结构编写:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>用户注册</h2>
<form id="registerForm" method="post" action="/submit-registration">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br>
<label>所在城市:</label>
<select id="city" name="city" required>
<option value="">请选择</option>
<!-- 这里添加实际的城市选项 -->
</select><br>
<label>爱好:</label>
<textarea id="hobbies" name="hobbies" rows="4" cols="50"></textarea><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
```
这个表单包含输入字段如文本输入(用户名和密码)、单选按钮(性别)、电子邮件输入、下拉选择(城市)以及一个多行文本输入框(爱好)。请注意,为了完成注册过程,`action="/submit-registration"` 表示表单数据将发送到服务器的 `/submit-registration` 路径,实际应用中你需要连接到后端API。
阅读全文