在Django的form中使用CSS进行设计的方法 - 哈喽比特

606次阅读 | 发布于5年以前

修改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中被方便地重写。

每一个字段部件(, , 或者类似)都可以通过访问{{form.字段名}}进行单独的渲染。</p> <pre><code> <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> </code></pre> <p>{{ form.message.errors }} 会在 <ul class="errorlist"> 里面显示，如果字段是合法的，或者form没有被绑定，就显示一个空字符串。我们还可以把 form.message.errors 当作一个布尔值或者当它是list在上面做迭代，例如：</p> <pre><code> <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> </code></pre> <p>在校验失败的情况下, 这段代码会在包含错误字段的div的class属性中增加一个"errors"，在一个有序列表中显示错误信息。 </p> </div> </div> <div class="blockgap"></div> </div> <div class="blockgap"></div> <script> let url = window.location.href; function onWxReadyForShareArticle(){ let obj = { title: decodeURI(articleTitle), desc: decodeURI(articleSummary), link: window.location.href, imgUrl: "https://oss-cn-hangzhou.aliyuncs.com/codingsky/cdn/img/2024-02-01/89778da8387748299364fa73ad54f9a9", // 分享图标 success: function () { //console.log("update share success"); } }; wx.updateAppMessageShareData(obj); } function wechatShareArticle(){ //let data = {url:"https://hellobit.com.cn/doc/2024/1/29/1039.html"}; let data = { url : window.location.href }; postJsonV2(getUserToken(),"/api/tbs/v1/wxsdk/jssdk", data, function(code, data){ if(code != 200){ //console.log("get sign error,", code, data); return; } if(data.code != 0){ //console.log("get sign error, biz error ", data); return; } let appid = data.data.appid; let noncestr = data.data.noncestr; let timestamp = data.data.timestamp; let signature = data.data.signature; // get nonceStr, signature wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appid, // 必填，公众号的唯一标识 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: noncestr, // 必填，生成签名的随机串 signature: signature,// 必填，签名 jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表 }); wx.ready(function(){ onWxReadyForShareArticle(); }); wx.error(function(res){ if(console.error){ //console.error(res); } }); }); } </script>  <div class="mcontainer" style="margin-top: 10px;margin-bottom:0px;padding-top:10px;padding-bottom:10px;background-color:rgb(48, 60, 66);color:#fff;"> <div class="row" style="text-align:center;"> <p style="margin:0px;padding:0px;" class="mfont_1">Copyright© 2013-2020</p> <p style="margin:0px;padding:0px;" class="mfont_1">All Rights Reserved <a href="https://beian.miit.gov.cn">京ICP备2023019179号-8</a></p> </div> </div> <script> window.onload = function(){ hljs.highlightAll(); if(typeof wechatShareArticle === "function"){ wechatShareArticle(); } }; document.addEventListener('DOMContentLoaded', () => { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Add a click event on each of them $navbarBurgers.forEach( el => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target; const $target = document.getElementById(target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" ></script>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?713c92a31aa12d55b910e2065c7cda9d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> /*var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e066867ae5a323a82641e57db7e7c914"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();*/ </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-2VE3RBLF6N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-2VE3RBLF6N'); </script> </body> </html>