使用bootstrap浮动标签时如何正确从django表单的html模板中获取数据？

Question

我有一个 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']

其中 使用从 AbstractUser 继承的模型：

class User(AbstractUser):
address = models.CharField(blank=True, null=True, max_length=100, verbose_name='Address')
etc

有了这个视图：

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

我很难理解如何从 html 模板中的表单中正确获取数据。

我的目标是使用bootstrap 5浮动标签（https://getbootstrap.com/docs/5.3/forms/floating-labels/）。

我的 html 模板更新用户的个人资料，并且我有一个工作版本（所有数据保存到数据库）：

<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 %}

这会生成漂亮的表单图片（实际上这就是我需要的），但提交时不会在数据库中保存。 事实上，我在注册模板上使用了相同的概念，它与 db 配合得很好。

我认为问题在于用于显示字段中当前数据的值变量，但我不知道如何以正确的方式更新这些值。因此，任何帮助将不胜感激。

Answer 1

问题出在我的

User

模型的必填字段中，因此我必须将该字段拉至

ProfileUserForm

并赋予它

required=False

属性。