Question

所以我有以下用户注册表格，我想要样式。我的forms.py看起来像这样。：

from django.contrib.auth.models import User
from django import forms

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput())

    class Meta:
        model = User
        fields = ['username','email','password']

现在这是我的views.py：

class UserFormView(View):
    form_class =UserForm
    template_name = 'visit/registration/register.html'

    def get(self,request):
        form = self.form_class(None)
        return render(request,self.template_name,{'form':form})

    def post(self, request):
        form = self.form_class(request.POST)

        if form.is_valid():

            user =form.save(commit=False)

            username = form.cleaned_data['username']
            password = form.cleaned_data['password']
            user.set_password(password)
            user.save()

            user = authenticate(username=username, password=password)

            if user is not None:

                if user.is_active:
                    login(request,user)
                    return redirect('visit:index')


        return render(request, 'visit/registration/register.html', {'form': form})

现在我在HTML中有点困惑，因为只有一行将页面中的所有这些字段一起传递。那么我应该如何分别设计这些字段。

{% extends 'visit/base.html'%}

{%block content%}
<!DOCTYPE html>
<html>
{% load staticfiles %}
<link rel = "stylesheet" type = "text/css" href = "{% static "visit/registration.css"%}">
<head>
    <title></title>
</head>

<body>
    <form method="POST" class = "sign-up-form">
        {% csrf_token %} {{ form.as_p }}
        <button type="submit">Submit</button>
    </form>
</body>

</html>
{%endblock%}

Answer 1

您有多种选择，每种选项都有其优缺点：

<强> 1。在forms.py

中添加自定义css类

要使用{{ form.as_p }}方法的简单性，您可以手动将类添加到所有表单字段中，例如：

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={'class' : 'your-custom-class'})
    )

请注意，渲染表单与Bootstrap的风格完全一致可能是一个挑战。

<强> 2。手动渲染表单

您可以在模板中手动编写表单，例如：

<div class="form-group">
  <label for="{{ form.password.id_for_label }}">
    {% trans 'Password' %}
  </label>
  <input type="text" id="{{ form.password.id_for_label }}"
         name="{{ form.password.html_name }}"
         {% if form.password.field.required %}required{% endif %}
         class="form-control{% if form.password.errors %} is-invalid{% endif %}"
         value="{% if form.password.value %}{{ form.password.value }}{% endif %}">
  {% if form.password.help_text %}
    <small class="text-muted">
      {{ form.password.help_text }}
    </small>
  {% endif %}
  {% for err in form.password.errors %}
    <span class="invalid-feedback">{{ err }}</span>
  {% endfor %}
</div>

可以找到有关手动渲染表单字段的更多信息here。

上面的代码片段将使用默认django form renders methods中现有的大多数功能，但另一方面却迫使您编写大量样板代码，从长远来看这些代码很难维护。

第3。使用第三方应用作为前两个选项的混合

您可以使用自定义应用来处理表单的呈现，一个很好的例子是django-crispy-forms。

Answer 2

您只需使用django-bootstrap
这将自动为您呈现引导程序表单。

{% extends 'visit/base.html'%}
{% load bootstrap3 %}

{%block content%}
<!DOCTYPE html>
<html>
{% load staticfiles %}
<link rel = "stylesheet" type = "text/css" href = "{% static "visit/registration.css"%}">
<head>
    <title></title>
</head>

<body>
    <form method="POST" class = "sign-up-form">

        {% csrf_token %} 
        {% bootstrap_form form %}

        <button type="submit">Submit</button>
    </form>
</body>

</html>
{%endblock%}

如何在DJango中使用Bootstrap设置用户注册表单的样式？

2 个答案: