【问题标题】：How to style a Django editable form in bootstrap如何在引导程序中设置 Django 可编辑表单的样式
【发布时间】：2021-03-20 15:18:28
【问题描述】：

我有一个返回以下字段的表单：

fields = ['username', 'first_name', 'last_name', 'email']

所以在我的profile/edit 视图中（我的意思是一个 HTML 页面）我有这个代码：

<div class="col-xl-9">
        <div class="widget has-shadow" style="height:100%">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>edit profile</h4>
            </div>
            <div class="widget-body">
                <form method="POST">
                    {% csrf_token %}
                    <div class="form-group row d-flex align-items-center mb-5">
                        <label class="col-lg-2 form-control-label d-flex justify-content-lg-end">username</label>
                        <div class="col-lg-6">
                            <input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">
                        </div>
                    </div>

                    <div class="em-separator separator-dashed"></div>
                    <div class="text-right">
                        <button class="btn btn-gradient-01" type="submit">Save</button>
                        <button class="btn btn-shadow" type="reset">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

你看我想从update_profile_form 表单中显示username 字段。但是当我重新加载页面时，我的用户名字段下方有一个额外的">。

我不知道如何去掉页面中的这些字符。

更新

我的forms.py 看起来像：

class AccountUpdateForm(forms.ModelForm):

    class Meta:
        model = Account
        fields = ['username', 'first_name', 'last_name', 'email']

    def clean_username(self):
        if self.is_valid():
            username = self.cleaned_data['username']
            try:
                account = Account.objects.exclude(pk=self.instance.pk).get(username=username)
            except Account.DoesNotExist:
                return username
            raise forms.ValidationError('The username "%s" is now allowed to be used!', username)

而我的views.py 是：

def edit_profile_view(request):
    context = {}
    if not request.user.is_authenticated:
        return redirect('login')

    if request.POST:
        upd_form = AccountUpdateForm(request.POST, instance=request.user)
        if upd_form.is_valid():
            upd_form.save()
    else: # Get request
        upd_form = AccountUpdateForm(
            initial = {
                "username": request.user.username,
            }
        )
    context = {'update_profile_form': upd_form}
    return render(request, 'account/user/edit-profile.html', context)

【问题讨论】：

我认为update_profile_form.username 是一个输入字段。
我更新了问题。请你看一下好吗？

标签： django forms twitter-bootstrap bootstrap-4 django-forms

【解决方案1】：

你必须替换这一行

<input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">

与

<input type="text" name="username" class="form-control" placeholder="{{request.user.username}}">

您不必在视图中为表单提供初始值。

【讨论】：

它有效。但是为什么我们不能在这里使用表单呢？
initial 将值设置为表单的字段......而不是占位符。所以如果你写{{update_profile_form.username}}，而不是<input type="text" name="username" class="form-control" placeholder="{{update_profile_form.username}}">，你将在页面加载时有一个用户名值的字段

【解决方案2】：

因为缩写我需要做的：

<input type="text" name="username" class="form-control" value="{{update_profile_form.initial.username}}">

【讨论】：