Python - Django - 使用 Bootstrap 样式修改注册页
2024-10-01 06:14:07
reg2 函数:
from django.shortcuts import render, HttpResponse
from app01 import models def reg2(request):
form_obj = RegForm() # GET 请求 if request.method == "POST":
form_obj = RegForm(request.POST)
if form_obj.is_valid():
pass
return render(request, "reg2.html", {"form_obj": form_obj})
在 bootstrap 上找到表单样式,https://v3.bootcss.com/css/#forms
label 标签处用的是 form-group 样式
reg2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body> <div class="container">
<form action="/reg2/" method="post" novalidate>
{% csrf_token %}
<div class="form-group">
{{ form_obj.username.label }}
{{ form_obj.username }}
<span>{{ form_obj.username.errors.0 }}</span>
</div>
<div class="form-group">
{{ form_obj.password.label }}
{{ form_obj.password }}
<span>{{ form_obj.password.errors.0 }}</span>
</div>
<p><input type="submit"></p>
</form>
</div> </body>
</html>
input 标签处用的是 form-control 样式
在 views.py 的 form 类中用 widgets 进行添加该样式
from django import forms
from django.forms import widgets class RegForm(forms.Form):
username = forms.CharField(
min_length=5,
label="用户名",
error_messages={
"min_length": "用户名不能少于5位!",
},
widget=widgets.TextInput(attrs={"class": "form-control"})
) password = forms.CharField(
min_length=6,
label="密码",
error_messages={
"min_length": "密码不能少于6位!",
},
widget=widgets.PasswordInput(attrs={"class": "form-control"}, render_value=True)
)
button 处用的是 btn btn-default 样式
直接在 index.html 处添加就好了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body> <div class="container">
<form action="/reg2/" method="post" novalidate>
{% csrf_token %}
<div class="form-group">
{{ form_obj.username.label }}
{{ form_obj.username }}
<span>{{ form_obj.username.errors.0 }}</span>
</div>
<div class="form-group">
{{ form_obj.password.label }}
{{ form_obj.password }}
<span>{{ form_obj.password.errors.0 }}</span>
</div>
<p><input type="submit" class="btn btn-default"></p>
</form>
</div> </body>
</html>
运行结果:
input 处太长了,把它布局到中间
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body> <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="/reg2/" method="post" novalidate>
{% csrf_token %}
<div class="form-group">
{{ form_obj.username.label }}
{{ form_obj.username }}
<span>{{ form_obj.username.errors.0 }}</span>
</div>
<div class="form-group">
{{ form_obj.password.label }}
{{ form_obj.password }}
<span>{{ form_obj.password.errors.0 }}</span>
</div>
<p><input type="submit" class="btn btn-default"></p>
</form>
</div>
</div>
</div> </body>
</html>
左边空 3 份,中间占 6 份,右边剩下 3 份
运行结果:
输入内容,点击 “提交”
错误提示可以使用 help-block 样式
reg2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body> <div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="/reg2/" method="post" novalidate>
{% csrf_token %}
<div class="form-group {% if form_obj.username.errors.0 %}has-error{% endif %}">
{{ form_obj.username.label }}
{{ form_obj.username }}
<span class="help-block">{{ form_obj.username.errors.0 }}</span>
</div>
<div class="form-group {% if form_obj.password.errors.0 %}has-error{% endif %}">
{{ form_obj.password.label }}
{{ form_obj.password }}
<span class="help-block">{{ form_obj.password.errors.0 }}</span>
</div>
<p><input type="submit" class="btn btn-default"></p>
</form>
</div>
</div>
</div> </body>
</html>
运行结果:
最新文章
- [Python] Python学习笔记之常用模块总结[持续更新...]
- [deviceone开发]-基础文件管理器
- MyBatis 元素类型为 ";configuration"; 的内容必须匹配 ";.....
- OC中NSDictionary和NSSet简单操作
- psd图片到html
- 输入框 input只能输入正数和小数点
- QQ头像一键添加校徽
- 深入理解setTimeout的作用域
- Jdk1.6 JUC源码解析(6)-locks-AbstractQueuedSynchronizer
- 安装CentOs 7.3
- C# 动态生成的按钮及定义按钮的事件的代码
- iOS埋点统计
- I2C总线的仲裁机制
- Swift: Associated Types--为什么协议使用关联类型而不是泛型
- 想3分钟搭建图像识别系统?这里有一份TensorFlow速成教程(转)
- python unittest单元测试框架-2discover
- oracle rowid 研究
- Computer Science Theory for the Information Age-5: 学习理论——VC维的定义以及一些例子
- Web api 访问HttpContext
- 偏前端-HTML5 sessionStorage-会话存储