如何用Bootstrap 5样式和Django在表单首次渲染时标记必填字段？

下面是几种实用的实现方式，能让表单首次渲染时就显示必填/可选标记，无需等待提交：

方法一：后端表单类自定义标签（最直接） #

在Django表单类的__init__方法中，遍历字段并给必填/可选字段的label添加对应标记：

from django import forms

class YourForm(forms.Form):
    # 定义字段
    username = forms.CharField(label="用户名")
    email = forms.EmailField(label="邮箱", required=False)
    phone = forms.CharField(label="手机号")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 遍历所有字段添加标记
        for field_name, field in self.fields.items():
            if field.required:
                # 必填字段加红色星号
                field.label = f"{field.label} <span class='text-danger'>*</span>"
            else:
                # 可选字段加灰色"可选"标注
                field.label = f"{field.label} <span class='text-muted'>(可选)</span>"

前端渲染时，记得用|safe过滤器让HTML标签生效：

<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <div class="mb-3">
            <label for="{{ field.id_for_label }}" class="form-label">{{ field.label|safe }}</label>
            {{ field|add_class:"form-control" }}
            {% if field.errors %}
                <div class="invalid-feedback">{{ field.errors.0 }}</div>
            {% endif %}
        </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary">提交</button>
</form>

注：add_class来自django-widget-tweaks库，需先安装：pip install django-widget-tweaks，并在INSTALLED_APPS中添加'widget_tweaks'。

方法二：自定义模板标签（更灵活，复用性强） #

如果多个表单都需要这个功能，写个自定义模板标签更方便：

1. 在你的app下创建templatetags/form_tags.py文件：

from django import template

register = template.Library()

@register.filter
def add_field_mark(field):
    """给表单字段label添加必填/可选标记"""
    if field.required:
        return f"{field.label} <span class='text-danger'>*</span>"
    else:
        return f"{field.label} <span class='text-muted'>(可选)</span>"

2. 在模板中加载并使用这个标签：

{% load form_tags %}

<form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <div class="mb-3">
            <label for="{{ field.id_for_label }}" class="form-label">{{ field|add_field_mark|safe }}</label>
            {{ field|add_class:"form-control" }}
            {% if field.errors %}
                <div class="invalid-feedback">{{ field.errors.0 }}</div>
            {% endif %}
        </div>
    {% endfor %}
    <button type="submit" class="btn btn-primary">提交</button>
</form>

方法三：纯CSS实现（无需修改后端） #

利用Django给必填字段自动添加的required属性，通过CSS伪元素实现标记：

/* 必填字段label后加红色星号 */
.form-label:has(+ input[required]),
.form-label:has(+ select[required]),
.form-label:has(+ textarea[required]) {
    position: relative;
}

.form-label:has(+ input[required])::after,
.form-label:has(+ select[required])::after,
.form-label:has(+ textarea[required])::after {
    content: " *";
    color: #dc3545; /* Bootstrap危险色，和错误提示统一 */
}

/* 可选字段label后加灰色"可选" */
.form-label:has(+ input:not([required]))::after,
.form-label:has(+ select:not([required]))::after,
.form-label:has(+ textarea:not([required]))::after {
    content: " (可选)";
    color: #6c757d; /* Bootstrap次要文本色 */
}

这种方式完全不需要修改后端代码，但注意:has选择器仅支持现代浏览器（Chrome 105+、Firefox 121+），如果需要兼容旧浏览器，建议用前两种方法。

额外优化建议 #

• 在表单顶部添加一行说明：<p class="text-muted">* 表示必填字段</p>，让用户清晰理解标记含义；
• 星号颜色用Bootstrap的text-danger，和提交后的错误提示风格统一，保持视觉一致性。

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