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

【问题标题】：Django Allauth - How to add custom css class to fields?Django Allauth - 如何将自定义 CSS 类添加到字段？
【发布时间】：2014-02-17 13:27:41
【问题描述】：

在 login.html 我有：

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

  {{form.as_p}}

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

【问题讨论】：

标签： html css django django-allauth

【解决方案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 类的输入文本字段。

【讨论】：