在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删除特定文件的方法
Jul 30 Python
用Python写一个无界面的2048小游戏
May 24 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
Nov 06 Python
python2 与python3的print区别小结
Jan 16 Python
使用pygame模块编写贪吃蛇的实例讲解
Feb 05 Python
numpy实现合并多维矩阵、list的扩展方法
May 08 Python
用python简单实现mysql数据同步到ElasticSearch的教程
May 30 Python
python爬取个性签名的方法
Jun 17 Python
python交互界面的退出方法
Feb 16 Python
Python 内置函数globals()和locals()对比详解
Dec 23 Python
通过实例解析python subprocess模块原理及用法
Oct 10 Python
Python使用永中文档转换服务
May 06 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+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python学习基础之循环import及import过程
2018/04/22 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
python给list排序的简单方法
2020/12/10 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
交通事故私了协议书
2014/04/16 职场文书
保护环境的标语
2014/06/09 职场文书
教书育人演讲稿
2014/09/11 职场文书
感谢信的格式
2015/01/21 职场文书
教师辞职信范文
2015/02/28 职场文书
员工升职自荐信
2015/03/27 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript