这篇文章主要介绍了在Django的form中使用CSS进行设计的方法,Django是Python重多人气开发框架中最为著名的一个,需要的朋友可以参考下 修改form的显示的最快捷的方式是使用CSS。 尤其是错误

这篇文章主要介绍了在Django的form中使用CSS进行设计的方法,Django是Python重多人气开发框架中最为著名的一个,需要的朋友可以参考下
修改form的显示的最快捷的方式是使用CSS。 尤其是错误列表，可以增强视觉效果。自动生成的错误列表精确的使用`` <ul class=”errorlist”>``，这样，我们就可以针对它们使用CSS。 下面的CSS让错误更加醒目了：

在Django的form中使用CSS进行设计的方法（Django css） Django form CSS 脚本之家 第1张

  1. <style type="text/CSS"> 
  2.   ul.errorlist { 
  3.     margin: 0; 
  4.     padding: 0; 
  5.   } 
  6.   .errorlist li { 
  7.     background-color: red; 
  8.     color: white; 
  9.     display: block; 
  10.     font-size: 10px; 
  11.     margin: 0 0 3px; 
  12.     padding: 4px 5px; 
  13.   } 
  14. </style> 


虽然，自动生成HTML是很方便的，但是在某些时候，你会想覆盖默认的显示。 {{form.as_table}}和其它的方法在开发的时候是一个快捷的方式，form的显示方式也可以在form中被方便地重写。
每一个字段部件(<input type=”text”>, <select>, <textarea>, 或者类似)都可以通过访问{{form.字段名}}进行单独的渲染。

  1. <html> 
  2. <head> 
  3.   <title>Contact us</title> 
  4. </head> 
  5. <body> 
  6.   <h1>Contact us</h1> 
  7.  
  8.   {% if form.errors %} 
  9.     <p style="color: red;"> 
  10.       Please correct the error{{ form.errors|pluralize }} below. 
  11.     </p> 
  12.   {% endif %} 
  13.  
  14.   <form action="" method="post"> 
  15.     <div class="field"> 
  16.       {{ form.subject.errors }} 
  17.       <label for="id_subject">Subject:</label> 
  18.       {{ form.subject }} 
  19.     </div> 
  20.     <div class="field"> 
  21.       {{ form.email.errors }} 
  22.       <label for="id_email">Your e-mail address:</label> 
  23.       {{ form.email }} 
  24.     </div> 
  25.     <div class="field"> 
  26.       {{ form.message.errors }} 
  27.       <label for="id_message">Message:</label> 
  28.       {{ form.message }} 
  29.     </div> 
  30.     <input type="submit" value="Submit"> 
  31.   </form> 
  32. </body> 
  33. </html> 


{{ form.message.errors }} 会在 <ul class="errorlist"> 里面显示，如果字段是合法的，或者form没有被绑定，就显示一个空字符串。 我们还可以把 form.message.errors 当作一个布尔值或者当它是list在上面做迭代， 例如：

  1. <div class="field{% if form.message.errors %} errors{% endif %}"> 
  2.   {% if form.message.errors %} 
  3.     <ul> 
  4.     {% for error in form.message.errors %} 
  5.       <li><strong>{{ error }}</strong></li> 
  6.     {% endfor %} 
  7.     </ul> 
  8.   {% endif %} 
  9.   <label for="id_message">Message:</label> 
  10.   {{ form.message }} 
  11. </div> 



在校验失败的情况下, 这段代码会在包含错误字段的div的class属性中增加一个”errors”，在一个有序列表中显示错误信息。

转载请说明出处
知优网 » 在Django的form中使用CSS进行设计的方法（Django css）
admin

admin

分享到：

相关推荐

发表评论

您需要后才能发表评论