使用Bootstrap浮动标签时，如何正确获取Django表单模板数据？

问题背景 #

我有一个基于自定义用户模型的Django表单和视图，原模板能正常保存数据，但改成Bootstrap 5浮动标签样式后，表单显示正常但提交后数据无法保存到数据库，希望得到解决方法。

自定义用户模型 #

class User(AbstractUser):
    address = models.CharField(blank=True, null=True, max_length=100, verbose_name='Address')
    # 其他字段省略

Django表单 #

class ProfileUserForm(forms.ModelForm):
    username = forms.CharField(disabled=True, label='Login', widget=forms.TextInput(attrs={'class': 'form-input'}))
    email = forms.CharField(disabled=True, label='E-mail', widget=forms.TextInput(attrs={'class': 'form-input'}))

    class Meta:
        model = get_user_model()
        fields = ['photo', 'username', 'email', 'date_of_birth', 'first_name', 'last_name']

视图代码 #

class ProfileUser(LoginRequiredMixin, UpdateView):
    model = get_user_model()
    form_class = ProfileUserForm
    template_name = 'users/profile.html'
    extra_context = {
        'title': 'User profile',
        'default_image': settings.DEFAULT_USER_IMAGE,
        'btn_submit_title': 'Save',
    }

    def get_success_url(self):
        return reverse_lazy('users:profile')

    def get_object(self, queryset=None):
        return self.request.user

原正常工作的模板 #

<form method="post" enctype="multipart/form-data">
{% csrf_token %}

{% for f in form %}
    <p ><label class="form-label" for="{{ f.id_for_label }}">{{f.label}}: </label>{{ f }}</p>
{% endfor %}

问题模板（浮动标签，样式正常但不保存） #

<form method="post" enctype="multipart/form-data">
{% csrf_token %}

{% for f in form %}
    <div class="form-floating mt-3">
        <input class="form-control shadow-lg"
                {% if f.field.disabled %}
               disabled
                {% endif %}
               name="{{ f.name }}"
               type="{{ f.field.widget.input_type }}"
               id="{{ f.id_for_label }}" autocomplete="on"
               value="{% if f.value %}{{ f.value }}{% endif %}"
               placeholder="">
        <label for="{{ f.id_for_label }}">{{ f.label }}</label>

        <div class="">{{ f.error }}</div>
    </div>
{% endfor %}

问题原因 #

1. 遗漏文件字段处理：表单里的photo是文件上传字段，手动渲染的模板没有正确处理它，导致该字段数据无法提交，触发表单验证失败，最终不保存数据。
2. value属性处理错误：当字段值为空时，{% if f.value %}{{ f.value }}{% endif %}会让value属性缺失，浏览器不会提交该字段，表单无法识别空值更新。
3. 特殊字段渲染不规范：像date_of_birth这类日期字段，直接用f.field.widget.input_type可能无法正确渲染，丢失Django表单的内置处理逻辑。

解决方案 #

方案一：保留Django表单渲染+浮动标签结构（推荐） #

这种方式既利用Django表单的自动渲染能力，又能套用Bootstrap样式，避免手动渲染的坑：

修改表单类（添加Bootstrap所需样式类）

class ProfileUserForm(forms.ModelForm):
    username = forms.CharField(
        disabled=True, 
        label='Login', 
        widget=forms.TextInput(attrs={'class': 'form-control shadow-lg'})
    )
    email = forms.CharField(
        disabled=True, 
        label='E-mail', 
        widget=forms.TextInput(attrs={'class': 'form-control shadow-lg'})
    )

    class Meta:
        model = get_user_model()
        fields = ['photo', 'username', 'email', 'date_of_birth', 'first_name', 'last_name']
        widgets = {
            'date_of_birth': forms.DateInput(attrs={'class': 'form-control shadow-lg', 'type': 'date'}),
            'first_name': forms.TextInput(attrs={'class': 'form-control shadow-lg'}),
            'last_name': forms.TextInput(attrs={'class': 'form-control shadow-lg'}),
            'photo': forms.FileInput(attrs={'class': 'form-control'}),
        }

修改模板

<form method="post" enctype="multipart/form-data">
{% csrf_token %}

{% for f in form %}
    {% if f.field.widget_type == 'file' %}
        <!-- 文件字段不支持浮动标签，单独处理 -->
        <div class="mt-3">
            <label class="form-label" for="{{ f.id_for_label }}">{{ f.label }}</label>
            {{ f }}
            {% if f.errors %}
                <div class="text-danger">{{ f.errors.0 }}</div>
            {% endif %}
        </div>
    {% else %}
        <!-- 其他字段用浮动标签结构 -->
        <div class="form-floating mt-3">
            {{ f }}
            <label for="{{ f.id_for_label }}">{{ f.label }}</label>
            {% if f.errors %}
                <div class="text-danger mt-1">{{ f.errors.0 }}</div>
            {% endif %}
        </div>
    {% endif %}
{% endfor %}

<button type="submit" class="btn btn-primary mt-3">{{ btn_submit_title }}</button>
</form>

方案二：修复手动渲染的模板 #

如果坚持手动写HTML，需要解决以下问题：

<form method="post" enctype="multipart/form-data">
{% csrf_token %}

{% for f in form %}
    {% if f.field.widget_type == 'file' %}
        <div class="mt-3">
            <label class="form-label" for="{{ f.id_for_label }}">{{ f.label }}</label>
            <input type="file" name="{{ f.name }}" id="{{ f.id_for_label }}" class="form-control">
            {% if f.value %}
                <small class="text-muted">当前文件: {{ f.value.name }}</small>
            {% endif %}
            {% if f.errors %}
                <div class="text-danger">{{ f.errors.0 }}</div>
            {% endif %}
        </div>
    {% else %}
        <div class="form-floating mt-3">
            <input 
                class="form-control shadow-lg"
                {% if f.field.disabled %}disabled{% endif %}
                name="{{ f.name }}"
                type="{% if f.field.widget.input_type %}{{ f.field.widget.input_type }}{% else %}text{% endif %}"
                id="{{ f.id_for_label }}" 
                autocomplete="on"
                value="{{ f.value|default:'' }}"
                placeholder="{{ f.label }}">
            <label for="{{ f.id_for_label }}">{{ f.label }}</label>
            {% if f.errors %}
                <div class="text-danger mt-1">{{ f.errors.0 }}</div>
            {% endif %}
        </div>
    {% endif %}
{% endfor %}

<button type="submit" class="btn btn-primary mt-3">{{ btn_submit_title }}</button>
</form>

关键说明 #

• Bootstrap浮动标签要求输入框必须有form-control类，且设置placeholder（即使为空），否则标签无法正常浮动。
• 文件上传字段不支持浮动标签，必须单独处理，这是Bootstrap的限制。
• 优先用方案一，Django表单自动渲染能避免遗漏隐藏字段、错误处理等细节问题。

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