1. 应用Bootstrap样式

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">

  <title>login</title>

</head>

<body>

<div class="container">

  <div class="row">

    <form action="/login2/" method="post" novalidate class="form-horizontal">

      {% csrf_token %}

      <div class="form-group">

        <label for="{{ form_obj.username.id_for_label }}"

               class="col-md-2 control-label">{{ form_obj.username.label }}</label>

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

          {{ form_obj.username }}

          <span class="help-block">{{ form_obj.username.errors.0 }}</span>

        </div>

      </div>

      <div class="form-group">

        <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>

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

          {{ form_obj.pwd }}

          <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>

        </div>

      </div>

      <div class="form-group">

      <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>

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

          <div class="radio">

            {% for radio in form_obj.gender %}

              <label for="{{ radio.id_for_label }}">

                {{ radio.tag }}{{ radio.choice_label }}

              </label>

            {% endfor %}

          </div>

        </div>

      </div>

      <div class="form-group">

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

          <button type="submit" class="btn btn-default">注册</button>

        </div>

      </div>

    </form>

  </div>

</div>

<script src="/static/jquery-3.2.1.min.js"></script>

<script src="/static/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

2. 批量添加样式

可通过重写form类的init方法来实现：

class LoginForm(forms.Form):

    username = forms.CharField(

        min_length=8,

        label="用户名",

        initial="yang",

        error_messages={

            "required": "不能为空",

            "invalid": "格式错误",

            "min_length": "用户名最短8位"

        }

    )

    ...

    def __init__(self, *args, **kwargs):

        super(LoginForm, self).__init__(*args, **kwargs)

        for field in iter(self.fields):

            self.fields[field].widget.attrs.update(

            {"class": "form-control"}

            )

　　

Django基础之form表单的补充进阶的更多相关文章

  1. Django基础之Form表单验证

    Form表单验证 1.创建Form类(本质就是正则表达式的集合) from django.forms import Form from django.forms import fields from ...

  2. Django基础之form表单

    1. form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时, 我们在好多场景下都需要对用户的输入做校验, 比如 ...

  3. Django组件之Form表单

    一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...

  4. 第三百一十一节，Django框架，Form表单验证

    第三百一十一节,Django框架,Form表单验证 表单提交 html <!DOCTYPE html> <html lang="en"> <head& ...

  5. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  6. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  7. Django中的Form表单

    Django中已经定义好了form类,可以很容易的使用Django生成一个表单. 一.利用Django生成一个表单: 1.在应用下创建一个forms文件,用于存放form表单.然后在forms中实例华 ...

  8. Django中的Form表单验证

    回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...

  9. Django 中的Form表单认证

    一.Form表单   1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签   1.2 创建表单类Form 1. 创建 ...

随机推荐

  1. arcgis for android100.x 禁止地图旋转

    by 蔡建良2019-5-16 关键类: com.esri.arcgisruntime.mapping.view.DefaultMapViewOnTouchListener DefaultMapVie ...

  2. （十三）Hibernate中的多表操作（3）：单向多对多

    多对多的处理方式是,有一张中间表,中间表保存两个多方之间的关系.首先来看实际应用场景:在之前开发的系统中,应用了基于角色的控制访问,也就是RBAC模型,一个用户可能存在多种角色,一种角色也可能有多个用 ...

  3. MVC的12种ActionResult介绍以及应用示例【转】

    一.介绍 1.ViewResult 表示一个视图结果,它根据视图模板产生应答内容.对应得Controller方法为View. 2.PartialViewResult 表示一个部分视图结果,与ViewR ...

  4. [书籍翻译] 《JavaScript并发编程》第四章 使用Generators实现惰性计算

    本文是我翻译<JavaScript Concurrency>书籍的第四章 使用Generators实现惰性计算,该书主要以Promises.Generator.Web workers等技术 ...

  5. layui下拉多选formSelects使用方法

    下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSel ...

  6. 【Hibernate】Hibernate关联关系的映射

    一.实体之间的关系 二.一对多的配置 2.1 第一步创建两个实体 2.2 第二步:配置映射文件 2.3 第三步:将映射放到核心配置文件中 三.级联 3.1 Hibernate中级联保存的效果 3.2 ...

  7. MySQL数据库---数据库管理

    -- 创建用户,指定明文密码create user 'rose'@'localhost' identified by 'rosepwd'; -- 查看用户是否创建成功select user,host ...

  8. 深度学习_1_Tensorflow_2_数据_文件读取

    tensorflow 数据读取 队列和线程 文件读取, 图片处理 问题:大文件读取,读取速度, 在tensorflow中真正的多线程 子线程读取数据 向队列放数据(如每次100个),主线程学习,不用全 ...

  9. MySQL中SQL语句常见优化策略

    1.避免全表扫描 对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引. 2.避免判断null 值 应尽量避免在where 子句中对字段进行null 值判 ...

  10. Image Processing and Analysis_21_Scale Space：Edge Detection and Ridge Detection with Automatic Scale Selection——1998

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...