修改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”,在一個有序列表中顯示錯誤信息。
新聞熱點
疑難解答
圖片精選