You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
7.2 KiB
164 lines
7.2 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
<meta name="generator" content="Hugo 0.88.1">
|
|
<title>注册</title>
|
|
|
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/checkout/">
|
|
|
|
{% load static %}
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="{% static 'css/station/bootstrap.min.css' %}" rel="stylesheet">
|
|
|
|
<style>
|
|
.bd-placeholder-img {
|
|
font-size: 1.125rem;
|
|
text-anchor: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.bd-placeholder-img-lg {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="{% static 'css/station/form-validation.css' %}" rel="stylesheet">
|
|
<link rel="stylesheet" href="{% static 'css/station/list-groups.css' %}">
|
|
</head>
|
|
<body class="bg-light">
|
|
|
|
<div class="container">
|
|
<main>
|
|
<div class="py-5 text-center">
|
|
<img class="d-block mx-auto mb-4" src="{% static 'images/bootstrap-logo.svg' %}" alt="" width="72"
|
|
height="57">
|
|
<h2>注册</h2>
|
|
<p class="lead">请您填写一下信息，注册您的个人账号，请放心，您的信息会被严格保密。</p>
|
|
</div>
|
|
<form class="needs-validation" novalidate method="post">
|
|
{% csrf_token %}
|
|
<div class="row g-5">
|
|
<div class="col-md-5 col-lg-4 order-md-last float-right">
|
|
<div class="list-group">
|
|
<label class="list-group-item d-flex gap-3">
|
|
<input class="form-check-input flex-shrink-0" type="checkbox" name="like" value="like1"
|
|
checked
|
|
style="font-size: 1.375em;">
|
|
<span class="pt-1 form-checked-content">
|
|
<strong>web架构</strong>
|
|
<small class="d-block text-muted">
|
|
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
|
</small>
|
|
</span>
|
|
</label>
|
|
<label class="list-group-item d-flex gap-3">
|
|
<input class="form-check-input flex-shrink-0" type="checkbox" name="like" value="like2"
|
|
style="font-size: 1.375em;">
|
|
<span class="pt-1 form-checked-content">
|
|
<strong>云原生</strong>
|
|
<small class="d-block text-muted">
|
|
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
|
|
</small>
|
|
</span>
|
|
</label>
|
|
<label class="list-group-item d-flex gap-3">
|
|
<input class="form-check-input flex-shrink-0" type="checkbox" name="like" value="like3"
|
|
style="font-size: 1.375em;">
|
|
<span class="pt-1 form-checked-content">
|
|
<strong>基础运维</strong>
|
|
<small class="d-block text-muted">
|
|
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
|
|
</small>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7 col-lg-8">
|
|
<h4 class="mb-3">填写信息</h4>
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label for="firstName" class="form-label">姓</label>
|
|
<input type="text" class="form-control" id="firstName" placeholder="" name="fname" value=""
|
|
required>
|
|
<div class="invalid-feedback">
|
|
姓名必须填写
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<label for="lastName" class="form-label">名</label>
|
|
<input type="text" class="form-control" id="lastName" placeholder="" name="lname" value=""
|
|
required>
|
|
<div class="invalid-feedback">
|
|
姓名必须填写
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label for="username" class="form-label">登陆用户名</label>
|
|
<div class="input-group has-validation">
|
|
<input type="text" class="form-control" id="username" name="username" value=""
|
|
placeholder="用于登录" required>
|
|
<div class="invalid-feedback">
|
|
用户名必须填写
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label for="email" class="form-label">邮箱 <span
|
|
class="text-muted">(境内邮箱)</span></label>
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="你的电子邮箱地址">
|
|
<div class="invalid-feedback">
|
|
邮箱必须填写
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="id_password" class="form-label">密码 <span
|
|
class="text-muted">(最小6位)</span></label>
|
|
<input type="password" class="form-control" name="password" id="id_password"
|
|
placeholder="密码">
|
|
<div class="invalid-feedback">
|
|
密码
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if errors %}
|
|
<div class="alert alert-danger" role="alert">
|
|
{{ errors.password }} {{ errors.fname }} {{ errors.lname }} {{ errors.username }}
|
|
</div>
|
|
{% endif %}
|
|
<hr class="my-4">
|
|
|
|
<button class="w-100 btn btn-primary btn-lg" type="submit">注册</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
|
|
<footer class="my-5 pt-5 text-muted text-center text-small">
|
|
<p class="mb-1">© 2017–2023 云计算学院</p>
|
|
<ul class="list-inline">
|
|
<li class="list-inline-item"><a href="{% url 'App:index' %}">主页</a></li>
|
|
<li class="list-inline-item"><a href="{% url 'App:login' %}">登录</a></li>
|
|
</ul>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
|
|
|
<script src="{% static 'js/form-validation.js' %}"></script>
|
|
</body>
|
|
</html>
|
|
|