Django4.0 使用表單-使用表單模板

您只需將表單實(shí)例放到模板的上下文中即可。因此，如果您的表單在上下文中叫 ?form ?，那么 ?{{ form }}? 將渲染它相應(yīng)的 ?<label>?和?<input>?元素。

表單渲染選項(xiàng)

對(duì)于 ?<label>? / ?<input>? 對(duì)，還有其他輸出選項(xiàng)：

• ?{{ form.as_table }}? 會(huì)將它們呈現(xiàn)為包裹在 ?<tr>? 標(biāo)簽中的表格單元格
• ?{{ form.as_p }}? 會(huì)將它們呈現(xiàn)在 ?<p>? 標(biāo)簽中
• ?{{ form.as_ul }}? 會(huì)將它們呈現(xiàn)在 ?<li>? 標(biāo)簽中

注意，您必須自己提供外層的 ?<table>? 或 ?<ul>? 元素。
下面是我們 ?ContactForm ?實(shí)例用? {{ form.as_p }}? 的輸出：

<p><label for="id_subject">Subject:</label>
    <input id="id_subject" type="text" name="subject" maxlength="100" required></p>
<p><label for="id_message">Message:</label>
    <textarea name="message" id="id_message" required></textarea></p>
<p><label for="id_sender">Sender:</label>
    <input type="email" name="sender" id="id_sender" required></p>
<p><label for="id_cc_myself">Cc myself:</label>
    <input type="checkbox" name="cc_myself" id="id_cc_myself"></p>

請(qǐng)注意，每個(gè)表單字段都有一個(gè) ?id_<field-name>? 這樣的ID屬性，它被附帶的?label?標(biāo)簽引用。這對(duì)于確保表單可供屏幕閱讀軟件這樣的輔助技術(shù)訪問(wèn)非常重要

手動(dòng)渲染字段

我們沒(méi)有必要非要讓Django來(lái)解包表單字段；如果我們喜歡，可以手動(dòng)來(lái)處理（比如，讓我們對(duì)字段重新排序）。每個(gè)字段都可以用 ?{{ form.name_of_field }}? 作為表單的一個(gè)屬性，并被相應(yīng)的渲染在Django模板中。例如：

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>
<div class="fieldWrapper">
    {{ form.sender.errors }}
    <label for="{{ form.sender.id_for_label }}">Your email address:</label>
    {{ form.sender }}
</div>
<div class="fieldWrapper">
    {{ form.cc_myself.errors }}
    <label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
    {{ form.cc_myself }}
</div>

完整的 ?<label>? 元素還可以使用 ?label_tag()? 來(lái)生成。例如：

<div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
</div>

渲染表單錯(cuò)誤信息

這種靈活性的代價(jià)需要多做一點(diǎn)工作。到目前為止，我們不必?fù)?dān)心如何顯示表單的錯(cuò)誤信息，因?yàn)樗鼈円呀?jīng)幫我們處理好了。下面的例子中，我們需要自己處理每個(gè)字段的錯(cuò)誤信息以及表單整體的所有錯(cuò)誤信息。注意表單頂部的 ?{{ form.non_field_errors }}? 以及模板中對(duì)每個(gè)字段查找錯(cuò)誤信息。

使用 ?{{ form.name_of_field.errors }}? 顯示該字段的錯(cuò)誤信息列表，它被渲染成無(wú)序列表?？雌饋?lái)如下：

<ul class="errorlist">
    <li>Sender is required.</li>
</ul>

該列表有一個(gè)CSS class ?errorlist ?，允許您自定義其樣式。如果你想進(jìn)一步自定義錯(cuò)誤信息的顯示，您可以通過(guò)遍歷它們來(lái)實(shí)現(xiàn)：

{% if form.subject.errors %}
    <ol>
    {% for error in form.subject.errors %}
        <li><strong>{{ error|escape }}</strong></li>
    {% endfor %}
    </ol>
{% endif %}

非字段驗(yàn)證錯(cuò)誤信息（或者通過(guò)使用像 ?form.as_p()? 這樣的輔助方法渲染產(chǎn)生在表單頂部的隱藏錯(cuò)誤信息）渲染后會(huì)額外帶上一個(gè)class ?nonfield ?以便與字段驗(yàn)證錯(cuò)誤信息區(qū)分。例如， ?{{ form.non_field_errors }}? 渲染后會(huì)像這樣：

<ul class="errorlist nonfield">
    <li>Generic validation error</li>
</ul>

遍歷表單字段

如果您要給每個(gè)表單字段使用相同的HTML，您可以用 ?{% for %}? 依次循環(huán)遍歷每個(gè)字段來(lái)減少重復(fù)代碼：

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
        {% if field.help_text %}
        <p class="help">{{ field.help_text|safe }}</p>
        {% endif %}
    </div>
{% endfor %}

{{ field }} 的有用屬性包括：

?{{ field.label }}?

字段的?label?，比如 ?Email ??address?。

?{{ field.label_tag }}?

該字段的?label?封裝在相應(yīng)的HTML ?<label>? 標(biāo)簽中。它包含表單的 ?label_suffix ?。例如，默認(rèn)的 ?label_suffix ?是一個(gè)冒號(hào)：

<label for="id_email">Email address:</label>

?{{ field.id_for_label }}?
用于該字段的 ID（像上面的例子中的 id_email ）。如果您要手動(dòng)構(gòu)建label，您可能要用這個(gè)來(lái)替換 label_tag 。例如，如果你有一些內(nèi)嵌的JavaScript并且想要避免硬編碼字段的ID，這也很有用。
?{{ field.value }}?
字段的值。例如 someone@example.com
?{{ field.html_name }}?
字段名稱(chēng)：用于其輸入元素的name屬性中。如果設(shè)置了表單前綴，它也會(huì)被加進(jìn)去。
?{{ field.help_text }}?
與該字段關(guān)聯(lián)的幫助文本
?{{ field.errors }}?
輸出一個(gè) ?<ul class="errorlist">? ，其中包含這個(gè)字段的所有驗(yàn)證錯(cuò)誤信息。你可以使用 ?{% for error in field.errors %}? 循環(huán)來(lái)自定義錯(cuò)誤信息的顯示。在這種情況下，循環(huán)中的每個(gè)對(duì)象是包含錯(cuò)誤信息的字符串。

?{{ field.is_hidden }}?
如果是隱藏字段，這個(gè)屬性為 True ，否則為 False 。它作為模板變量沒(méi)多大作用，但可用于條件測(cè)試，例如：

{% if field.is_hidden %}
   {# Do something special #}
{% endif %}

?{{ field.field }}?
表單類(lèi)中的 ?Field ?實(shí)例由 ?BoundField ?封裝。您可以用它來(lái)訪問(wèn) ?Field ?的屬性，比如? {{ char_field.field.max_length }}? 。

遍歷隱藏字段和可見(jiàn)字段

如果您在手動(dòng)布置模板中的表單，而不是依靠Django的默認(rèn)表單布局，您可能希望將 ?<input type="hidden">? 字段與非隱藏字段區(qū)別開(kāi)來(lái)。例如，因?yàn)殡[藏字段不顯示任何內(nèi)容，將錯(cuò)誤消息放到該字段旁邊可能會(huì)導(dǎo)致用戶混淆——所以這些字段的錯(cuò)誤應(yīng)該以不同的方式處理。
Django在表單上提供了兩種方法，允許您獨(dú)立地遍歷隱藏和可見(jiàn)的字段： ?hidden_fields()? 和 ?visible_fields()? 。以下是使用這兩種方法對(duì)之前示例的修改：

{# Include the hidden fields #}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{# Include the visible fields #}
{% for field in form.visible_fields %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

這個(gè)示例沒(méi)有處理隱藏字段中的任何錯(cuò)誤信息。通常，隱藏字段中的錯(cuò)誤象征著表單被篡改，因?yàn)檎５谋韱谓换ゲ粫?huì)去改變它們。但是，您也可以輕松地為這些表單錯(cuò)誤插入一些錯(cuò)誤信息顯示出來(lái)。

可復(fù)用的表單模板

如果你的網(wǎng)站在多個(gè)地方使用相同的表單渲染邏輯，你可以通過(guò)將表單的循環(huán)保存在一個(gè)獨(dú)立的模板中，并覆蓋表單的 ?template_name ?屬性來(lái)使用自定義模板渲染表單，從而減少重復(fù)。下面的例子將導(dǎo)致 ?{{ form }}? 被渲染成 ?form_snippet.html? 模板的輸出。
在你的模板中：

# In your template:
{{ form }}

# In form_snippet.html:
{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

在你的表單中：

class MyForm(forms.Form):
    template_name = 'form_snippet.html'
    ...