在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 相关文章推荐
python3制作捧腹网段子页爬虫
Feb 12 Python
Python代码实现KNN算法
Dec 20 Python
python TCP Socket的粘包和分包的处理详解
Feb 09 Python
Python实现的调用C语言函数功能简单实例
Mar 13 Python
详解python使用turtle库来画一朵花
Mar 21 Python
Python切片操作去除字符串首尾的空格
Apr 22 Python
Python使用sklearn库实现的各种分类算法简单应用小结
Jul 04 Python
解决Django后台ManyToManyField显示成Object的问题
Aug 09 Python
Python 3.6打包成EXE可执行程序的实现
Oct 18 Python
python实现用类读取文件数据并计算矩形面积
Jan 18 Python
pycharm 更改创建文件默认路径的操作
Feb 15 Python
python爬虫基础之urllib的使用
Dec 31 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执行sql语句的写法
2009/03/10 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python生成随机密码的方法
2017/06/16 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python探索之创建二叉树
2017/10/25 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
记者岗位职责
2014/01/06 职场文书
临床护士自荐信
2014/01/31 职场文书
企业安全生产承诺书
2014/05/22 职场文书
公司活动总结怎么写
2014/06/25 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年教研工作总结
2014/12/06 职场文书
爱晚亭导游词
2015/02/09 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python