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. STL中的map和hash_map

    以下全部copy于:http://blog.chinaunix.net/uid-26548237-id-3800125.html 在网上看到有关STL中hash_map的文章,以及一些其他关于STL ...

  2. innobackupex实现对MySQL的增量备份与还原

    备份增量备份是基于完整备份的,所以我们需要先做一次完整备份: innobackupex --defaults-file=/etc/my.cnf --user root --password cheng ...

  3. 使用VSCode搭建TypeScript开发环境 (重点)

    下载TypeScript 在CMD(Windows系统)或者终端(macOS系统)中输入一下命令: npm install -g typescript 下载VSCode VSCode是我使用过最棒的编 ...

  4. CentOS创建不需要输入密码的sudo用户

     linux 怎么让普通用户使用sudo权限不需要输入密码.    在网上看到很多资料,都只说到了在/etc/sudoers添加下列行即可:    username  ALL=(ALL)       ...

  5. 如何使用工具进行C/C++的内存泄漏检测

    系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调试内存问题的恶梦.所以,在实践中会用到很多工具来 ...

  6. jqweui 中的tabbar导航

    最近做微信的服务号项目,用的jqweui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航 ...

  7. 已解决: mybatis报错 org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxx' in 'class java.lang.String'

    最近在练习MyBatis时 进行姓名的模糊查询时候出现 org.apache.ibatis.exceptions.PersistenceException: ### Error querying da ...

  8. 52shaidan.net

    52shaidan.net 52gendan.net 朋友的域名

  9. base64转图片上传

    不成功,但是有一定的借鉴性 /** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ consol ...

  10. Laravel 命令行常用命令

    一.简介 1.Artisan 是 Laravel 自带的命令行接口名称,它为我们在开发过程中提供了很多有用的命令.想要查看所有可用的Artisan命令,可使用list命令: php artisan l ...