（django）03 django表单

akswyh

已于 2022-07-07 22:36:06 修改

阅读量316

点赞数 1

分类专栏： Coding 文章标签： django python 后端

于 2022-07-07 15:28:06 首次发布

本文链接：https://blog.youkuaiyun.com/akswyh/article/details/125660139

版权

Coding 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了在Django中使用HTML原生form、Django内置Form以及Bootstrap的form来创建和处理用户输入的方法。从HTML元素的定义、表单验证到视图函数的编写，详细展示了每个步骤，并给出了实际效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

django表单

文章目录

django表单

1.使用HTML原生form

（1）myform.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生HTML form</title>
</head>
<body>

<div class="form_div">
    <form id="user-info" class="form" action="{% url 'myform1' %}" method="post">
        <div class="input-group">
            <label for="user-name">user name:</label>
            <input type="text" id="user-name" name="user-name" required/>
        </div>
        <div class="input-group">
            <label for="user-email">user email:</label>
            <input type="email" id="user-email" name="user-email" required/>
        </div>
        <div class="input-group">
            <button type="submit" id="submit">Submit</button>
        </div>
    </form>
</div>
</body>
</html>

注意这里的form action的写法，url找的是urls.py中定义对应路由的别名
为了使view.py视图函数可以找到表单中提交的信息，这里的input都要带上别名
使用HTML原生的form要禁用CSRF

（2）修改views.py

# 1.使用HTML原生form
@csrf_exempt
def myform1(request):
    # 处理表单的POST提交
    if request.method == 'POST':
        # 获取表单字段
        name = request.POST.get('user-name', '')
        email = request.POST.get('user-email', '')
        # 处理表单字段
        data = {'user-name': name, 'user-email': email}
        data = json.dumps(data)
        print(data)
        print(type(data))
        # 响应表单提交
        return HttpResponse(data, content_type="application/json")
    return render(request, 'myform.html', locals())

（3）定义路由

path('myform1',views.myform1,name="myform1"),

（4）效果

请添加图片描述

2.使用django的Form

（1）myform2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action={% url "myform2" %} method="post">
            {% csrf_token %}
            {{ form.as_p }} # 这里把下面要定义的域渲染到页面上
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

（2）自定义forms myforms.py

from django import forms

class NameForm(forms.Form):
    first_name = forms.CharField(label='first name', max_length=50)
    last_name = forms.CharField(label='last name', max_length=50)

（3）定义视图函数

from django.http import HttpResponse
from django.shortcuts import render

from .myforms import NameForm


def myform2(request):
    # 处理POST请求
    if request.method == 'POST':
        # 实例化表单并用请求中的数据填充它
        form = NameForm(request.POST)
        # 验证表单数据的合理性:
        if form.is_valid():
            # 清洗表单数据
            first_name = form.cleaned_data['first_name']
            last_name = form.cleaned_data['last_name']
            print(first_name + " " + last_name)
            # 响应
            return HttpResponse("Hello, " + first_name + " " + last_name)

    # 处理其他请求方式
    else:
        # 实例化空表单
        form = NameForm()
    # 将空表单实例传入模板进行渲染
    return render(request, 'myform2.html', {'form': form})

（4）效果

请添加图片描述

django内置的form可以使用CSRF

3.使用bootstrap的form

(1)安装bootstrap3并在settings.py注册

安装bootstrap3

pip install django-bootstrap3

settings.py注册

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap3',
    "myforms"
]

（2）HTML引入bootstrap的js、css

boots.html

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
<head>
    <style>
    .col-center-block {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>

{# Display a form #}
<div class="col-xs-6 col-md-4 col-center-block">
    <form action={% url "bootshome" %} method="post" class="form">
      {% csrf_token %}

      {% bootstrap_form form %}

      {% bootstrap_button button_type="submit" content="OK" %}
      {% bootstrap_button button_type="reset" content="Cancel" %}

    </form>
</div>
{# Read the documentation for more information #}

和上面一样，url找的是urls.py中的别名
form标签里面定义的都是bootstrap样式的
{% bootstrap_form form %}这里的form由django传到前端

（3）自定义model

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    first_name = models.CharField(max_length=50)
    last_name = models.CharField(max_length=50)

    def __str__(self):
        return self.first_name

（4）自定义form

from django import forms
from ..models import UserInfo

class UserInfoForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        fields = ("first_name", "last_name")

（5）定义视图函数

from myforms.myforms.UserInfoForm import UserInfoForm

def register(request):
    if request.method == "GET":
        form = UserInfoForm()
        return render(request, "boots.html", {"form": form})
    if request.method == "POST":
        form = UserInfoForm(data=request.POST)
        first_name = form.data.get('first_name')
        last_name = form.data.get('last_name')
        return HttpResponse("Hello, " + str(first_name) + " " + str(last_name))

（6）注册路由

path('boots/',form_views.register,name="bootshome"),

(7)效果

请添加图片描述