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. 打包ios软件并发布到应用商店

    真心感慨程序员是一个神奇的动物. 昨天接到任务,将项目打包并发布到apple商店.于是乎... 利用Hbuilder打包 需要的3个文件: AppId,描述文件profile,以及私钥证书 必须条件: ...

  2. URL跨项目调用方法，获取返回的json值，并解析

    package com.mshc.util; import java.io.BufferedReader; import java.io.IOException; import java.io.Inp ...

  3. UVA 1213 - Sum of Different Primes（递推）

    类似一个背包问题的计数问题.(虽然我也不记得这叫什么背包了 一开始我想的状态定义是:f[n = 和为n][k 个素数]. 递推式呼之欲出: f[n][k] = sigma f[n-pi][k-1]. ...

  4. POJ 1065 Wooden Sticks（LIS,最少链划分）

    题意:求二维偏序的最少链划分. 用到Dilworth定理:最少链划分=最长反链.(对偶也成立,个人认为区别只是一个维度上的两个方向,写了个简单的证明 相关概念:偏序集,链,反链等等概念可以参考这里:h ...

  5. Java jvm 内存回收机制

    http://blog.csdn.net/yaerfeng/article/details/51291903 在Java中,它的内存管理包括两方面:内存分配(创建Java对象的时候)和内存回收,这两方 ...

  6. java基础编程——用两个栈来实现一个队列

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题目代码 /** * <分析>: * 入队:将元素进栈A * 出队:判断栈B是否为空, * ...

  7. .NET利用RFC连接SAP，查询、读取SAP数据

    为黄朴整理!!!!!!!!!!!!!!!!! 在NuGet 添加 sapnco 一个简单的SAPCommand,方法 GetDataTableFromRFCTable 复制于 https://www. ...

  8. JSON.parse(text[, reviver])

    1. JSON.parse(text[, reviver])text 必需 有效的json字符串reviver 可选 函数 2. 举栗子1) 只有第一个参数 let objStr = '{" ...

  9. vue-cli的build的文件夹下没有dev-server.js文件，怎么配置mock数据

    因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行 新版webpack.dev.conf.js配置如下: 在const portfin ...

  10. Linux 下上传下载命令，SCP，SFTP，FTP

    scp 帮助命令: man scp scp功能: 下载远程文件或者目录到本地, 如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择. 从远程主机 下载东西到 本地电脑 拷贝文件命 ...