在Django的form中使用CSS进行设计的方法_程序人生

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

admin

2023-07-31 02:26:25

0次

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

虽然，自动生成HTML是很方便的，但是在某些时候，你会想覆盖默认的显示。 {{form.as_table}}和其它的方法在开发的时候是一个快捷的方式，form的显示方式也可以在form中被方便地重写。

每一个字段部件(, , 或者类似)都可以通过访问{{form.字段名}}进行单独的渲染。</p> <pre class="brush:css;"> <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> </pre> <p>{{ form.message.errors }} 会在 <ul class=\”errorlist\”> 里面显示，如果字段是合法的，或者form没有被绑定，就显示一个空字符串。我们还可以把 form.message.errors 当作一个布尔值或者当它是list在上面做迭代，例如：</p> <pre class="brush:css;"> <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> </pre> <p>在校验失败的情况下, 这段代码会在包含错误字段的div的class属性中增加一个”errors”，在一个有序列表中显示错误信息。</p>  </div>  <div class="mt-5">  <a href="/index.php?s=article&c=search&keyword=django" class="badge badge-light-primary fw-bold my-2" target="_blank">django</a> <a href="/index.php?s=article&c=search&keyword=CSS" class="badge badge-light-primary fw-bold my-2" target="_blank">CSS</a> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/program/44056.html">python通过socket查询whois的方法</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/program/44058.html">Python字符串匹配算法KMP实例</a> </p> </div>  <div class="d-flex flex-stack mb-2 mt-10">  <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>  </div> <div class="separator separator-dashed mb-9"></div>  <div class="row g-10"> </div> </div>  </div>   <div class="col-xl-4 mt-0">  <div class="card card-flush h-md-100">  <div class="card-header pt-5 ">  <h3 class="card-title align-items-start flex-column">  <div class="d-flex align-items-center mb-2">  <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>  </div>  </h3>  </div>   <div class="card-body pt-3">  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/4386.html" class="text-dark fw-bold text-hover-primary fs-6">Mobi、epub格式电子书如...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在wps里全局设置里有一个文件关联，打开，勾选电子书文件选项就可以了。</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/831667.html" class="text-dark fw-bold text-hover-primary fs-6">定时清理删除C:\Progra...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">C:\Program Files (x86)下面很多scoped_dir开头的文件夹写个批处理定...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202403/9fc6c8bf38a85fb.png#没有设置高宽参数，将以原图输出')"></div> </div>   <div class="m-0"> <a href="/program/831666.html" class="text-dark fw-bold text-hover-primary fs-6">scoped_dir32_70...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">一台虚拟机C盘总是莫名奇妙的空间用完，导致很多软件没法再运行。经过仔细检查发现是C:\Program...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/39278.html" class="text-dark fw-bold text-hover-primary fs-6">500 行 Python 代码...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">语法分析器描述了一个句子的语法结构，用来帮助其他的应用进行推理。自然语言引入了很多意外的歧义，以我们...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/783.html" class="text-dark fw-bold text-hover-primary fs-6">小程序支付时提示：appid和...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[Q]小程序支付时提示：appid和mch_id不匹配 [A]小程序和微信支付没有进行关联，访问“小...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/831649.html" class="text-dark fw-bold text-hover-primary fs-6"> pycparser 是一个用...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">`pycparser` 是一个用 Python 编写的 C 语言解析器。它可以用来解析 C 代码并构...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/4837.html" class="text-dark fw-bold text-hover-primary fs-6">微信小程序使用slider实现...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">众所周知哈，微信小程序里面的音频播放是没有进度条的，但最近有个项目呢，客户要求音频要有进度条控制，所...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/3333.html" class="text-dark fw-bold text-hover-primary fs-6">65536是2的几次方计算2...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">65536是2的16次方：65536=2⁶ 65536是256的2次方：65536=256 6553...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/831541.html" class="text-dark fw-bold text-hover-primary fs-6">Apache Doris 2....</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">亲爱的社区小伙伴们，我们很高兴地向大家宣布，Apache Doris 2.0.0 版本已于...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/program/4969.html" class="text-dark fw-bold text-hover-primary fs-6">项目管理和工程管理的区别</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">项目管理项目管理，顾名思义就是专注于开发和完成项目的管理，以实现目标并满足成功标准和项目要求。工...</span> </div>  </div> </div>  </div>  </div>  </div> </div>  </div>  </div>   <div id="kt_app_footer" class="app-footer">  <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">  <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> 晓说杂谈<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f7b4581e1f9f88ac28d46df58a8d3ff5"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a target="_blank" href="https://beian.miit.gov.cn/">豫ICP备13019747号-13</a> </div>   <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/tech" target="_blank" class="menu-link px-2">科技分享</a> </li> <li class="menu-item"> <a href="/web" target="_blank" class="menu-link px-2">网络技术</a> </li> <li class="menu-item"> <a href="/hardware" target="_blank" class="menu-link px-2">硬件设备</a> </li> <li class="menu-item"> <a href="/program" target="_blank" class="menu-link px-2">程序人生</a> </li> <li class="menu-item"> <a href="/jinrong" target="_blank" class="menu-link px-2">探索发现</a> </li> <li class="menu-item"> <a href="/jixie" target="_blank" class="menu-link px-2">机械加工</a> </li> <li class="menu-item"> <a href="/dianshang" target="_blank" class="menu-link px-2">电商</a> </li> <li class="menu-item"> <a href="/other" target="_blank" class="menu-link px-2">其他</a> </li> <li class="menu-item"> <a href="/zhishi" target="_blank" class="menu-link px-2">日常知识</a> </li> <li class="menu-item"> <a href="/yulu" target="_blank" class="menu-link px-2">每日语录</a> </li> </ul>  </div>  </div>  </div>  </div>  </div>  </div>  <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">  <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span>  </div>  <script>var hostUrl = "/static/default/pc/";</script>  <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script>   </body>  </html>