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. 手把手教你用Docker部署一个MongoDB集群

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中最像关系数据库的.支持类似于面向对象的查询语言,几乎可以实现类似关系数据库单表查询的绝大部分功能,而且还支持对数据建立索引 ...

  2. 简析平衡树（三）——浅谈Splay

    前言 原本以为\(Treap\)已经很难了,学习了\(Splay\),我才知道,没有最难,只有更难.(强烈建议先去学一学\(Treap\)再来看这篇博客) 简介 \(Splay\)是平衡树中的一种,除 ...

  3. 【BZOJ1965】[AHOI2005] SHUFFLE 洗牌（数学题）

    点此看题面 大致题意: 有一叠扑克牌编号为\(1\sim n\)(\(n\)为偶数),每次洗牌将扑克牌平均分成上下两叠,取下面一叠的第一张作为新的一叠的第一张,然后取上面一叠的第一张作为新的一叠的第二 ...

  4. 【洛谷2519】[HAOI2011] problem a（动态规划）

    点此看题面 大致题意: 一次考试共有\(n\)个人参加,第\(i\)个人说有\(a_i\)个人分数比他高,\(b_i\)个人分数比他低.求最少有几个人说谎. 动态规划 刚看完题目可以说是一头雾水. 仔 ...

  5. 实现带复选框的TreeView控件

    实现效果: 知识运用: TreeView控件的CheckView属性 //是否在树形视图控件中显示复选框 public bool CheckBoxs{ get;ser } 实现代码: TreeView ...

  6. 2017.12.14 Java实现-----图书管理系统

    通过对图书的增删改查操作 用数组实现 Manager类 package demo55; import java.util.*; public class Manager { Scanner sc = ...

  7. numpy.random.shuffle(x)的用法

    numpy.random.shuffle(x) Modify a sequence in-place by shuffling its contents. Parameters: x : array_ ...

  8. javascrit中“字符串为什么可以调用成员”

    <script> var title = "this is title"; console.log(title.substr(0,5));   //字符串为什么可以调用 ...

  9. javaweb基础(32)_jdbc学习入门

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  10. NodeJS--exports和module.exports

    继续迁移印象笔记中记录相关笔记,其实工作中遇到的很多问题当时解决了,后期就忘记了,多记录还是很有用的,好记性不如烂笔头嘛,以后要养成好习惯. NodeJS中 require 用来加载代码,而 expo ...