（django）03 django表单

django表单

文章目录

• django表单
• • 1.使用HTML原生form
  • • （1）myform.html
    • （2）修改views.py
    • （3）定义路由
    • （4）效果
  • 2.使用django的Form
  • • （1）myform2.html
    • （2）自定义forms myforms.py
    • （3）定义视图函数
    • （4）效果
  • 3.使用bootstrap的form
  • • (1)安装bootstrap3并在settings.py注册
    • （2）HTML引入bootstrap的js、css
    • （3）自定义model
    • （4）自定义form
    • （5）定义视图函数
    • （6）注册路由
    • (7)效果

1.使用HTML原生form （1）myform.html

    
    




    

        

            user name:
            
        
        

            user email:
            
        
        

            Submit
        
    

• 注意这里的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

    
        
        
    
    
        

            {% csrf_token %}
            {{ form.as_p }} # 这里把下面要定义的域渲染到页面上
            
        
    

（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 %}

    


{# Display a form #}

    

      {% csrf_token %}

      {% bootstrap_form form %}

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

    

{# 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)效果