如何在Django HTML模板中自定义格式化渲染表单元素

直接通过模板变量调用表单对应字段即可完成绑定，不需要手动硬写input标签的name、type、value、required等属性，Django会自动根据你在forms.py中的定义生成匹配的输入控件，同时自动处理校验失败后的内容回填、错误关联。

核心渲染规则 #

在模板中可以通过以下方式调用表单字段的相关内容：

• {{ form.字段名 }}：渲染字段对应的输入控件，自动生成所有必要属性
• {{ form.字段名.errors }}：渲染该字段的校验错误信息
• {{ form.字段名.label }}：渲染字段的标签文本

注意事项 #

你提供的目标HTML有几处需要修正，否则无法正常对接现有视图逻辑：

• 表单必须设置method="POST"，action属性留空即可提交到当前contact视图，不要设置target="_blank"，否则会在新窗口提交导致重定向逻辑异常
• message字段在表单定义中使用了Textarea部件，Django渲染时会自动生成<textarea>标签，不能用普通input标签替代
• 不要手动写死input的name属性，避免和表单字段名不一致导致提交数据无法被表单识别

可用模板代码 #

以下是对接W3.CSS布局的完整模板代码，已经保留你需要的布局结构，同时对接Django表单逻辑：

<div class="w3-col m6">
    <form action="" method="post">
      {% csrf_token %}
      <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        <div class="w3-half">
          <div class="fieldWrapper">
            {{ form.name }}
            {% if form.name.errors %}
            <p class="w3-text-red">{{ form.name.errors.0 }}</p>
            {% endif %}
          </div>
        </div>
        <div class="w3-half">
          {{ form.email_address }}
          {% if form.email_address.errors %}
          <p class="w3-text-red">{{ form.email_address.errors.0 }}</p>
          {% endif %}
        </div>
      </div>
      {{ form.message }}
      {% if form.message.errors %}
      <p class="w3-text-red">{{ form.message.errors.0 }}</p>
      {% endif %}
      <button class="w3-button w3-black w3-section w3-right" type="submit">SEND</button>
    </form>
</div>

优化方案（可选） #

如果希望模板代码更简洁，可以直接在forms.py中给每个字段的部件设置W3.CSS样式类、placeholder等属性，模板中直接输出字段即可自动带上样式，不需要重复写属性：

class ContactForm(forms.Form):
    name = forms.CharField(
        max_length=100,
        widget=forms.TextInput(attrs={
            'class': 'w3-input w3-border',
            'placeholder': 'Name',
            'required': 'required'
        })
    )
    email_address = forms.EmailField(
        max_length=150,
        widget=forms.EmailInput(attrs={
            'class': 'w3-input w3-border',
            'placeholder': 'Email',
            'required': 'required'
        })
    )
    message = forms.CharField(
        max_length=2000,
        widget=forms.Textarea(attrs={
            'class': 'w3-input w3-border',
            'placeholder': 'Message',
            'required': 'required'
        })
    )

这种方式将样式、校验规则统一收敛到表单类定义，后续维护不需要同时修改模板和表单代码。

内容的提问来源于stack exchange，提问作者kdubs