在Django的form中使用CSS进行设计的方法


Posted in Python onJuly 18, 2015

修改form的显示的最快捷的方式是使用CSS。 尤其是错误列表,可以增强视觉效果。自动生成的错误列表精确的使用`` <ul class=”errorlist”>``,这样,我们就可以针对它们使用CSS。 下面的CSS让错误更加醒目了:

<style type="text/css">
  ul.errorlist {
    margin: 0;
    padding: 0;
  }
  .errorlist li {
    background-color: red;
    color: white;
    display: block;
    font-size: 10px;
    margin: 0 0 3px;
    padding: 4px 5px;
  }
</style>

虽然,自动生成HTML是很方便的,但是在某些时候,你会想覆盖默认的显示。 {{form.as_table}}和其它的方法在开发的时候是一个快捷的方式,form的显示方式也可以在form中被方便地重写。

每一个字段部件(<input type=”text”>, <select>, <textarea>, 或者类似)都可以通过访问{{form.字段名}}进行单独的渲染。

<html>
<head>
  <title>Contact us</title>
</head>
<body>
  <h1>Contact us</h1>

  {% if form.errors %}
    <p style="color: red;">
      Please correct the error{{ form.errors|pluralize }} below.
    </p>
  {% endif %}

  <form action="" method="post">
    <div class="field">
      {{ form.subject.errors }}
      <label for="id_subject">Subject:</label>
      {{ form.subject }}
    </div>
    <div class="field">
      {{ form.email.errors }}
      <label for="id_email">Your e-mail address:</label>
      {{ form.email }}
    </div>
    <div class="field">
      {{ form.message.errors }}
      <label for="id_message">Message:</label>
      {{ form.message }}
    </div>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

{{ form.message.errors }} 会在 <ul class="errorlist"> 里面显示,如果字段是合法的,或者form没有被绑定,就显示一个空字符串。 我们还可以把 form.message.errors 当作一个布尔值或者当它是list在上面做迭代, 例如:

<div class="field{% if form.message.errors %} errors{% endif %}">
  {% if form.message.errors %}
    <ul>
    {% for error in form.message.errors %}
      <li><strong>{{ error }}</strong></li>
    {% endfor %}
    </ul>
  {% endif %}
  <label for="id_message">Message:</label>
  {{ form.message }}
</div>

在校验失败的情况下, 这段代码会在包含错误字段的div的class属性中增加一个”errors”,在一个有序列表中显示错误信息。

Python 相关文章推荐
Python批量创建迅雷任务及创建多个文件
Feb 13 Python
Python实现Linux命令xxd -i功能
Mar 06 Python
浅谈终端直接执行py文件,不需要python命令
Jan 23 Python
Python解惑之True和False详解
Apr 24 Python
详解Golang 与python中的字符串反转
Jul 21 Python
python实现装饰器、描述符
Feb 28 Python
python 文本单词提取和词频统计的实例
Dec 22 Python
pandas.read_csv参数详解(小结)
Jun 21 Python
python如何实现从视频中提取每秒图片
Oct 22 Python
Django model.py表单设置默认值允许为空的操作
May 19 Python
python图片验证码识别最新模块muggle_ocr的示例代码
Jul 03 Python
python 利用百度API识别图片文字(多线程版)
Dec 14 Python
在Django的视图中使用form对象的方法
Jul 18 #Python
详解Django中的form库的使用
Jul 18 #Python
在Django框架中编写Contact表单的教程
Jul 17 #Python
简单解析Django框架中的表单验证
Jul 17 #Python
改进Django中的表单的简单方法
Jul 17 #Python
Python的Django框架中的表单处理示例
Jul 17 #Python
Python中max函数用法实例分析
Jul 17 #Python
You might like
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python url 参数修改方法
2018/12/26 Python
Django实现发送邮件功能
2019/07/18 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python @property使用方法解析
2019/09/17 Python
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
《夸父追日》教学反思
2014/02/26 职场文书
简单租房协议书
2014/04/09 职场文书
学校班班通实施方案
2014/06/11 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2015年组织部工作总结
2015/04/03 职场文书
涨价通知
2015/04/23 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS