如何为已渲染的表单字段追加额外CSS类？附Django模板示例

如果你的表单字段已经通过{{ field|add_class }}完成渲染，想要为其添加额外CSS类，可以通过先构建包含目标类名的变量，再统一应用的方式实现，逻辑示例如下：

• 若字段类型为Select，则向变量追加form-select类
• 若字段存在错误（field.error不为空），则向变量追加error类
• 最后通过{{ field|append_attr:"class:CSSSTYLES" }}将拼接好的类名应用到字段上

以下是完整的表单模板代码示例：

<form class="mt-3" method="POST" action="{% url 'profile' %}" autocomplete="off" novalidate>
  {% csrf_token %}

  {% for hidden in form.hidden_fields %}
  {{ hidden }}
  {% endfor %}

  {% for field in form.visible_fields %}

  <div class="mb-3">
    <label class="form-label" id="{{ field.id_for_label }}">
      {{ field.label }}
    </label>
    {% if field.errors %}
      {{ field|append_attr:"class:form-control is-invalid is-invalid-lite" }}
    {% for error in field.errors %}
    <div class="alert alert-danger">
      <strong>{{ error|escape }}</strong>
    </div>
    {% endfor %}
    {% else %}
      {{ field|append_attr:"class:form-control" }}
    {% endif %}

  {% endfor %}
</form>

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