HTML的form表单和django的form表单


Posted in Python onJuly 25, 2019

django的表单系统,分2种

  • 基于django.forms.Form的所有表单类的父类
  • 基于django.forms.ModelForm,可以和模型类绑定的Form

直接用原生的form表单,也可以直接用,较麻烦,

django的form表单,也可用可不要,

在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框,

#-----
#django 的form表单

from django import forms

class MyForm(forms.Form):
  #forms对应的是前端的form表单,form 表单要验证的字段
  #都与校验有关系,与数据库没有关系

  #封装性强,可以 在前端指定显示那些字段,label 是显示指定的数据,
  user = forms.CharField(label="用户名")#输入的用户名,
  age = forms.IntegerField(label="年龄")
  email = forms.EmailField()


#form注册

def reg2(request):
  # 实列化出一个form对象,传到前端

  form_obj = MyForm()

  return render(request,"reg2.html",{"form_obj":form_obj})

在前端新建一个注册页面,前端渲染表单,是后端表单类实例出来的对象,用对象调用每个字段,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">
{#  渲染从后端传来的变量,as_p 是段落#}
  {% csrf_token %}
{#  {{ form_obj.as_p }}#}
  <p>姓名{{ form_obj.user }}</p>
  <p>年龄{{ form_obj.age }}</p>
  <p>邮箱{{ form_obj.email }}</p>

</form>

</body>

</html>

可以从浏览器的检查元素中看到,浏览器自动添加了一些东西,

<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">

  <input name="csrfmiddlewaretoken" value="GyY3KE5uM7HeErOEZ8OQFwUJYQYaknrOmavdmfufBuVOHdDSWfeHDyt2pjXarGAV" type="hidden">

  <p>姓名<input name="user" required="" id="id_user" type="text"></p>
  <p>年龄<input name="age" required="" id="id_age" type="number"></p>
  <p>邮箱<input name="email" required="" id="id_email" type="email"></p>

</form>
</body>

如果在前端页面随便输入就提交,前端会做校验,这都是浏览器做的校验,

HTML的form表单和django的form表单

可以自己定制,字段的错误信息提示,和显示信息,

#django 的form表单
 
from django import forms
 
class MyForm(forms.Form):
  #forms对应的是前端的form表单,form 表单要验证的字段
  #都与校验有关系,与数据库没有关系
 
  #封装性强,可以 在前端指定显示那些字段,label 是显示指定的数据,require 是必须填写的,
  user = forms.CharField(label="用户名",min_length=5,max_length=8)#输入的用户名,
  age = forms.IntegerField(label="年龄",error_messages={"required":"必填",})
  email = forms.EmailField()
 
 
#form注册
 
def reg2(request):
 
  errors_obj = " "
  if request.method == "POST":
    form_post = MyForm(request.POST)#拿到请求的所有数据
    if form_post.is_valid():#判断数据是否合法,返回布尔值,
 
      print("data",form_post.cleaned_data)#获取数据,得到一个字典格式,
 
    #添加数据库
    # User.objects.create_user()
  # 实列化出一个form对象,传到前端
 
    #如果是输入不合格式的信息,错误信息,
    else:
      #获取错误信息
      errors_obj = form_post.errors
 
      # print("error",form_post.errors["user"][0])
      # print("error",form_post.errors["age"])
      # print("error",type(form_post.errors))#字典类型,
 
 
  form_obj = MyForm()
 
  return render(request,"reg2.html",{"form_obj":form_obj,"errors_obj":errors_obj})

在前端页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<h3>form表单使用</h3>
<form action="/reg2/" method="post">
{#  渲染从后端传来的变量,as_p 是段落#}
  {% csrf_token %}
{#  {{ form_obj.as_p }}#}
  <p>姓名{{ form_obj.user }} <span>{{ errors.obj.user.0 }}</span> </p>
  <p>年龄{{ form_obj.age }}<span>{{ errors.obj.age.0 }}</span></p>
  <p>邮箱{{ form_obj.email }}<span>{{ errors.obj.email.0 }}</span></p>
  <input type="submit">

</form>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
用Python进行TCP网络编程的教程
Apr 29 Python
Python数据结构之栈、队列的实现代码分享
Dec 04 Python
EM算法的python实现的方法步骤
Jan 02 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
May 24 Python
解决python opencv无法显示图片的问题
Oct 28 Python
对python中的控制条件、循环和跳出详解
Jun 24 Python
Python程序打包工具py2exe和PyInstaller详解
Jun 28 Python
python 生成器和迭代器的原理解析
Oct 12 Python
Tensorflow中的dropout的使用方法
Mar 13 Python
Selenium 滚动页面至元素可见的方法
Mar 18 Python
基于 Python 实践感知器分类算法
Jan 07 Python
python批量提取图片信息并保存的实现
Feb 05 Python
Python3 批量扫描端口的例子
Jul 25 #Python
python3 批量获取对应端口服务的实例
Jul 25 #Python
Python实现微信小程序支付功能
Jul 25 #Python
Form表单及django的form表单的补充
Jul 25 #Python
python实现切割url得到域名、协议、主机名等各个字段的例子
Jul 25 #Python
python按修改时间顺序排列文件的实例代码
Jul 25 #Python
在python中用url_for构造URL的方法
Jul 25 #Python
You might like
短波收音机简介
2021/03/01 无线电
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
玩转python爬虫之正则表达式
2016/02/17 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
C语言编程练习
2012/04/02 面试题
石油大学毕业生自荐信
2014/01/28 职场文书
小学教师国培感言
2014/02/08 职场文书
协议书范本
2014/04/23 职场文书
大学生村官演讲稿
2014/04/25 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android