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

Question

在login.html文件中我有以下代码：

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

  {{form.as_p}}

我应该如何给字段添加自定义css类和其他属性？似乎没有人在互联网上遇到过这个问题。我只需要添加一个简单的类。如果有人回答这个问题，提前感谢你的帮助。我真心希望这对其他人也有所帮助。

- Camilo Sanchez

Answer 1

你可以使用 settings.py 中的 ACCOUNT_FORMS 来覆盖默认的LoginForm，例如：

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'})

- andrea.ge

Answer 2

一个有点hacky的方法，但是它可以实现： 从控制台获取表单的HTML，就像这样生成：{{ form.as_p }}，然后将其粘贴到某个地方。 现在构建你自己的表单，包括输入和所有需要的类。 对于新表单中的每个输入字段，获取其在原始表单中编写的ID。 这应该使表单正常工作。 确保你拥有所有输入，包括{{ form.as_p }}生成的隐藏输入（不包括csrf！）

最后，为了显示错误： 对于每个字段插入{{ form.fieldname.errors }} 确保你的字段名称与原始表单中的名称相同。

全部完成。

- Moving.Paper

---

谢谢！很多人似乎都对添加CSS标签感兴趣。由于我需要真正改变表单的HTML（在输入后添加标签；而不是添加标签，而是删除CSS标签（留下占位符标签）），所以这很简单，也是正确的方法！子类化（自定义）小部件、django-widget-tweak、django-crispy-forms 对我的问题没有帮助。 - musicformellons

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

Answer 3

您正在使用Django为您创建的HTML，通过调用form.as_p，就像此示例一样。

您可能正在寻找它下面的示例。 在模板中编写更多标记的位置。 听起来您可能也对这个感兴趣。 创建您的表单并使用类指定要添加到字段的类，例如：

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

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

- quaspas

Answer 4

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

如果你不想从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文件夹中。

- Sencer H.