如何修改Django中UserCreationForm的字段尺寸（拉长输入框）？

方法一：用CSS类控制（推荐，符合前后端分离原则） #

这种方式把样式逻辑从Python代码中分离，更易维护和调整。

1. 给表单字段添加自定义CSS类（比如wide-input）：

class SignUpForm(UserCreationForm):
    # 注意：密码字段建议用PasswordInput而非TextInput，浏览器会默认隐藏密码内容
    username = forms.CharField(widget=forms.TextInput(attrs={
        "class": "input wide-input",
        "type": "text",
        "placeholder": "Username",
    }))

    email = forms.CharField(widget=forms.TextInput(attrs={
        "class": "input wide-input",
        "type": "email",
        "placeholder": "Email"
    }))

    password1 = forms.CharField(widget=forms.PasswordInput(attrs={
        "class": "input wide-input",
        "type": "password",
        "placeholder": "Password"
    }))

    password2 = forms.CharField(widget=forms.PasswordInput(attrs={
        "class": "input wide-input",
        "type": "password",
        "placeholder": "Confirm Password"
    }))

    class Meta:
        model = User
        fields = ["username", "email", "password1", "password2"]

2. 在你的CSS文件中添加样式规则：

.wide-input {
    /* 可设置固定宽度，比如400px */
    /* width: 400px; */
    /* 或设置为父容器宽度的100%，适配自适应布局 */
    width: 100%;
    /* 可选：添加内边距优化输入框视觉效果 */
    padding: 8px 12px;
    box-sizing: border-box;
}

如果项目用了Bootstrap等CSS框架，直接用框架自带的宽度类（比如w-100、w-75）替换自定义的wide-input即可，无需额外编写CSS。

方法二：直接在Widget中添加内联样式（快速应急，不推荐长期使用） #

若仅需临时测试快速调整，可直接在字段的attrs中添加style属性：

class SignUpForm(UserCreationForm):
    username = forms.CharField(widget=forms.TextInput(attrs={
        "class": "input",
        "type": "text",
        "placeholder": "Username",
        "style": "width: 400px;"  # 直接指定宽度
    }))

    email = forms.CharField(widget=forms.TextInput(attrs={
        "class": "input",
        "type": "email",
        "placeholder": "Email",
        "style": "width: 400px;"
    }))

    password1 = forms.CharField(widget=forms.PasswordInput(attrs={
        "class": "input",
        "type": "password",
        "placeholder": "Password",
        "style": "width: 400px;"
    }))

    password2 = forms.CharField(widget=forms.PasswordInput(attrs={
        "class": "input",
        "type": "password",
        "placeholder": "Confirm Password",
        "style": "width: 400px;"
    }))

    class Meta:
        model = User
        fields = ["username", "email", "password1", "password2"]

这种方式的缺点是样式与Python代码耦合，后续修改样式需改动后端代码，不符合开发最佳实践。

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