Django样式登录表单并添加额外的跨度

yay*_*ayu 7 css forms django templates twitter-bootstrap

我在形式设计方面有两个问题.

  1. 对于我的登录,我使用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'),
    )
Run Code Online (Sandbox Code Playgroud)

的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 %}
Run Code Online (Sandbox Code Playgroud)

如何为其添加引导样式?

  1. 对于新用户注册,我添加了一些引导程序特定样式,但需要添加额外的跨度并用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'})
Run Code Online (Sandbox Code Playgroud)

我需要做的是替换模板中生成的内容,例如

<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>
Run Code Online (Sandbox Code Playgroud)

通过自定义bootstrap插件和glyphicon,如

<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>
Run Code Online (Sandbox Code Playgroud)

Bib*_*ath 33

您可以单独渲染每个字段,而不是让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>
Run Code Online (Sandbox Code Playgroud)

像往常一样,Django文档拥有一切.

  • 在密码字段中使用`type =“ text”`会将密码类型显示为文本,因此遍历表单字段可能不是一个好主意。最好一一指定字段。对于密码字段,必须输入“ type =“ password”`以隐藏键入的文本。 (2认同)