Django UserCreationForm 和 Bootstrap Forms 布局

Question

我正在尝试使用字段username的 Bootstrap 布局样式来扩展UserCreationForm 。 在注册表中的input标签之后，我想添加一个div元素，就像我从 Bootstrap 页面重新改编的示例一样：即建议用户输入与公司域相同的用户名。

让我们专注于最低限度。 从 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>

产生以下内容：

目前，我在 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>

而且我不知道如何添加<div class="input-group-text">@company.domain.com</div>嵌入在<div class="input-group">...</div>块。

我的实际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',
        )

没有额外的库，有没有办法扩展小部件的属性？ 甚至可以像我目前正在做的那样使用{{form.as_p}}还是应该使用其他方法？

Answer 1

如果你只想将{{ form.as_p }}与 bootstrap 一起使用，那么你需要安装django-bootstrap 。

使用 pip 安装它：

pip install django-bootstrap4

安装完成后，在settings.py文件中的INSTALLED_APPS中添加。

INSTALLED_APPS = [
   'bootstrap4',
]

在模板中，您需要加载它。

{% 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>

这是您可以将引导程序与{{ form.as_p }}一起使用的方式

或者

尝试另一种方式：

只需在模板的输入标签内使用{{ form.username }}即可。

例如：

<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>