如何自定义HTML表单并关联Django模型实现数据保存？

问题概述 #

需要制作带验证和图标的美观HTML表单，提交后将数据保存到Django模型实例，现有代码如下，求助两个核心问题：

1. 能否对每个Django字段单独格式化（效果优于crispy forms，使用gentelella模板）？
2. 将表单字段值关联到模型字段并保存到数据库的最佳方式是什么？当前使用ModelForm是否符合需求？

现有代码片段 #

model.py #

from django.db import models
import uuid

class Client(models.Model):    
    client_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    first_name = models.CharField(max_length=256)
    last_name = models.CharField(max_length=256)
    date_of_birth = models.DateField(blank=True, null=True)
    email = models.EmailField(null=True)

form.py #

from django import forms
from .models import Client

class ClientNewForm(forms.ModelForm):
    class Meta:
        model = Client    
        fields = "__all__"

views.py（待优化） #

from django.views.generic.edit import CreateView
from django.urls import reverse_lazy
from django.contrib import messages
from .models import Client
from .forms import ClientNewForm

class ClientCreateView(CreateView):
    model=Client
    form_class = ClientNewForm
    template_name = 'Client/client_new.html'
    
    context_object_name = 'client' # 此处无实际作用
    success_url = reverse_lazy('WebApp:clients')

        
    def form_valid(self, form):
        model = form.save(commit=False)
        #model.submitted_by = self.request.user
        model.save()
        messages.success(self.request, "The Client is created successfully.")
        return super(ClientCreateView, self).form_valid(form)

Template #

<div class='row'>
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_panel">
        <div class="x_title">
            <h2>NEW REGISTRATION</h2>
        </div>
        <div class="x_content">
            <form class="form-horizontal form-label-left input_mask" action="" method="post"> 
                {%  csrf_token %}
                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-fn" placeholder="First Name" name="first_name">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-ln" placeholder="Last Name" name="last_name">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left"  id="in-dob" name="date_of_birth" placeholder="Date of Birth (mm/dd/yyyy)" >
                    <span class="fa fa-calendar form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-email" placeholder="Email" name="email">
                    <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="form-buttons">
                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-9">
                    <a href="{% url 'WebApp:clients' %}" type="button" class="btn btn-round btn-danger">Cancel</a>
                    <a href="{% url 'WebApp:client-new' %}" type="button" class="btn btn-round btn-warning">Reset</a>
                    <input type="submit" value="Save" class="btn btn-round btn-success"/>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

解决方案 #

问题1：字段单独格式化适配Gentelella模板 #

完全可以脱离crispy forms，通过ModelForm定制字段属性+模板手动渲染的方式，精确贴合Gentelella样式，步骤如下：

1. 优化ModelForm，定制字段属性

在ClientNewForm中给每个字段指定Gentelella的CSS类、ID、占位符，同时配置合适的widget：

from django import forms
from .models import Client
from django.forms.widgets import DateInput

class ClientNewForm(forms.ModelForm):
    class Meta:
        model = Client
        # 明确指定需要的字段，排除自动生成的client_id
        fields = ['first_name', 'last_name', 'date_of_birth', 'email']
        widgets = {
            'first_name': forms.TextInput(attrs={
                'class': 'form-control has-feedback-left',
                'id': 'in-fn',
                'placeholder': 'First Name'
            }),
            'last_name': forms.TextInput(attrs={
                'class': 'form-control has-feedback-left',
                'id': 'in-ln',
                'placeholder': 'Last Name'
            }),
            'date_of_birth': DateInput(attrs={
                'class': 'form-control has-feedback-left',
                'id': 'in-dob',
                'placeholder': 'Date of Birth (mm/dd/yyyy)',
                'type': 'text'
            }, format='%m/%d/%Y'),
            'email': forms.EmailInput(attrs={
                'class': 'form-control has-feedback-left',
                'id': 'in-email',
                'placeholder': 'Email'
            })
        }

    # 确保日期字段能正确解析前端输入的格式
    def clean_date_of_birth(self):
        data = self.cleaned_data.get('date_of_birth')
        return data

2. 优化模板，手动渲染字段并保留验证提示

保留Gentelella的结构，用Django表单字段替代原生input，自动关联验证规则和错误提示：

<div class='row'>
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>NEW REGISTRATION</h2>
            </div>
            <div class="x_content">
                <form class="form-horizontal form-label-left input_mask" action="" method="post"> 
                    {% csrf_token %}
                    <!-- 渲染first_name字段 -->
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback {% if form.first_name.errors %}has-error{% endif %}">
                        {{ form.first_name }}
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        {% for error in form.first_name.errors %}
                            <span class="help-block">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <!-- 渲染last_name字段 -->
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback {% if form.last_name.errors %}has-error{% endif %}">
                        {{ form.last_name }}
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                        {% for error in form.last_name.errors %}
                            <span class="help-block">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <!-- 渲染date_of_birth字段 -->
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback {% if form.date_of_birth.errors %}has-error{% endif %}">
                        {{ form.date_of_birth }}
                        <span class="fa fa-calendar form-control-feedback left" aria-hidden="true"></span>
                        {% for error in form.date_of_birth.errors %}
                            <span class="help-block">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <!-- 渲染email字段 -->
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback {% if form.email.errors %}has-error{% endif %}">
                        {{ form.email }}
                        <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                        {% for error in form.email.errors %}
                            <span class="help-block">{{ error }}</span>
                        {% endfor %}
                    </div>

                    <div class="form-buttons">
                        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-9">
                            <a href="{% url 'WebApp:clients' %}" type="button" class="btn btn-round btn-danger">Cancel</a>
                            <button type="reset" class="btn btn-round btn-warning">Reset</button>
                            <input type="submit" value="Save" class="btn btn-round btn-success"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

问题2：表单字段关联模型并保存的最佳方式 #

你当前使用的ModelForm就是最佳方案，它是Django专门设计用来关联模型、处理字段映射和数据保存的工具，只需优化View代码即可：

优化后的views.py

from django.views.generic.edit import CreateView
from django.urls import reverse_lazy
from django.contrib import messages
from .models import Client
from .forms import ClientNewForm

class ClientCreateView(CreateView):
    model = Client
    form_class = ClientNewForm
    template_name = 'Client/client_new.html'
    success_url = reverse_lazy('WebApp:clients')

    def form_valid(self, form):
        # 若需添加额外字段（如提交人），在此处赋值
        # form.instance.submitted_by = self.request.user
        response = super().form_valid(form)
        messages.success(self.request, "The Client is created successfully.")
        return response

为什么ModelForm是最佳选择：

1. 自动字段映射：无需手动在模板中写name属性，自动关联模型字段
2. 内置验证：继承模型字段的验证规则（如邮箱格式、字符长度），无需重复编写验证逻辑
3. 简化保存：调用form.save()即可完成数据库写入，无需手动创建模型实例并逐个赋值
4. 可扩展性：模型字段变更时，只需修改Model或ModelForm，模板无需大量调整

内容的提问来源于stack exchange，提问作者DjangoRulz