Django 为登录表单设置样式并添加额外的 span

Posted 2023-02-24

【中文标题】Django 为登录表单设置样式并添加额外的 span

【英文标题】：Django styling login forms and adding additional spans

【发布时间】：2014-05-08 21:10:15

【问题描述】：

我有两个关于表单样式的问题。

对于我的登录，我使用的是 Django 的默认身份验证功能，并且没有手动编写任何视图或表单。

urls.py

urlpatterns += patterns(
    'django.contrib.auth.views',

    url(r'^login/$','login',
    'template_name':'login.html',
    name='qna_login'),

    url(r'^logout/$','logout',
    'next_page':'qna_home',
    name='qna_logout'),
    )

login.html

% extends "base.html" %
% block content%
% if form.errors %
<p class="text-warning"> Your username and/or password didn't match </p>
% endif%
<form role="form" class="form-horizontal" method="post" action="% url 'django.contrib.auth.views.login' %">
<div class="form-group">
% csrf_token %
 form 
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value=" next " />
</div>
</form>
% endblock %

如何为其添加引导样式？

对于新用户注册，我添加了一些特定于引导程序的样式，但需要添加额外的跨度并将标签替换为 Glyphicons。

forms.py

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())
    class Meta:
        model = User
        fields = ('username', 'email', 'password')
    def __init__(self, *args, **kwargs):
        super(UserForm,self).__init__(*args,**kwargs)
        self.fields['username'].widget.attrs.update('class':'form-control','placeholder':'Username')
        self.fields['email'].widget.attrs.update('class':'form-control','placeholder':'Email')
        self.fields['password'].widget.attrs.update('class':'form-control','placeholder':'Password')

我需要做的是替换模板中生成的，比如

<p><label for="id_username">Username:</label> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, numbers and @/./+/-/_ characters</span></p>

通过自定义引导插件和字形图标，例如

<div class="input-group">
            <span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" placeholder="Username">
        </div>

【问题讨论】：

看看 Django 如何呈现其登录表单可能值得一看：github.com/django/django/blob/master/django/contrib/admin/…

【参考方案1】：

您可以单独渲染每个字段，而不是让 Django 使用 form 渲染整个表单。你可以这样写模板 -

<form role="form" class="form-horizontal" method="post" action="% url 'django.contrib.auth.views.login' %">% csrf_token %
    <div class="form-group">
        % for field in form %
            <div class="input-group">
                <span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
                <input class="form-control" id=" field.id_for_label " maxlength="30" name=" field.html_name " value=" field.value " type="text" /> 
                 field.errors 
            </div>
        % endfor %
        <input type="submit" class="btn btn-primary" value="login" />
        <input type="hidden" name="next" value=" next " />
    </div>
</form>

一如既往，就像其他一切一样，Django documentation has everything。

【讨论】：

谢谢，这回答了我的第二个问题，但这不会将引导样式应用于输入框本身。我用它来设计表单的其余部分。如何将 CSS 类和占位符添加到 form.username 和 form.password 等。请注意，我没有为我的登录定义 forms.py 或视图，因为它是由django.contrib.auth。我在文档中找不到方法。

如果您阅读了文档，您可以进一步修改字段。 django 后端唯一需要的是输入字段名称。您甚至可以使用静态表单。

要独立访问已归档的元素（没有 for 循环），请使用： form.username.html_name

使用type="text" 作为密码字段会将密码类型显示为文本，因此遍历表单字段可能不是一个好主意。最好具体一个一个地指定字段。密码字段type="password" 需要隐藏输入的文本。

For Django >= 3.1，你可以使用type=" field.widget_type "' , wich will result in more correct form types (text, password`....）。