我创建了一个注册页面和登录页面。对于这一点，我用Django默认的身份验证功能和形式。要修改了一下我用香脆的形式，但我的标签定位错我的屏幕上。我重视我的注册页面的图像，你可以看到标签的用户名，密码，密码重新定位错误。
这里是我的signup.html
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<body>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
<h2>Welcome to Panasonic Energy</h2>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="text-center ">
<button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
{% if form.errors %}
<p class=" label label-danger">
Please try again.
</p>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
这是我的signup.css。我认为这个问题是我的CSS是影响风格的标签可能会改写Django默认的样式，因此我评论出来，但尽管如此，问题依然存在。
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
} */
/* .g-button {
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
} */
/* .my-input {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
} */
/* .header-title {
margin: 5rem 0;
} */
h1 {
font-size: 31px;
line-height: 40px;
font-weight: 600;
color: #4c5357;
}
h2 {
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
/* .login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
} */
/*
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
} */
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
@media screen and (max-width:480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
请帮我解决这些标签的位置。提前致谢...
你应该呈现形式{% crispy form %}因为你已经加载了香脆的形式标记在上面不喜欢{{ form|crispy}}和你不需要添加<form>标签作为您在{% crispy form %}构建它。因此，一些HTML的也是多余的，你可以生成香脆形式本身就像提交按钮
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class SignUpForm(forms.Form):
Username=forms.CharField(required=True)
Password=forms.CharField(widget=forms.PasswordInput,required=True)
Confirm_Password=forms.CharField(widget=forms.PasswordInput,required=True)
def __init__(self,*args,**kwargs):
super(SignUpForm,self).__init__(*args)
self.helper=FormHelper()
self.helper.method='POST'
self.helper.add_input(Submit('gobtn','Login',css_class='btn-success'))
def clean(self):
cleaned_data = super(SignUpForm, self).clean()
password = cleaned_data.get('Password')
password_confirm = cleaned_data.get('Confirm_password')
if password != password_confirm:
raise forms.ValidationError("The two password fields must match.")
return cleaned_data
并确保您通过它可以查看喜欢
def myview(request):
#your logic here
context={}
if request.method == "GET":
context['form']= SignUpForm()
else:
#POST request block
if SignUpForm(request.POST).is_valid():
#do what you like here
else:
#if form is invalid
context['form']= SignUpForm(request.POST) # this will render if validation errors so you can remove your if errors block in html
render(request,'template_name.html',context)