在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的面向对象思想分析
Jan 14 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
Sep 19 Python
Python3实现抓取javascript动态生成的html网页功能示例
Aug 22 Python
Pyspider中给爬虫伪造随机请求头的实例
May 07 Python
使用Python机器学习降低静态日志噪声
Sep 29 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
Oct 21 Python
python-Web-flask-视图内容和模板知识点西宁街
Aug 23 Python
解决python有时候import不了当前的包问题
Aug 28 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
Mar 13 Python
python继承threading.Thread实现有返回值的子类实例
May 02 Python
详解向scrapy中的spider传递参数的几种方法(2种)
Sep 28 Python
ASP.NET Core中的配置详解
Feb 05 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调用.NET的WebService 简单实例
2015/03/27 PHP
PHP自定义多进制的方法
2016/11/03 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
js获取input标签的输入值实现代码
2013/08/05 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
python多线程之事件Event的使用详解
2018/04/27 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python基于locals返回作用域字典
2020/10/17 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
网络方面基础面试题
2012/11/16 面试题
介绍一下Ruby的特点
2013/01/20 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
如何写自我鉴定
2014/03/19 职场文书
学生安全责任书
2014/04/15 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
出租房屋协议书
2014/09/14 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2014年检验科工作总结
2014/11/22 职场文书
工作岗位职责范本
2015/02/15 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
关于Vue中的options选项
2022/03/22 Vue.js