Django Allauth - 如何将自定义 CSS 类添加到字段？

Posted 2023-02-24

【中文标题】Django Allauth - 如何将自定义 CSS 类添加到字段？

【英文标题】：Django Allauth - How to add custom css class to fields?

【发布时间】：2014-02-17 13:27:41

【问题描述】：

在 login.html 我有：

 <form class="login" method="POST" action="% url 'account_login' %">
  % csrf_token %

  form.as_p

到底如何才能将自定义 css 类和其他属性添加到字段中？互联网上似乎没有人以前遇到过这个问题。我只需要添加一些像类一样简单的东西。如果有人回答这个问题，请提前感谢。我真的希望这对其他人有帮助。

【参考方案1】：

一个有点hacky的方法 - 但它有效： 从您的控制台获取表单的 html，因为它是从 form.as_p 生成的 将其粘贴到触手可及的地方。 现在构建您自己的表单。带有输入和您需要的所有类。 对于新的所有分类表单中的每个输入字段 - 获取原始表单中写入的 ID。 这应该使表单工作。 确保您拥有所有输入 - 包括 form.as_p 生成的隐藏输入（不是 csrf！）

最后显示错误： 为每个字段插入 form.fieldname.errors 确保您的字段名称与原始表单中的一样。

全部完成。

【讨论】：

谢谢！很多人似乎对添加 css 标签感兴趣。因为我需要真正更改表单的 html（输入后的标签；而不是添加而是删除 css 标签（留下占位符标签）），这很简单，而且确实是要走的路！在我看来，子类化（自定义）小部件、django-widget-tweak、django-crispy-forms 对我的问题没有帮助。

这真的很有帮助，但 form.fieldname.errors 对我不起作用，我该怎么做？

【参考方案2】：

每个人都有这个问题，但答案很简单。

如果您不想从 django 应用程序干预 css 并将 CSS 代码附加到您的 .css 文件中，您必须查看 form.as_p 标签的输出（相信firebug 的力量）。并将渲染输出的 CSS 写到 .css 文件中

例如；我假设 form.as_p 输出如下：

<form action="." method="POST" id="login_form" class="login">
<p>
    <label for="id_user_name">User Name:</label>
    <input id="id_user_name" type="text" name="user_name" maxlength="100" />
</p>
<p>
    <label for="id_password">Message:</label>
    <input type="text" name="message" id="id_password" />
</p>
</form>

正如您在输出中看到的，所有标签都有自己的id。因此，您可以通过其 id 编写正确的 css。

或者只是给你的form tag 一个id 并为form tag 下的子标签编写css。这更容易书写和记忆。此外，该 css 可以应用于所有相同的 id 形式。

附录：

如果您需要对它们进行更改，您还必须先将 allauth html 文件从库复制到您的 template 文件夹。

【参考方案3】：

您可以在settings.py 中使用ACCOUNT_FORMS 覆盖默认登录表单，例如：

ACCOUNT_FORMS = 'login': 'yourapp.forms.YourLoginForm'

并相应地写一个YourLoginForm。

# yourapp/forms.py

from allauth.account.forms import LoginForm

class YourLoginForm(LoginForm):
    def __init__(self, *args, **kwargs):
        super(YourLoginForm, self).__init__(*args, **kwargs)
        self.fields['login'].widget = forms.TextInput(attrs='type': 'email', 'class': 'yourclass')
        self.fields['password'].widget = forms.PasswordInput(attrs='class': 'yourclass')

【参考方案4】：

您正在使用 Django 通过调用 form.as_p just like this example 为您创建的 HTML。

您可能正在寻找什么is the example right below it. 在模板中编写更多标记的地方。

It sounds like you might also be interested in this. 创建表单并指定要添加到字段中的类，使用类似：

myfield = forms.CharField(
            widget=forms.TextInput(attrs='class':'myclass'))

现在在模板中调用form.myfield 将创建一个带有myclass 类的输入文本字段。