在login.html文件中我有以下代码:
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{form.as_p}}
我应该如何给字段添加自定义css类和其他属性?似乎没有人在互联网上遇到过这个问题。我只需要添加一个简单的类。如果有人回答这个问题,提前感谢你的帮助。我真心希望这对其他人也有所帮助。
在login.html文件中我有以下代码:
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{form.as_p}}
我应该如何给字段添加自定义css类和其他属性?似乎没有人在互联网上遇到过这个问题。我只需要添加一个简单的类。如果有人回答这个问题,提前感谢你的帮助。我真心希望这对其他人也有所帮助。
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'})
{{ form.as_p }}
,然后将其粘贴到某个地方。
现在构建你自己的表单,包括输入和所有需要的类。
对于新表单中的每个输入字段,获取其在原始表单中编写的ID。
这应该使表单正常工作。
确保你拥有所有输入,包括{{ form.as_p }}
生成的隐藏输入(不包括csrf!){{ form.fieldname.errors }}
确保你的字段名称与原始表单中的名称相同。form.as_p
,就像此示例一样。myfield = forms.CharField(
widget=forms.TextInput(attrs={'class':'myclass'}))
form.myfield
将会创建一个带有类名为myclass
的文本输入框。{{ 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
文件夹中。