如何使用 CSS 自定义 ModelForm - Django

Question

我无法找到一种方法来使用 CSS 更改创建的表单的外观。

这是我正在使用的简单代码：

create.html

{% block content %}
<h4 class="mb-3">Form Order</h4>
  <form action="." method="post" class="order-form">
    {{ form.as_p }}
    <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
    {% csrf_token %}
  </form>
{% endblock %}

forms.py

from django import forms
from .models import Order

class OrderCreateForm(forms.ModelForm):
    class Meta:
        model = Order
        fields = ['first_name', 'last_name', 'email', 'address', 'postal_code', 'city']

views.py

from django.shortcuts import render
from .models import OrderItem
from .forms import OrderCreateForm
from cart.cart import Cart
from .tasks import order_created


def order_create(request):
    cart = Cart(request)
    if request.method == 'POST':
        form = OrderCreateForm(request.POST)
        if form.is_valid():
            order = form.save()
            for item in cart:
                OrderItem.objects.create(order=order,
                                         product=item['product'],
                                         price=item['price'],
                                         quantity=item['quantity'])
            # clear the cart
            cart.clear()
            return render(request, 'created.html', {'order': order})
            # launch asynchronous task
            order_created.delay(order.id)
    else:
        form = OrderCreateForm()
    return render(request, 'create.html', {'cart': cart,
                                                        'form': form})

我想使用引导 css 文件自定义我的 forms.py 字段，如以下代码

<div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>
            </div>

            <div class="mb-3">
              <label for="email">Email <span class="text-muted"></span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="mb-3">
              <label for="address">Address</label>
              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>


            <div class="mb-3">
              <label for="zip">Postal Code</label>
              <input type="text" class="form-control" id="zip" placeholder="" required>
              <div class="invalid-feedback">
                Portal code required.
              </div>
            </div>

为了可以更改它，有什么方法可以在我的 forms.py 文件中调用 CSS 文件吗？

Answer 1

尝试以下方式。它应该工作

from django import forms
from .models import Order


class OrderCreateForm(forms.ModelForm):

    class Meta:
        model = Order

    first_name = forms.TextInput(attrs={'id': 'firstname',  'class':'form-control'})
    lastName = forms.TextInput(attrs={'id': 'lastname',  'class':'form-control'})

Answer 2

回答@Sulthon 的问题：如果您的所有字段都是自定义的，您可以将“字段”属性定义为一个空列表。

from django import forms
from .models import Order


class OrderCreateForm(forms.ModelForm):

    class Meta:
        model = Order
        fields = []

    first_name = forms.TextInput(attrs={'id': 'firstname',  'class':'form-control'})
    lastName = forms.TextInput(attrs={'id': 'lastname',  'class':'form-control'})

Answer 3

唯一对我有用的方法是：

from django import forms
from .models import Contactt


class Contactf(forms.ModelForm):

    class Meta():
        model = Contactt
        fields = ['email', 'name', 'text']
        widgets = {
            'email': forms.EmailInput(attrs={
            'class': 'form-control',
            'style': 'background-color: black',
            'placeholder': 'Your Email',
            }),
            'name': forms.TextInput(attrs={
            'class': 'form-control',
            'style': 'background-color: black',
            'placeholder': 'Your Name'}),
            'text': forms.Textarea(attrs={
            'rows': 3,
            'style': 'background-color: black',
            'class': 'form-control',
            'placeholder': 'Hello Roylan,'})
         }

Django Documentation for a similar example