Django - 使用 css 样式化 UserCreationForm

Posted 2023-02-24

【中文标题】Django - 使用 css 样式化 UserCreationForm

【英文标题】：Django - Styling a UserCreationForm with css

【发布时间】：2015-03-25 15:22:58

【问题描述】：

Django UserCreationForm 在功能上非常有用且易于使用，但是，它只是将所有内容都扔到页面上，因此所有 TextFields 都在一行中。

无论如何要对表单进行布局和样式设置？特别是将labels 和输入字段放在一个新行上，并可能将一些 CSS 应用于整个表单和表单的各个部分。

【参考方案1】：

每个 django 表单都有三种方法：

as_p()
as_ul()
as_table()

请参阅文档中的 outputting forms as html 部分。您可以根据需要设置此输出的样式。

如果您想对表单的 html 进行更多控制，请阅读同一文档的 this section。

【讨论】：

所以这是 2015 年的，页面不再有效。

【参考方案2】：

在你的forms.py中，你可以继承UserCreationForm并设置css样式。（如何为表单设置cssCSS styling in Django forms）

【参考方案3】：

使用BoundField 和自定义过滤器，并更正UserCreationForm 类的属性名称

使用BoundField 类来显示 HTML 或访问 Form 实例的单个字段的属性。并在带有 __init__.py 的 templatetags 文件夹中添加带有过滤器的 CSS，如果有错误记得在您的 INSTALLED_APP 中添加 templatetags 喜欢 'app.name.templatetags' 喜欢：

   form.username.label_tag 
   form.username|addclass:'form-control' 
   form.password1.label_tag 
   form.password1|addclass:'form-control' 
   form.password2.label_tag 
   form.password2|addclass:'form-control' 

查看源代码 https://github.com/django/django/blob/master/django/contrib/auth/forms.py

密码被命名为“password1”和“password2”