LoongLee's blog

Django_Forms_Styling

Django 表单样式设置

来源：sources/django_forms样式设置.md

widget_tweaks 速查表

在模板开头加载：

{% load widget_tweaks %}

添加/修改 CSS class

{{ form.username|add_class:"form-control" }}
{{ form.username|add_class:"form-control is-invalid" }}

设置属性

{{ form.password|attr:"placeholder:请输入密码" }}
{{ form.email|attr:"style:width:300px;" }}
{{ form.age|attr:"min:18,max:100" }}

添加多个属性

{{ form.username|attr:"class:form-control,placeholder:输入用户名" }}

移除属性

{{ form.username|remove_attr:"required" }}

修改已有属性

注意：attr:"class:new-class" 会直接覆盖旧的 class，要保留并追加请用 add_class。

{{ form.username|attr:"class:new-class" }}   {# 覆盖 #}
{{ form.username|add_class:"new-class" }}    {# 追加 #}

条件添加 class（错误提示）

{{ form.username|add_class:"is-invalid" if form.username.errors }}

渲染整个表单时逐个修改

{% for field in form %}
  <div class="mb-3">
    {{ field.label_tag }}
    {{ field|add_class:"form-control" }}
    {% if field.errors %}
      <div class="invalid-feedback">{{ field.errors.0 }}</div>
    {% endif %}
  </div>
{% endfor %}

总结

过滤器 作用
add_class 追加 CSS class
attr 添加/修改属性
remove_attr 删除属性

相关页面

最后更新: 2026-04-30