总结
豆包 AI 助手文章总结

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

php中文网
发布: 2016-06-10 15:09:04
原创
1747人浏览过

修改form的显示的最快捷的方式是使用css。 尤其是错误列表,可以增强视觉效果。自动生成的错误列表精确的使用``

    ``,这样,我们就可以针对它们使用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中被方便地重写。

    每一个字段部件(,

    <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 }} 会在

      里面显示,如果字段是合法的,或者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”,在一个有序列表中显示错误信息。

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
css
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
豆包 AI 助手文章总结
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号