Django如何让渲染的表单字段适配HTML中已定义的输入框尺寸

Django渲染表单字段时默认不会携带你自定义的.input类，因此会出现尺寸不匹配的问题，可通过以下三种方法解决：

方案1：在forms.py中为表单字段绑定自定义样式类 #

修改你的createUserForm定义，给所有字段的组件添加你已有的input类即可：

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

class createUserForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']
        widgets = {
            'username': forms.TextInput(attrs={'class': 'input'}),
            'email': forms.EmailInput(attrs={'class': 'input'}),
        }

    # UserCreationForm的密码字段为单独定义，需在初始化方法中额外添加类
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['password1'].widget.attrs.update({'class': 'input password'})
        self.fields['password2'].widget.attrs.update({'class': 'input password'})

修改后Django渲染{{form.username}}这类变量时，会自动带上你定义的类，样式和你手写的input完全一致。

方案2：通过CSS全局适配，无需修改后端代码 #

你可以直接在你的CSS文件中合并选择器，让Django默认生成的输入框直接复用.input的样式：

/* 原有.input的样式定义，把Django生成的输入框选择器加进去即可 */
.input, 
form input[type="text"], 
form input[type="email"], 
form input[type="password"] {
    /* 这里保留你原来写的.input的所有样式属性 */
}

方案3：手动渲染表单字段，完全自主控制样式 #

如果你不想修改后端代码，也不想改全局CSS，可以直接手写input标签，同时绑定Django表单的属性，保留表单的校验、值回填能力：
以用户名字段为例，把原来的{{form.username}}替换成以下代码即可：

<input 
  type="text" 
  name="username" 
  class="input" 
  id="{{ form.username.id_for_label }}" 
  value="{{ form.username.value|default:'' }}"
  required
>

内容的提问来源于stack exchange，提问作者user12722902