Макеты Django UserCreationForm и Bootstrap Forms

Я пытаюсь расширить UserCreationForm, используя стиль компоновки Bootstrap для поля username. После тега 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>

Что приводит к следующему:

enter image description here

На данный момент я использую только {{form.as_p}} в моем файле html шаблона:

<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}}, как я делаю сейчас, или мне следует использовать другой метод?

Просто вы можете использовать {{ form.username }} внутри тега input в шаблоне.

Например:

<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>
Вернуться на верх