将Django注册与Flat UI模板一起使用

您可以通过django表单将django注册与自定义html / css一起使用。步骤如下：

1. 只要您已包括相关的进口，您的urls.py外观就很好，因此不需要更改。

2. forms.py在与您的文件夹相同的文件夹中创建一个文件，views.py并将以下代码添加到中forms.py：

from django import forms

class Signup_form(forms.Form):
    # CSS styles should not be inline. i've moved your style contents under a 'form-control' class
    name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Enter your name', 'id':'name', 'name':'name', 'class' : 'form-control'}))
    email = forms.EmailField(label="Email address", widget=forms.TextInput(attrs={'type':'text', 'placeholder':'Your E-mail', 'id':'email', 'name':'email', 'class' : 'form-control'}))
    pass1 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Password', 'id':'pass1', 'name':'pass1', 'class' : 'form-control'}))
    pass2 = forms.CharField(max_length = 20, widget=forms.TextInput(attrs={'type':'password', 'placeholder':'Confirm Password', 'id':'pass2', 'name':'pass2', 'class' : 'form-control'}))

3.在views.py文件中，您必须将传递Signup_form链接到您的视图层。将您的views.py文件更改为以下内容：

from forms import Signup_form

def signup(request):
    form = Signup_form()

    name = request.POST.get('name','')
    email = request.POST.get('email', '')
    pass1 = request.POST.get('pass1', '')
    pass2 = request.POST.get('pass2', '')

    # Do some validations here

    user = User.objects.create_user(name, email, pass2)
    if user:
        user.save()

    return render(request, 'signup.html', {'form': form})

4.现在，您已经在Views层中传递了Signup_form对象，则可以使用django模板标签在signup.html页面中显示它们。这是您的signup.html样子：

{% extends "base.html" %}

    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% block title %}Signup page{% endblock %}

{% block content %}

<div class="container" style="width:500px">
    <h3 style="margin-top:100px">Sign Up</h3> 
    <hr>
    <div class="login-form">

    <form action="" method="post"> {% csrf_token %}
        <div class="control-group span3" style="width:400px" >
            {{ form.name.errors }}
            {{ form.name }}
            <i class="input-icon fui-user" for="login-name"></i>
    </div>

    <div class="control-group span3" style="width:400px" >
        {{ form.email.errors }}
        {{ form.email }}
        <i class="input-icon fui-mail" for="login-name"></i>
    </div>

    <div class="control-group span3" style="width:400px">
        {{ form.pass1.errors }}
        {{ forms.pass2 }}
        <i class="input-icon fui-lock" for="login-pass"></i>
    </div>


    <div class="control-group span3" style="width:400px">
        {{ form.pass2.errors }}
        {{ forms.pass2 }}
        <i class="input-icon fui-lock" for="login-pass"></i>
    </div>

    <div style="text-align:center"> 
        <input type="submit" class="btn btn-hg btn-primary btn-wide" value="Sign Up">
        <!--<a class="login-link" href="#">Lost your password ?</a> -->
    </div>
</form>

</div><!-- /login-form -->

</div> <!-- /container -->


{% endblock content %}

5.由于我之前已经将您的CSS样式（在第2点中）移到了“ form-control”类中，现在我们将通过在外部custom.css文件中添加样式来放回CSS样式。custom.css在目录static / css / custom.css中创建一个文件，并将以下内容添加到其中：

.form-control {
width:400px;
padding-bottom:15px;
margin-bottom:10px;
}