1.html表单概述

Django开发的是动态Web服务，而非单纯提供静态页面。动态服务的本质在于和用户进行互动，接收用户的输入，根据输入的不同，返回不同的内容给用户。返回数据是我们服务器后端做的，而接收用户输入就需要靠HTML表单。表单<form>...</form>可以收集其内部标签中的用户输入，然后将数据发送到服务端。

一个HTML表单必须指定两样东西：

  • 目的地：用户数据发送的目的URL
  • 方式：发送数据所使用的HTTP方法

例如，Django Admin站点的登录表单包含几个<input>元素：type="text"用于用户名，type="password"用于密码，type="submit"用于“登录"按钮。它还包含一些用户看不到的隐藏的文本字段，Django 使用它们来提高安全性和决定下一步的行为。它还告诉浏览器表单数据应该发往<form>的action属性指定的URL:/admin/，而且应该使用method属性指定的HTTP post方法发送数据。当点击<input type="submit" value="Log in">元素时，数据将发送给/admin/。

html源码如下：

<form action="/admin/login/?next=/admin/" method="post" id="login-form">

    <input type='hidden' name='csrfmiddlewaretoken'              value='NNHZaDVJGduajNMECXygKZkAt8vyEcw9HS2qm2Vdf7brDZrA0qK1R0I7M2p3TKcs' />

    <div class="form-row">

        <label class="required" for="id_username">用户名:</label>

        <input type="text" name="username" autofocus maxlength="254" required id="id_username" />

    </div>

    <div class="form-row">

        <label class="required" for="id_password">密码:</label>

        <input type="password" name="password" required id="id_password" />

        <input type="hidden" name="next" value="/admin/" />

    </div>

    <div class="submit-row">

        <label>&nbsp;</label><input type="submit" value="登录" />

    </div>

</form>

GET和POST ：

处理表单时候只会用到POST和GET方法。

GET方法将用户数据以键=值的形式，以‘&’符号组合在一起成为一个整体字符串，最后添加前缀“？”，将字符串拼接到url内，生成一个类似https://docs.djangoproject.com/search/?q=forms&release=1的URL。

而对于POST方法，浏览器会组合表单数据、对它们进行编码，然后打包将它们发送到服务器，数据不会出现在url中。

GET方法通常用来请求数据，不适合密码表单这一类保密信息的发送，也不适合数据量大的表单和二进制数据。对于这些类型的数据，应该使用POST方法。但是，GET特别适合网页搜索的表单，因为这种表示一个GET请求的URL可以很容易地设置书签、分享和重新提交。

2. django的form表单

通常情况下，我们需要自己手动在HTML页面中，编写form标签和其内的其它元素。但这费时费力，而且有可能写得不太恰当，数据验证也比较麻烦。有鉴于此，Django在内部集成了一个表单模块，专门帮助我们快速处理表单相关的内容。Django的表单模块给我们提供了下面三个主要功能：

  • 准备和重构数据用于页面渲染
  • 为数据创建HTML表单元素
  • 接收和处理用户从表单发送过来的数据

编写Django的form表单，非常类似我们在模型系统里编写一个模型。在模型中，一个字段代表数据表的一列，而form表单中的一个字段代表 <form> 中的一个 <input> 元素。

3. 相关实例

校验字段功能
针对一个实例：注册用户讲解

模型：models.py

class UserInfo(models.Model):

    name=models.CharField(max_length=32)

    pwd=models.CharField(max_length=32)

    email=models.EmailField()

    tel=models.CharField(max_length=32)

模板: register.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" method="post">

    {% csrf_token %}

    <div>

        <label for="user">用户名</label>

        <p><input type="text" name="name" id="name"></p>

    </div>

    <div>

        <label for="pwd">密码</label>

        <p><input type="password" name="pwd" id="pwd"></p>

    </div>

    <div>

        <label for="r_pwd">确认密码</label>

        <p><input type="password" name="r_pwd" id="r_pwd"></p>

    </div>

     <div>

        <label for="email">邮箱</label>

        <p><input type="text" name="email" id="email"></p>

    </div>

    <input type="submit">

</form>

</body>

</html>

视图函数：register

# forms组件

from django.forms import widgets

wid_01=widgets.TextInput(attrs={"class":"form-control"})

wid_02=widgets.PasswordInput(attrs={"class":"form-control"})

class UserForm(forms.Form):

    name=forms.CharField(max_length=32,

                         widget=wid_01

                         )

    pwd=forms.CharField(max_length=32,widget=wid_02)

    r_pwd=forms.CharField(max_length=32,widget=wid_02)

    email=forms.EmailField(widget=wid_01)

    tel=forms.CharField(max_length=32,widget=wid_01)

def register(request):

    if request.method=="POST":

        form=UserForm(request.POST)

        if form.is_valid():

            print(form.cleaned_data)       # 所有干净的字段以及对应的值

        else:

            print(form.cleaned_data)       #

            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}

            print(form.errors.get("name")) # ErrorList ["错误信息",]

        return HttpResponse("OK")

    form=UserForm()

    return render(request,"register.html",locals())

4. 渲染标签功能

方式1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

<h3>注册页面</h3>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-lg-offset-3">

                <form action="" method="post">

                    {% csrf_token %}

                    <div>

                        <label for="">用户名</label>

                        {{ form.name }}

                    </div>

                    <div>

                        <label for="">密码</label>

                        {{ form.pwd }}

                    </div>

                    <div>

                        <label for="">确认密码</label>

                        {{ form.r_pwd }}

                    </div>

                    <div>

                        <label for=""> 邮箱</label>

                        {{ form.email }}

                    </div>

                    <input type="submit" class="btn btn-default pull-right">

                </form>

        </div>

    </div>

</div>

</body>

</html>

方式2：

<form action="" method="post">

                    {% csrf_token %}

                    {% for field in form %}

                        <div>

                            <label for="">{{ field.label }}</label>

                            {{ field }}

                        </div>

                    {% endfor %}

                    <input type="submit" class="btn btn-default pull-right">

</form>

方式3：

<form action="" method="post">

    {% csrf_token %}

    {{ form.as_p }}

    <input type="submit" class="btn btn-default pull-right">

</form>

5.显示错误与重置输入信息功能

视图：

def register(request):

    if request.method=="POST":

        form=UserForm(request.POST)

        if form.is_valid():

            print(form.cleaned_data)       # 所有干净的字段以及对应的值

        else:

            print(form.cleaned_data)       #

            print(form.errors)             # ErrorDict : {"校验错误的字段":["错误信息",]}

            print(form.errors.get("name")) # ErrorList ["错误信息",]

        return render(request,"register.html",locals())

    form=UserForm()

    return render(request,"register.html",locals())

模板：

<form action="" method="post" novalidate>

    {% csrf_token %}

    {% for field in form %}

        <div>

            <label for="">{{ field.label }}</label>

            {{ field }} <span class="pull-right" style="color: red">{{ field.errors.0 }}</span>

        </div>

    {% endfor %}

    <input type="submit" class="btn btn-default">

</form>

6.局部钩子与全局钩子

模板：

# forms组件

from django.forms import widgets

wid_01=widgets.TextInput(attrs={"class":"form-control"})

wid_02=widgets.PasswordInput(attrs={"class":"form-control"})

from django.core.exceptions import ValidationError

class UserForm(forms.Form):

    name=forms.CharField(max_length=32,

                         widget=wid_01

                         )

    pwd=forms.CharField(max_length=32,widget=wid_02)

    r_pwd=forms.CharField(max_length=32,widget=wid_02)

    email=forms.EmailField(widget=wid_01)

    tel=forms.CharField(max_length=32,widget=wid_01)

    # 局部钩子

    def clean_name(self):

        val=self.cleaned_data.get("name")

        if not val.isdigit():

            return val

        else:

            raise ValidationError("用户名不能是纯数字!")

    # 全局钩子

    def clean(self):

        pwd=self.cleaned_data.get("pwd")

        r_pwd=self.cleaned_data.get("r_pwd")

        if pwd==r_pwd:

            return self.cleaned_data

        else:

            raise ValidationError('两次密码不一致!')

def register(request):

    if request.method=="POST":

        form=UserForm(request.POST)

        if form.is_valid():

            print(form.cleaned_data)       # 所有干净的字段以及对应的值

        else:

            clean_error=form.errors.get("__all__")

        return render(request,"register.html",locals())

    form=UserForm()

    return render(request,"register.html",locals())

视图：

<form action="" method="post" novalidate>

            {% csrf_token %}

            {% for field in form %}

                <div>

                    <label for="">{{ field.label }}</label>

                    {{ field }}

                    <span class="pull-right" style="color: red">

                          {% if field.label == 'R pwd' %}

                          <span>{{ clean_error.0 }}</span>

                          {% endif %}

                          {{ field.errors.0 }}

                    </span>

                </div>

            {% endfor %}

            <input type="submit" class="btn btn-default">

</form>

最新文章

  1. JS笔记一
  2. POJ1080Human Gene Functions（LCS变形）
  3. 【原】jquery图片预览
  4. 给Nginx配置一个自签名的SSL证书
  5. MariaDB5.5（mysql）的partitioning设置 for Zabbix3.0
  6. Mac下使用Automator实现截屏编辑保存
  7. Add external tool in the Android Studio
  8. 比列的数目更多，以便找到第一k小值
  9. 移动前端不得不了解的HTML5 head 头标签（首篇）
  10. 用java写的一个简易记事本
  11. (转)Spring中Singleton模式的线程安全
  12. Python模糊查询本地文件夹去除文件后缀（7行代码）
  13. vue 响应式原理
  14. FTP站点设置
  15. nginx实现Ipv6地址解析
  16. WdatePicker 日期控件- 功能及示例
  17. JAVA监听器Listener
  18. ipfs上传下载
  19. re模块(正则)
  20. UVa LA 3029 City Game 状态拆分，最大子矩阵O(n2) 难度:2

热门文章

  1. luoguP4705 玩游戏
  2. Cucumber使用中问题
  3. 批量ping 检测linux主机是否可以通
  4. admin 后台操作表格
  5. 工作任务: 批量处理wav音频文件--shell脚本
  6. JavaScript null和undefined的区别
  7. 更改Jenkins的workspace目录
  8. 使用VS的生成事件命令行指令将生成的exe，dll文件复制到指定文件夹中
  9. （二）校园信息通微信小程序从后台获取首页的数据笔记
  10. 记事本 HTML