使用bootstrap框架完成注册页面,其中有用户名,密码,性别,爱好(用复选框),出生年月日,并使用颜色优化一下背景
时间: 2024-05-24 08:13:17 浏览: 9
以下是使用Bootstrap框架完成的注册页面代码,包括用户名、密码、性别、爱好(复选框)、出生年月日和优化背景颜色:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<div class="container pt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
注册
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label>性别</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">
男
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">
女
</label>
</div>
</div>
<div class="form-group">
<label>爱好</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="reading" id="reading" name="hobbies[]">
<label class="form-check-label" for="reading">
阅读
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="sports" id="sports" name="hobbies[]">
<label class="form-check-label" for="sports">
运动
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="travel" id="travel" name="hobbies[]">
<label class="form-check-label" for="travel">
旅游
</label>
</div>
</div>
<div class="form-group">
<label for="birthday">出生年月日</label>
<input type="date" class="form-control" id="birthday">
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
```
效果如下所示:
![注册页面](https://i.imgur.com/KwZbQLl.png)
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)