[英]Django UserCreationForm and Bootstrap Forms Layouts
I am trying to extend the UserCreationForm
using a Bootstrap layout style for the field username
.我正在尝试使用字段username
的 Bootstrap 布局样式来扩展UserCreationForm
。 After the input
tag in the registration form, I would like to add a div
element like an example that I have readapted from the Bootstrap page: ie suggesting the user to enter the same username as the company domain.在注册表中的input
标签之后,我想添加一个div
元素,就像我从 Bootstrap 页面重新改编的示例一样:即建议用户输入与公司域相同的用户名。
Let's focus to the bare minimum.让我们专注于最低限度。 The form readapted from Bootstrap is:从 Bootstrap 重新改编的形式是:
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
<div class="col-auto">
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="your.username" id="id_username">
<div class="input-group-text">@company.domain.com</div>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Which produces the following:产生以下内容:
For the moment, I am using only {{form.as_p}}
in my html template file:目前,我在 html 模板文件中仅使用{{form.as_p}}
:
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
{{form.as_p}}
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
And I don't know how to add the <div class="input-group-text">@company.domain.com</div>
part embedded in a <div class="input-group">...</div>
block.而且我不知道如何添加<div class="input-group-text">@company.domain.com</div>
嵌入在<div class="input-group">...</div>
块。
My actual forms.py
is a bit more complex, but readapted for this minimum example it contains the widget attributes as follows:我的实际forms.py
有点复杂,但针对这个最小示例重新调整,它包含如下小部件属性:
class SignupForm(UserCreationForm):
username = forms.CharField(label="",
widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'your.username'}))
class Meta:
model = User
fields = (
'username',
)
Without additional libraries, is there a way to extend the widget attributes?没有额外的库,有没有办法扩展小部件的属性? Is it even possible to use {{form.as_p}}
as I am currently doing or should I use another method?甚至可以像我目前正在做的那样使用{{form.as_p}}
还是应该使用其他方法?
If you want to use only {{ form.as_p }}
with bootstrap then you need to install django-bootstrap
.如果你只想将{{ form.as_p }}
与 bootstrap 一起使用,那么你需要安装django-bootstrap
。
Install it using pip:使用 pip 安装它:
pip install django-bootstrap4
After installation, add it in INSTALLED_APPS
in settings.py file.安装完成后,在settings.py文件中的INSTALLED_APPS
中添加。
INSTALLED_APPS = [
'bootstrap4',
]
And in templates, you need to load it.在模板中,您需要加载它。
{% load bootstrap4 %}
{% bootstrap_messages %}
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
{% csrf_token %}
{% bootstrap_form form %} # added `form` here. we don't need to use with as_p.
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
This is the way you can use bootstrap along with {{ form.as_p }}
这是您可以将引导程序与{{ form.as_p }}
一起使用的方式
OR或者
Try another way:尝试另一种方式:
Simply you can use {{ form.username }}
inside an input tag in template.只需在模板的输入标签内使用{{ form.username }}
即可。
For Example:例如:
<input type="text" value="{{ form.username }}">
<form class="row gy-2 gx-3 align-items-center method="POST" action="{% url 'register' %} ">
<div class="col-auto">
<div class="input-group">
<input type="text" name="username" class="form-control" placeholder="your.username" id="id_username" value="{{ form.username }}"> #Added here
<div class="input-group-text">@company.domain.com</div>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.