Django 构建模板form表单的两种方法

通常情况下，我们想构建一张表单时会在模板文件login.html中写入

<form action="/your-name/" method="post">
 <label for="your_name">Your name: </label>
 <input id="your_name" type="text" name="your_name" value="{{ current_name }}">
 <input type="submit" value="OK">
</form>

下面说说我们在使用django是如何在模板文件中生成form表单：

1、自定义显示的字段：

假如我们要在模板中生成一张含有username和content的表单

在app下新建forms.py（/users/forms.py）

from django import forms

class MessageGetForm(forms.Form):
 username = forms.CharField(label='用户', max_length=5) #max_length 浏览器限制用户输入的字符串长度
 content = forms.CharField(label='留言', max_length=100)

在视图文件中引用上边表单字段并传递给模板（users/view.py）

from apps.users.forms import MessageGetForm

class MessageView(View):
 def get(self, request, *args, **kwargs):
  message = MessageGetForm()

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

在模板文件调用(message.html)

<form action="" method="get">
 {{ message }}
</form>

渲染后的页面效果

2、将数据表的字段映射到模板文件form表单

数据表courses_lesson字段如下

在app下新建forms.py（/users/forms.py）

#此处我们假设你的项目文件courses/models.py内含有Lesson类from apps.courses.models import Lesson
from django.forms import ModelForm

class CoursesLessonForm(ModelForm):
 class Meta:
  model = Lesson
  fields = ['add_time', 'name', 'learn_times'] #要显示的字段

在视图文件中引用上边表单字段并传递给模板（users/view.py）

from apps.users.forms import CoursesLessonForm

class MessageView(View):
 def get(self, request, *args, **kwargs):
  message = CoursesLessonForm()

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

在模板文件调用(message.html)

<form action="" method="get">
 {{ message }}
</form>

页面效果图：

所有表单类都作为 django.forms.Form或者  django.forms.ModelForm的子类来创建。您可以把  ModelForm 想象成  Form 的子类。实际上  Form 和  ModelForm 从（私有）  BaseForm 类继承了通用功能，但是这个实现细节不怎么重要。

到此这篇关于Django 构建模板form表单的两种方法的文章就介绍到这了,更多相关Django 构建模板form表单的两种方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Django forms表单 select下拉框的传值实例

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(validators=[user_unique_validate, username_rule_validate, ], required=True, max_length=30, min_length=5, error_messages={'required': '用户名不能为空', 'max_len

  • Django 构建模板form表单的两种方法

    通常情况下,我们想构建一张表单时会在模板文件login.html中写入 <form action="/your-name/" method="post"> <label for="your_name">Your name: </label> <input id="your_name" type="text" name="your_name" va

  • Python的Django框架中forms表单类的使用方法详解

    Python的Django框架中forms表单类的使用方法详解

    Form表单的功能 自动生成HTML表单元素 检查表单数据的合法性 如果验证错误,重新显示表单(数据不会重置) 数据类型转换(字符类型的数据转换成相应的Python类型) Form相关的对象包括 Widget:用来渲染成HTML元素的工具,如:forms.Textarea对应HTML中的<textarea>标签 Field:Form对象中的一个字段,如:EmailField表示email字段,如果这个字段不是有效的email格式,就会产生错误. Form:一系列Field对象的集合,负责验证和

  • Django form表单与请求的生命周期步骤详解

    Django中请求的生命周期 HTTP请求及服务端响应中传输的所有数据都是字符串 步骤 用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务器 url经过wsgi和中间件,到达路由映射表,在路由中一条一条进行匹配 视图函数根据客户端的请求查询响应的数据,返回给 DjangoDjango把客户端想要的数据做为一个字符串返回给客户端 客户端浏览器接收到返回的数据,经过渲染后显示给用户 FBV 一个url对应一个视图函数 在url匹配成功之后,会直接执行对应的视图函数. CBV 一个url对

  • django做form表单的数据验证过程详解

    django做form表单的数据验证过程详解

    我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2.然后创建一个类,继承forms.form 3.然后在这个类中写变量,这个变量的就是input标签中的name,也就是前端往后端传递的k值,我们就可以对这个k值对应的v值做数据内容的校验,比如是邮箱模式,比如是否允许空,最大字段长度,最小字段长度 4.然后在视图函数中,实例化一个步骤3中的类,然后用这

  • Django框架获取form表单数据方式总结

    Django中获取text,password 名字:<input type="text" name="name"><br><br> 密码:<input type="password" name="password"> Form表单提交数据时使用的是post方式,所以在后端接收参数的时候需要先判断请求方式为post时才能请求到数据 name = request.POST.get('

  • 使用Django Form解决表单数据无法动态刷新的两种方法

    使用Django Form解决表单数据无法动态刷新的两种方法

    一.无法动态更新数据的实例 1. 如下,数据库中创建了班级表和教师表,两张表的对应关系为"多对多" from django.db import models class Classes(models.Model): title = models.CharField(max_length=32) class Teacher(models.Model): name = models.CharField(max_length=32) t2c = models.ManyToManyField(

  • django处理select下拉表单实例(从model到前端到post到form)

    现在假如要写一个按照"标题",'内容','作者'等等进行针对性的选择,这时需要涉及到使用select下拉表单来进行选择.django是可以比较简单的解决这个问题的. 下面是model: from django.db import models class TestModel(models.Model): SELVALUE = ( ('标题', 'first'), #前面是展示在前端界面的内容,后面的'first'是真正存在数据库中的 ('内容', 'second'), ('作者', '

  • jquery的ajax提交form表单的两种方法小结(推荐)

    jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

  • PHP自动补全表单的两种方法

    PHP自动补全表单的两种方法

    效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档. 一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了.可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目. 主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,

  • jQuery Form表单取值的方法

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且name值等于后台能识别的参数名. <form method='post' id="punishformID"> <input hidden="hidden" name="Stu" value=@Model.Stu> <in

  • layui 对弹窗 form表单赋值的实现方法

    目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内.如下图: Html 代码: <body> <div class="layui-form" lay-filter="useradmin" id="useradmin"> <div class="layui-form-item"> <label class="layui-form-label">用  户

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

  • Mvc提交表单的四种方法全程详解

    一,MVC HtmlHelper方法 1. Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2. BeginRouteForm 方法 (HtmlHelper, String, Object, FormMethod) 二,传统Form表单Aciton属性提交 三,Jquery+Ajax 提交表单 四,MVC Controller控制器和表单参数传递 MVC HtmlHelper方法 一,Html.BeginForm

  • PHP实现更新中间关联表数据的两种方法

    本文以示例形式展示了PHP实现更新中间关联表数据的两种方法.分享给大家供大家参考之用.具体方法如下: 首先,中间关联表:这里的中间表只存表1的主键和表2的主键,即多对多的形式. 执行数据添加和删除为框架内部方法,不属于思路部分. 方法一:先全部删除旧数据,后添加新数据 $res = $this->classes->classEdit($id, $data); //修改主表数据 if($res) { //先删除关联表数据 $bool = $this->lesson_classes->

  • 在vue-cli的组件模板里使用font-awesome的两种方法

    方法一: npm install font-awesome 在main.js里添加import 'font-awesome/css/font-awesome.css' 方法二: 在官网下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上<link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css&q

随机推荐