如何在Django Forms中关联HTML字段？附Bootstrap页面代码示例

嘿，我来帮你搞定Django模型和HTML字段的关联问题！先看看你提供的contact.html代码，然后咱们一步步来实现关联：

你的原始contact.html代码（格式化后） #

{% load static from staticfiles %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        body{ 
            background: url('{% static "img/new4.jpg" %}') no-repeat center fixed; 
            -webkit-background-size: cover; 
            -moz-background-size: cover; 
            -o-background-size: cover; 
            background-size: cover; 
        } 
    </style> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 建议引入Bootstrap CSS，保证表单样式正常 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> -->
</head>
<body>
    <!-- 这里应该是你未贴全的表单部分，我们会在后面替换成关联模型的表单 -->
</body>
</html>

关联Django模型与HTML字段的完整步骤 #

1. 定义Django模型

首先在你的app的models.py里创建对应的数据模型，比如一个联系表单模型：

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length=100, verbose_name="姓名")
    email = models.EmailField(verbose_name="邮箱")
    subject = models.CharField(max_length=200, verbose_name="主题")
    message = models.TextField(verbose_name="留言内容")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="提交时间")

    def __str__(self):
        return f"来自{self.name}的留言"

2. 创建ModelForm表单类

在app目录下新建forms.py，用Django的ModelForm关联模型，自动生成匹配的表单字段，还能直接应用Bootstrap样式：

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = ['name', 'email', 'subject', 'message']
        # 给每个字段添加Bootstrap的form-control类，保证样式统一
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control', 'placeholder': '请输入姓名'}),
            'email': forms.EmailInput(attrs={'class': 'form-control', 'placeholder': '请输入邮箱'}),
            'subject': forms.TextInput(attrs={'class': 'form-control', 'placeholder': '请输入主题'}),
            'message': forms.Textarea(attrs={'class': 'form-control', 'rows': 5, 'placeholder': '请输入留言内容'}),
        }

3. 在视图中处理表单逻辑

修改app的views.py，处理表单的GET/POST请求，验证数据并保存到数据库：

from django.shortcuts import render, redirect
from .forms import ContactForm

def contact_view(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()  # 直接保存到数据库，因为ModelForm已关联模型
            return redirect('contact_success')  # 提交成功后跳转（可自定义成功页面）
    else:
        form = ContactForm()  # GET请求时生成空表单
    return render(request, 'contact.html', {'form': form})

4. 修改contact.html渲染关联后的表单

把原来的HTML表单替换成Django表单的渲染方式，结合Bootstrap布局优化页面：

{% load static from staticfiles %} 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
        body{ 
            background: url('{% static "img/new4.jpg" %}') no-repeat center fixed; 
            -webkit-background-size: cover; 
            -moz-background-size: cover; 
            -o-background-size: cover; 
            background-size: cover; 
        } 
    </style> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card bg-light p-4 shadow">
                    <h2 class="text-center mb-4">联系我们</h2>
                    <form method="POST">
                        {% csrf_token %}
                        <!-- 渲染表单字段，自动关联模型 -->
                        <div class="mb-3">
                            {{ form.name.label_tag }}
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="text-danger mt-1">{{ form.name.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            {{ form.email.label_tag }}
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="text-danger mt-1">{{ form.email.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            {{ form.subject.label_tag }}
                            {{ form.subject }}
                            {% if form.subject.errors %}
                                <div class="text-danger mt-1">{{ form.subject.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <div class="mb-3">
                            {{ form.message.label_tag }}
                            {{ form.message }}
                            {% if form.message.errors %}
                                <div class="text-danger mt-1">{{ form.message.errors.0 }}</div>
                            {% endif %}
                        </div>
                        <button type="submit" class="btn btn-primary w-100">发送留言</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS（可选，用于交互组件） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

5. 最后一步：配置路由与数据库迁移

• 在项目的urls.py中添加路由：

from django.urls import path
from your_app_name.views import contact_view

urlpatterns = [
    path('contact/', contact_view, name='contact'),
    # 可选：添加成功页面路由
    # path('contact/success/', ..., name='contact_success'),
]

• 运行数据库迁移命令，创建模型对应的表：

python manage.py makemigrations
python manage.py migrate

这样一来，你的HTML表单字段就和Django模型完全关联了，用户提交的内容会自动保存到数据库，表单验证也由Django自动处理，完美适配你的Bootstrap页面！

内容的提问来源于stack exchange，提问作者Sheela P.K