2014-03-29 35 views
3

我在表单样式中有两个问题。Django样式登录表单并添加额外跨度

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

的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 %} 

如何引导造型补充呢?

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

我需要做的就是替换一下在模板生成,如

<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> 

通过自定义引导插件和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> 

回答

16

您可以单独渲染每个字段而不是le ding 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

+1

谢谢你,这回答我的第二个问题,但这并不适用引导样式到输入框本身。我用它来设计表单的其余部分。如何将CSS类和占位符添加到{{form.username}}和{{form.password}}等。请注意,我没有为我的登录名定义forms.py或view,因为它提供了django.contrib.auth。我无法在文档中找到方法。 – yayu

+0

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

+0

已更新的答案示例。 –

相关问题