如何将自定义HTML表单数据提交存储到Django后端数据库

第一步：修复现有HTML表单问题 #

你现有表单的核心问题是缺少name属性（Django通过name字段获取提交的表单数据）、缺少Django POST请求必须的CSRF令牌、存在属性拼写错误，修改后代码如下：

<div class="card-body">
    <form class="needs-validation" action="/elements/forms/add_investor/" novalidate method="post">
        {% csrf_token %} <!-- 必须添加的Django CSRF校验令牌 -->
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label" for="validationCustom01">Investor Name</label>
                    <!-- 新增name属性，值自定义即可，后续和表单类对应 -->
                    <input type="text" class="form-control" id="validationCustom01" name="investor_name" placeholder="InvestorName" value="MyInvestor" required>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="investor-website" class="form-label">Investor Website</label>
                    <!-- 新增name属性，修正拼写错误的requried为required，修改重复id -->
                    <input class="form-control" type="url" value="https://example.com" id="investor-website" name="investor_website" required>
                    <div class="valid-feedback">
                        Looks good!
                    </div>
                    <div class="invalid-feedback">
                        Please provide a valid web address.
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="investor-portfolio" class="form-label">Investor Portfolio</label>
                    <!-- 新增name属性，修正拼写错误，修改重复id -->
                    <input class="form-control" type="url" value="https://example.com/portfolio" id="investor-portfolio" name="investor_portfolio" required>
                    <div class="invalid-feedback">
                        Please provide a valid web address.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Comments</h4>
                    <p class="card-title-desc">Please add any comments or notes</p>
                </div>
                <div class="card-body">
                    <!-- 将原来的div改为textarea，ckeditor可直接挂载，新增name属性 -->
                    <textarea name="comments" id="ckeditor-classic"></textarea><br>
                    <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>

第二步：编写models.py定义数据库表结构 #

先定义和表单字段对应的数据库模型：

from django.db import models

class Investor(models.Model):
    # 对应表单的投资人姓名字段
    name = models.CharField(max_length=200, verbose_name="投资人姓名")
    # 对应表单的官网地址字段
    website = models.URLField(verbose_name="官网地址")
    # 对应表单的投资组合地址字段
    portfolio_url = models.URLField(verbose_name="投资组合地址")
    # 对应表单的备注字段
    comments = models.TextField(blank=True, null=True, verbose_name="备注")
    
    def __str__(self):
        return self.name

写好后执行python manage.py makemigrations和python manage.py migrate创建数据库表。

第三步：编写forms.py做数据校验和模型映射 #

不需要用Django渲染表单，只需要用ModelForm做数据校验和自动映射入库：

from django import forms
from .models import Investor

class InvestorForm(forms.ModelForm):
    class Meta:
        model = Investor
        # 这里的字段名要和模型定义的字段名一致
        fields = ["name", "website", "portfolio_url", "comments"]
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 把表单字段和前端HTML里的name属性做映射
        self.fields['name'].required = True
        self.fields['website'].required = True
        self.fields['portfolio_url'].required = True

第四步：编写views.py处理表单提交逻辑 #

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

def add_investor(request):
    if request.method == "POST":
        # 把前端提交的数据映射到表单类
        data = {
            "name": request.POST.get("investor_name"),
            "website": request.POST.get("investor_website"),
            "portfolio_url": request.POST.get("investor_portfolio"),
            "comments": request.POST.get("comments"),
        }
        form = InvestorForm(data)
        # 校验通过直接保存到数据库
        if form.is_valid():
            form.save()
            # 提交成功后跳转，可自定义地址
            return redirect("/success/")
        else:
            # 校验失败打印错误信息，可自行处理返回前端
            print(form.errors)
    # GET请求返回表单页面，替换成你自己的模板路径
    return render(request, "your_form_template.html")

第五步：编写urls.py绑定路由 #

在你对应的app的urls.py里添加路由，和你表单里的action地址保持一致：

from django.urls import path
from . import views

urlpatterns = [
    path('elements/forms/add_investor/', views.add_investor, name='add_investor'),
]

单字段映射逻辑说明 #

以投资人姓名为例，映射链路为：
前端HTML输入框配置name="investor_name" -> 提交后数据存入request.POST["investor_name"] -> 视图层把数据赋值给表单类对应模型的name字段 -> 调用save()方法时自动存入数据库investor表的name字段，其他字段逻辑完全一致，你可按照这个逻辑自行扩展剩余字段。

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