1. 应用Bootstrap样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  8.   <title>login</title>
  9. </head>
  10. <body>
  11. <div class="container">
  12.   <div class="row">
  13.     <form action="/login2/" method="post" novalidate class="form-horizontal">
  14.       {% csrf_token %}
  15.       <div class="form-group">
  16.         <label for="{{ form_obj.username.id_for_label }}"
  17.                class="col-md-2 control-label">{{ form_obj.username.label }}</label>
  18.         <div class="col-md-10">
  19.           {{ form_obj.username }}
  20.           <span class="help-block">{{ form_obj.username.errors.0 }}</span>
  21.         </div>
  22.       </div>
  23.       <div class="form-group">
  24.         <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
  25.         <div class="col-md-10">
  26.           {{ form_obj.pwd }}
  27.           <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
  28.         </div>
  29.       </div>
  30.       <div class="form-group">
  31.       <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
  32.         <div class="col-md-10">
  33.           <div class="radio">
  34.             {% for radio in form_obj.gender %}
  35.               <label for="{{ radio.id_for_label }}">
  36.                 {{ radio.tag }}{{ radio.choice_label }}
  37.               </label>
  38.             {% endfor %}
  39.           </div>
  40.         </div>
  41.       </div>
  42.       <div class="form-group">
  43.         <div class="col-md-offset-2 col-md-10">
  44.           <button type="submit" class="btn btn-default">注册</button>
  45.         </div>
  46.       </div>
  47.     </form>
  48.   </div>
  49. </div>
  50.  
  51. <script src="/static/jquery-3.2.1.min.js"></script>
  52. <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  53. </body>
  54. </html>

2. 批量添加样式

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

  1. class LoginForm(forms.Form):
  2.     username = forms.CharField(
  3.         min_length=8,
  4.         label="用户名",
  5.         initial="yang",
  6.         error_messages={
  7.             "required": "不能为空",
  8.             "invalid": "格式错误",
  9.             "min_length": "用户名最短8位"
  10.         }
  11.     )
  12.     ...
  13.  
  14.     def __init__(self, *args, **kwargs):
  15.         super(LoginForm, self).__init__(*args, **kwargs)
  16.         for field in iter(self.fields):
  17.             self.fields[field].widget.attrs.update(
  18.             {"class": "form-control"}
  19.             )

　　

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. 箭头函数的arguments不可用

    ES5中的arguments function func(a,b,c){ console.log(arguments[0],arguments[1],arguments[2]) } func(1,2, ...

  2. HALC：用于长读取错误纠正的高吞吐量算法

    背景: 第三代PacBio SMRT长读取可以有效地解决第二代测序技术的读长问题,但包含大约15%的测序错误.已经设计了几种纠错算法以有效地将错误率降低到1%,但是它们丢弃了大量未校正的碱基,因此导致 ...

  3. 关于jQuery的源码学习

    注:该思维学习自另一个博客:https://blog.csdn.net/software0017/article/details/80317348 以下为我自己总结的jQuery结构:

  4. drunk_admin_hacking_challenge靶机之旅？

    注:  只是记录本人玩的时候发现的新奇点  如果你也想玩且看了这篇文章还是不会,请联系gg 靶机下载地址 https://www.vulnhub.com/entry/drunk-admin-web-h ...

  5. idou老师教你学Istio 28：istio-proxy check 的缓存

    功能概述 istio-proxy主要的功能是连接istio的控制面组件和envoy之间的交互,其中check的功能是将envoy收集的attributes信息上报给mixer,在istio中有几十种a ...

  6. 搭建一个jumpserver跳板机

    1,部署jumpserver 建立阿里云公网源yum仓库 清除缓存重新建立缓存 ip后面直接回车,下面输入y 地址端口账户密码直接回车 ,询问跳过输入y,是否继续输入y 用户名回车,输入自己要设置的密 ...

  7. 用js刷剑指offer(二维数组中的查找)

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  8. Paper Reading:推荐系统评价指标综述

    论文:推荐系统评价指标综述 发表时间:2012 发表作者:朱郁筱,吕琳媛 论文链接:论文链接 本文对现有的推荐系统评价指标进行了系统的回顾,总结了推荐系统评价指标的最新研究进展,从准确度. 多样性.新 ...

  9. zznu-oj-2117 : 我已经在路上了（求函数的原函数的字符串）--【暴力模拟题，花式模拟题，String大法好】

    2117 : 我已经在路上了 时间限制:1 Sec 内存限制:256 MiB提交:39 答案正确:8 提交 状态 编辑 讨论区 题目描述 spring是不折不扣的学霸,那可是机房考研中的头号选手,不吹 ...

  10. 前端与SQL

    转载自:http://developer.51cto.com/art/201706/542163.htm