如何在Django UserCreationForm中实现Bootstrap输入框后缀布局

不需要依赖额外库，有两种可行方案，根据你的需求选择：

方案一：手动渲染表单字段（推荐，直观灵活） #

放弃{{ form.as_p }}自动渲染方式，手动控制每个字段的HTML结构，轻松把用户名字段套进Bootstrap的input-group里。

步骤1：修改forms.py，给字段加Bootstrap样式类 #

先给表单字段的widget添上form-control类，确保样式匹配：

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django import forms

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        model = User
        fields = ('username', 'password1', 'password2')
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 给用户名输入框加样式和占位符
        self.fields['username'].widget.attrs.update({
            'class': 'form-control',
            'placeholder': '请输入用户名前缀'
        })
        # 密码字段也加上Bootstrap样式
        self.fields['password1'].widget.attrs.update({'class': 'form-control'})
        self.fields['password2'].widget.attrs.update({'class': 'form-control'})

步骤2：在模板里手动渲染每个字段 #

直接编写HTML结构，把用户名字段放在input-group中，后缀添加@company.domain.com：

<form method="post">
  {% csrf_token %}
  
  <!-- 用户名字段 -->
  <div class="mb-3">
    <label for="{{ form.username.id_for_label }}" class="form-label">{{ form.username.label }}</label>
    <div class="input-group">
      {{ form.username }}
      <span class="input-group-text">@company.domain.com</span>
    </div>
    <!-- 错误提示 -->
    {% if form.username.errors %}
      <div class="text-danger mt-1">
        {% for error in form.username.errors %}
          <small>{{ error }}</small>
        {% endfor %}
      </div>
    {% endif %}
    <!-- 帮助文本 -->
    {% if form.username.help_text %}
      <div class="form-text">{{ form.username.help_text }}</div>
    {% endif %}
  </div>

  <!-- 密码1字段 -->
  <div class="mb-3">
    <label for="{{ form.password1.id_for_label }}" class="form-label">{{ form.password1.label }}</label>
    {{ form.password1 }}
    {% if form.password1.errors %}
      <div class="text-danger mt-1">
        {% for error in form.password1.errors %}
          <small>{{ error }}</small>
        {% endfor %}
      </div>
    {% endif %}
    {% if form.password1.help_text %}
      <div class="form-text">{{ form.password1.help_text }}</div>
    {% endif %}
  </div>

  <!-- 密码2字段 -->
  <div class="mb-3">
    <label for="{{ form.password2.id_for_label }}" class="form-label">{{ form.password2.label }}</label>
    {{ form.password2 }}
    {% if form.password2.errors %}
      <div class="text-danger mt-1">
        {% for error in form.password2.errors %}
          <small>{{ error }}</small>
        {% endfor %}
      </div>
    {% endif %}
    {% if form.password2.help_text %}
      <div class="form-text">{{ form.password2.help_text }}</div>
    {% endif %}
  </div>

  <button type="submit" class="btn btn-primary">注册</button>
</form>

这种方法的优势是完全可控HTML结构，想怎么调整就怎么调整，适合快速实现需求。

方案二：自定义Widget（适合需要复用的场景） #

如果多个表单都需要这种带后缀的用户名输入框，可以自定义Widget，让它自动渲染input-group结构。

步骤1：创建自定义Widget #

在forms.py里编写一个继承自TextInput的Widget：

from django.forms.widgets import TextInput

class UsernameWithDomainWidget(TextInput):
    def render(self, name, value, attrs=None, renderer=None):
        # 先渲染原始的input标签
        input_html = super().render(name, value, attrs, renderer)
        # 包裹成Bootstrap的input-group结构
        return f'''
        <div class="input-group">
            {input_html}
            <span class="input-group-text">@company.domain.com</span>
        </div>
        '''

步骤2：在表单里使用这个Widget #

修改CustomUserCreationForm，把username字段的widget换成自定义的：

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from django import forms

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        model = User
        fields = ('username', 'password1', 'password2')
        widgets = {
            'username': UsernameWithDomainWidget(attrs={'class': 'form-control'}),
            'password1': forms.PasswordInput(attrs={'class': 'form-control'}),
            'password2': forms.PasswordInput(attrs={'class': 'form-control'}),
        }

步骤3：模板里简化渲染 #

这时候不用逐个编写字段，用循环渲染所有字段即可：

<form method="post">
  {% csrf_token %}
  {% for field in form %}
    <div class="mb-3">
      <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
      {{ field }}
      {% if field.errors %}
        <div class="text-danger mt-1">
          {% for error in field.errors %}
            <small>{{ error }}</small>
          {% endfor %}
        </div>
      {% endif %}
      {% if field.help_text %}
        <div class="form-text">{{ field.help_text }}</div>
      {% endif %}
    </div>
  {% endfor %}
  <button type="submit" class="btn btn-primary">注册</button>
</form>

这种方法适合需要在多个地方复用相同输入框结构的场景，一次定义多次使用。

内容的提问来源于stack exchange，提问作者Domenico Spidy Tamburro