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. byte[] 中需要除去的特定 byte

    /// <summary> /// 去掉byte[]中特定的byte /// </summary> /// <param name="SourceByteArr ...

  2. JS中的异常exception

    js提供了一套异常处理机制.异常是干扰程序的正常流程的不寻常事故,当发生这样的事故时,你的程序应该抛出一个异常 try_it() { try { console.log(add("1&quo ...

  3. <已解决> Eclipse启动失败

    参考:http://stackoverflow.com/questions/15404964/starting-eclipse-results-in-failed-to-create-java-vir ...

  4. Linux一键脚本合集vps

    首先,想说说一键脚本流行的原因何在? 众所周知的是,Linux 是占据大半壁江山的服务器系统,但在桌面上的占有率可就远不是那么回事儿了,使用和熟悉 Linux 的人远没有 Windows 多,但又因为 ...

  5. iOS 真机报错 Command CodeSign failed with a nonzero exit code

    今天在网上下载的一个小demo,在模拟器上正常运行,但是在真机上报错: 解决方式: 1.打开钥匙串:2.锁住login keychain: 3.再把它解锁. 然后就能真机上正常运行了,

  6. java基础编程——重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  7. java基础面试题：java中实现多态的机制是什么？

    靠的是父类或接口的引用指向子类或实现类的对象, 调用的方法是内存中正在运行的那个对象的方法.

  8. C++的XML编程经验――LIBXML2库使用指南

    C++的XML编程经验――LIBXML2库使用指南 写这篇文章的原因有如下几点:1)C++标准库中没有操作XML的方法,用C++操作XML文件必须熟悉一种函数库,LIBXML2是其中一种很优秀的XML ...

  9. 从指定的view中截图 返回UIImage

    -(UIImage *)getImageFromView:(UIView *)view{ UIGraphicsBeginImageContext(view.bounds.size); [view.la ...

  10. 在React中使用Redux数据流

    问题:数据流是什么呢?为什么要用数据流? 答案:1.数据流是我们的行为与相应的抽象 2.使用数据流帮助我们明确了行为的对应的响应 问题: React与数据流的关系 1.React是纯 V 层的前端框架 ...