前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Django搭建博客(七):form的使用

Django搭建博客(七):form的使用

作者头像
渔父歌
发布2018-09-26 18:52:37
5800
发布2018-09-26 18:52:37
举报
文章被收录于专栏:数据结构笔记数据结构笔记

一、form的作用

  1. 将表单抽离页面
  2. 方便数据的处理,可以通过 is_vaild() 来判断数据的有效性
  3. 可以自定义表单样式,相当于 vue.js里的组件,使用更加方便
  4. 可重用

二、form的使用

在应用目录下新建文件 forms.py ,添加如下代码:

代码语言:javascript
复制
from django import forms


class TestForm(forms.Form):
    name = forms.CharField()
    content = forms.CharField()

这样一个 form类就创建好了,使用方法也很简单,如下:

代码语言:javascript
复制
# myblog/views.py
from .forms import TestForm


def form_test(request):
    form = TestForm()
    return render(
        request,
        'myblog/form_test.html',
        {'pagedata':
             {'form': form,}
        }
    )
代码语言:javascript
复制
<!--form_test.html-->
{% extends 'myblog/base.html' %}

{% block main %}

    {{pagedata.form}}

{% endblock %}

运行效果:

不过 form只提供输入框,外层的 form标签和提交按钮都需要自己添加,我们加上 form标签和提交按钮看看:

代码语言:javascript
复制
{% extends 'myblog/base.html' %}

{% block main %}

<form action="{% url 'form_test' %}" method="post">
    {% csrf_token %}
    {{pagedata.form}}
    <input type="submit" value="提交">
</form>

{% endblock %}

显示效果:

当提交表单时我们只需要把数据传给表单类,如下:

代码语言:javascript
复制
def form_test(request):
    if request.method == 'GET':
        form = TestForm()
        return render(request, 'myblog/form_test.html', {
            'pagedata': {'form': form, }
        })
    else:
        form = TestForm(request.POST)
        if form.is_valid():
            data = form.cleaned_data
            return HttpResponse(str(data))
        else:
            return HttpResponse('数据格式错误')

当为 get请求时返回表单页面,当为 post请求的时候,将表单数据作为 TestForm 类的初始化数据,然后检查数据有效性,若数据格式正确则返回提交的数据,否则返回错误信息。

三、自定义 form样式

我们通过重载 Input 类来定义一个布局类,在这个类中我们可以设置输入框的 type,还有输入框的模板,看看下面这个例子:

代码语言:javascript
复制
from django.forms import widgets

class PasswordInput(widgets.Input):
    input_type = 'password'
    template_name = 'myblog/widgets/input.html'

input_type会传递给上下文变量 widget.type ,我们可以在模板里通过 widget.type 来使用,如下:

代码语言:javascript
复制
<input style="border: 2px solid red;border-radius: 10px;height: 20px; width: 200px;padding-left: 10px;" type="{{widget.type}}">

使用的时候只需要把该类传递给 widget参数即可,如:

代码语言:javascript
复制
class TestForm(forms.Form):
    name = forms.CharField()
    content = forms.CharField()
    password = forms.CharField(widget=PasswordInput)

我们来看看效果:

通过 Input 类只能对布局进行一些简单的设置,如类型和样式。

要配置更复杂的功能,如文件上传等,就得重载 Widget 类了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、form的作用
  • 二、form的使用
  • 三、自定义 form样式
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档