1 在student_list添加一个a标签，

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

2 urls分发路由

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

3 前端

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">

    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">

</head>

<body>

<div style="width:500px;margin:0 auto">

    <h4 style="margin-left: 25px;">添加学生</h4>

    <form class="form-horizontal" action="/app01/add_student" method="POST">

        {% csrf_token %}

        <div class="form-group">

            <label class="col-sm-2 control-label">姓名:</label>

            <div class="col-sm-10">

                {{ obj.name }}{{ obj.errors.name.0 }}

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">年龄:</label>

            <div class="col-sm-10">

                {{ obj.age }} {{ obj.errors.age.0 }}

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">邮箱:</label>

            <div class="col-sm-10">

                {{ obj.email }} {{ obj.errors.email.0 }}

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">班级:</label>

            <div class="col-sm-10">

                {{ obj.cls_id }} {{ obj.errors.cls_id.0 }}

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <input type="submit" class="btn btn-default" value="提交"/>

            </div>

        </div>

    </form>

</div>

</body>

</html>

4 视图

def add_student(request):

    if request.method == 'GET':

        obj = StudentForm()

        return render(request, 'app01_add_student.html', {'obj': obj})

    else:

        obj = StudentForm(request.POST)

        if obj.is_valid():

            models.Student.objects.create(**obj.cleaned_data)

            return redirect('/app01/students')

        else:

            return render(request,  'app01_add_student.html', {'obj': obj})

5 数据规则类设置

class StudentForm(Form):

    name = fields.CharField(max_length=8, min_length=2,

                            widget=widgets.TextInput(attrs={'class': 'form-control'})

                            )

    age = fields.IntegerField(max_value=25, min_value=18,

                              widget=widgets.TextInput(attrs={'class': 'form-control'})

                              )

    email = fields.EmailField(widget=widgets.TextInput(attrs={'class': 'form-control'})

                              )

    cls_id = fields.IntegerField(

        # widget=widgets.Select(choices=[(1, '上海'), (2,'北京')])

        # choices 类型为[(),()]

        widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'),

                              attrs={'class': 'form-control'})

    )

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

# Form生成html标签

    a. 通过Form生成Input输入框，Form标签，以及submit标签还是要在前端写的，

        但是Form标签内的Input标签可以在后台实现；只需要按以下步骤

        - views定义StudentForm(Form)类

        - views视图函数将Form实例化对象传递给前端

        - 前端{{ obj.段 }}即可

    b. 通过Form设置前端Input的type属性,即设置不同类型的输入框

        # 设置name为text, cls_id为下拉框

        class StudentForm(Form):

            name = fields.CharField(widget= widgets.InputText())

            cls_id = fields.IntegerField(widget = widgets.Select())

    c. 设置下拉框的内容choices属性

        class StudentForm(Form):

            cls_id = fields.IntegerField(

                widget=widgets.Select(choices=models.Classes.objects.values_list('id', 'title'))

            )

        注意： choices的值必须[元组，(), ()]类型

        widget=widgets.Select(choices=[(1, '上海'), (2,'北京')])

    d.设置input输入框的class属性 -- attrs

        name = fields.CharField(max_length=8, min_length=2,

                        widget=widgets.TextInput(attrs={'class': 'form-control'})

                        )

        cls_id = fields.IntegerField(

                widget=widgets.Select(

                                        choices=models.Classes.objects.values_list('id', 'title'),

                                        attrs={'class': 'form-control'}

                                    )

            )

        注意： attrs参数必须放在TextInput或者Select等内部，而且值必须为字典

    e. 通过Form设置前端Input的默认显示值

        只要在视图函数将实例化一个Form对象，并且设置initial值即可

            student_dict = models.Student.objects.filter(id=nid).values('name', 'age', 'email', 'cls_id').first()

            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. win10蓝牙添加设备无法连接

    解决方法: 打开运行窗口,输入services.msc. 找到蓝牙支持服务(或者Bluetooth Support Service),右键,属性,启动类型选择手动,启动服务. 还不行的话,此电脑右键, ...

  2. spa 小程序的研发随笔 (1) --- 前言

    半年前跳槽, 新公司主要研发倾向于小程序的开发.由于之前并没有接触小程序,所以经过半年的实际开发,才敢来做一点笔记. 小程序提供很多组件给开发者使用,但是,实际使用中还是会有很多的问题. 小程序的组件 ...

  3. Redis基础数据结构

    Redis数据库中每个键值对都是由对象( c 的结构体对象)组成的. 数据库键总是一个字符串对象(string object) 数据库键的值可以使字符串对象.列表对象(list object).哈希对 ...

  4. xtarbackup恢复

    xbstream -x < ynhw-mysql-slave.01.mysql.prod.sg_fullbak_20180326134255.xbstream -C /data/mysql cd ...

  5. 对ListBox控件中的数据进行排序

    实现效果: 知识运用: ListBox控件的Sorted属性 //ListBox控件中的数据项是否按字母顺序排序 public bool Sorted{get;set;} 实现代码: private ...

  6. 使用webpack从零开始搭建react项目

    webpack中文文档 webpack的安装 yarn add webpack@3.10.1 --dev 需要处理的文件类型 webpack常用模块 webpack-dev-server yarn a ...

  7. Softmax回归（Softmax Regression

    多分类问题 在一个多分类问题中,因变量y有k个取值,即.例如在邮件分类问题中,我们要把邮件分为垃圾邮件.个人邮件.工作邮件3类,目标值y是一个有3个取值的离散值.这是一个多分类问题,二分类模型在这里不 ...

  8. EM理解（转）

    EM是我一直想深入学习的算法之一,第一次听说是在NLP课中的HMM那一节,为了解决HMM的参数估计问题,使用了EM算法.在之后的MT中的词对齐中也用到了.在Mitchell的书中也提到EM可以用于贝叶 ...

  9. https及其背后的加密原理阅读总结

    https是以安全为目标的http通道,简单讲是http的安全版.当我们往服务器发送比较隐私的数据(比如说你的银行卡,身份证)时,如果使用http进行通信.那么安全性将得不到保障. 首先数据在传输的过 ...

  10. k8s的ingress资源简述

    ingress controller是独立与controller-manager的Ingress的主要作用是可以利用nginx,haproxy,envoy,traefik等负载均衡器来暴露集群内部服务 ...