1 在student_list添加一个a标签，

  1. <p><a href="/app01/add_student"  class="btn btn-primary">添加</a> </p>

2 urls分发路由

  1. url(r'^app01/', include('app01.urls')),
  1. url(r'^add_student$', views.add_student),

3 前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
  7.     <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
  8. </head>
  9. <body>
  10. <div style="width:500px;margin:0 auto">
  11.     <h4 style="margin-left: 25px;">添加学生</h4>
  12.     <form class="form-horizontal" action="/app01/add_student" method="POST">
  13.         {% csrf_token %}
  14.         <div class="form-group">
  15.             <label class="col-sm-2 control-label">姓名:</label>
  16.             <div class="col-sm-10">
  17.                 {{ obj.name }}{{ obj.errors.name.0 }}
  18.             </div>
  19.         </div>
  20.  
  21.         <div class="form-group">
  22.             <label class="col-sm-2 control-label">年龄:</label>
  23.             <div class="col-sm-10">
  24.                 {{ obj.age }} {{ obj.errors.age.0 }}
  25.             </div>
  26.         </div>
  27.         <div class="form-group">
  28.             <label class="col-sm-2 control-label">邮箱:</label>
  29.             <div class="col-sm-10">
  30.                 {{ obj.email }} {{ obj.errors.email.0 }}
  31.             </div>
  32.         </div>
  33.         <div class="form-group">
  34.             <label class="col-sm-2 control-label">班级:</label>
  35.             <div class="col-sm-10">
  36.                 {{ obj.cls_id }} {{ obj.errors.cls_id.0 }}
  37.             </div>
  38.         </div>
  39.         <div class="form-group">
  40.             <div class="col-sm-offset-2 col-sm-10">
  41.                 <input type="submit" class="btn btn-default" value="提交"/>
  42.             </div>
  43.         </div>
  44.     </form>
  45. </div>
  46. </body>
  47. </html>

4 视图

  1. def add_student(request):
  2.     if request.method == 'GET':
  3.         obj = StudentForm()
  4.         return render(request, 'app01_add_student.html', {'obj': obj})
  5.  
  6.     else:
  7.         obj = StudentForm(request.POST)
  8.         if obj.is_valid():
  9.             models.Student.objects.create(**obj.cleaned_data)
  10.             return redirect('/app01/students')
  11.         else:
  12.             return render(request,  'app01_add_student.html', {'obj': obj})

5 数据规则类设置

  1. class StudentForm(Form):
  2.     name = fields.CharField(max_length=8, min_length=2,
  3.                             widget=widgets.TextInput(attrs={'class': 'form-control'})
  4.                             )
  5.     age = fields.IntegerField(max_value=25, min_value=18,
  6.                               widget=widgets.TextInput(attrs={'class': 'form-control'})
  7.                               )
  8.     email = fields.EmailField(widget=widgets.TextInput(attrs={'class': 'form-control'})
  9.                               )
  10.     cls_id = fields.IntegerField(
  11.         # widget=widgets.Select(choices=[(1, '上海'), (2,'北京')])
  12.         # choices 类型为[(),()]
  13.         widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'),
  14.                               attrs={'class': 'form-control'})
  15.     )

6 补充：如何通过form表单实现： 给前端标签添加class等属性，以及设置Input输入框的type属性

  1. # Form生成html标签
  2.     a. 通过Form生成Input输入框，Form标签，以及submit标签还是要在前端写的，
  3.         但是Form标签内的Input标签可以在后台实现；只需要按以下步骤
  4.         - views定义StudentForm(Form)类
  5.         - views视图函数将Form实例化对象传递给前端
  6.         - 前端{{ obj.段 }}即可
  7.  
  8.     b. 通过Form设置前端Input的type属性,即设置不同类型的输入框
  9.         # 设置name为text, cls_id为下拉框
  10.         class StudentForm(Form):
  11.             name = fields.CharField(widget= widgets.InputText())
  12.             cls_id = fields.IntegerField(widget = widgets.Select())
  13.  
  14.     c. 设置下拉框的内容choices属性
  15.         class StudentForm(Form):
  16.             cls_id = fields.IntegerField(
  17.                 widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'))
  18.             )
  19.         注意： choices的值必须[元组，(), ()]类型
  20.         widget=widgets.Select(choices=[(1, '上海'), (2,'北京')])
  21.  
  22.     d.设置input输入框的class属性 -- attrs
  23.         name = fields.CharField(max_length=8, min_length=2,
  24.                         widget=widgets.TextInput(attrs={'class': 'form-control'})
  25.                         )
  26.         cls_id = fields.IntegerField(
  27.                 widget=widgets.Select(
  28.                                         choices=models.Classes.objects.values_list('id', 'title'),
  29.                                         attrs={'class': 'form-control'}
  30.                                     )
  31.             )
  32.  
  33.         注意： attrs参数必须放在TextInput或者Select等内部，而且值必须为字典
  34.  
  35.     e. 通过Form设置前端Input的默认显示值
  36.         只要在视图函数将实例化一个Form对象，并且设置initial值即可
  37.             student_dict = models.Student.objects.filter(id=nid).values('name', 'age', 'email', 'cls_id').first()
  38.             obj = StudentForm(initial=student_dict)

　　

[oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）的更多相关文章

  1. Django笔记&教程 6-3 使用模型（models）创建表单（form）

    Django 自学笔记兼学习教程第6章第3节--使用模型(models)创建表单(form) 点击查看教程总目录 本文参考:Forms for models 1 - 初步介绍 很多时候,我们使用的表单 ...

  2. 表单（form）成为 ajax 提交的表单（form）

    1.form <form id="ff" method="post"> <div> <label for="name&q ...

  3. Django笔记 —— 表单（form）

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  4. Django使用普通表单、Form、以及modelForm操作数据库方式总结

    Django使用普通表单.Form.以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页面: 在表单页面填写信息,并提交: 表单数据验证 验证 ...

  5. Django笔记&教程 6-1 表单（Form）介绍

    Django 自学笔记兼学习教程第6章第1节--表单(Form)介绍 点击查看教程总目录 1 介绍 如果网站要让用户输入并提交数据(比如注册登录),则需要用到表单. 单纯的html也能写出表单,格式一 ...

  6. Django笔记&教程 6-2 表单（Form）基础操作

    Django 自学笔记兼学习教程第6章第2节--表单(Form)基础操作 点击查看教程总目录 1 - 编写表单类 创建新的表单类的代码,一般写到一个专门的forms.py文件中(一般放在对应的app文 ...

  7. 10天学会phpWeChat——第八天：Form类，丰富表单提交的字段类型

    通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...

  8. jquery.form.js（ajax表单提交）

    Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...

  9. 表单 - Form - EasyUI提供的表单异步提交

    方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...

随机推荐

  1. leetcode——1

    1. 题目  Two Sum Given an array of integers, find two numbers such that they add up to a specific targ ...

  2. 汶川大地震中的SAP成都研究院

    5·12汶川地震,发生于北京时间(UTC+8)2008年5月12日(星期一)14时28分04秒,此次地震的面波震级 里氏震级达8.0Ms.矩震级达8.3Mw,地震烈度达到11度.地震波及大半个中国及亚 ...

  3. JavaScript and Ruby in ABAP

    Netweaver里有个mini JavaScript engine CL_JAVA_SCRIPT, 对于Js code的编译和执行都是用system call完成. 只能当玩具用:report SJ ...

  4. 关于Mongodb RC的思考

    Mongodb Oplog 和 Journal log 的关系与执行顺序 就关系来说,op log实际上与数据是一致的概念. 但在有 RC的时候,执行顺序 w  j 的设置 如果不设置 j ,则默认是 ...

  5. 动态规划专题（二）——树形DP

    前言 \(DP\)这东西真的是博大精深啊...... 简介 树形\(DP\),顾名思义,就是在树上操作的\(DP\),一般可以用\(f_i\)表示以编号为\(i\)的节点为根的子树中的最优解. 转移的 ...

  6. 2017.12.23 第二章 统一建模语言UML概述

    第二章 统一建模语言UML概述 (1)为什么要建模 模型是某个事物的抽象,其目的是在构建这个事物之前先来理解它,因为模型忽略了那些非本质的细节,这样有利于更好的理解和表示事物: 在软件系统开发之前首先 ...

  7. 文件系统 - Linux 支持的文件系统类型

    NAME 文件系统 - Linux 支持的文件系统类型:minix, ext, ext2, xia, msdos, umsdos, vfat, proc, nfs, iso9660, hpfs, sy ...

  8. CVE-2018-4878

    0x00前言 该漏洞影响 Flash Player 版本28.0.0.137以及之前的所有版本 0x01 poc Poc 这里只列出关键代码 public function triggeruaf() ...

  9. 前端小记3——iOS与Android问题

    1.消除transition闪屏 (1)-webkit-transform-style:preserve-3d;  /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ (2)-webkit-ba ...

  10. Ubuntu解决winscp连接不上虚拟机问题

    前几天在配置虚拟机的时候,尝试用winscp连接Ubuntu,结果连接被拒绝.原因:Ubuntu的ssh服务需要自己安装和启动,在没启动之前,是无法连接上去的 解决方案: 我们可以输入:ssh loc ...