如何用Bootstrap美化Django可编辑表单并解决多余字符问题

首先，你遇到的多余">"字符是因为直接把表单字段对象{{update_profile_form.username}}放到了placeholder属性里——这个变量渲染出来的是整个字段的完整HTML代码（包括<input>标签本身、可能的错误提示等），而不是字段的文本值，所以placeholder里会混入HTML标签的片段，就出现了多余的符号。

快速修复：正确获取字段值 #

把placeholder里的内容改成获取字段的实际值，同时给input设置默认值：

<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="Enter your username" 
               value="{{ update_profile_form.username.value }}">
    </div>
</div>

也可以直接用当前登录用户的用户名（因为表单基于用户实例创建，两者值完全一致）：

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

更优雅的方案：利用Django表单内置渲染（适配Bootstrap） #

手动写input标签不仅容易出错，还没法利用Django表单的验证错误提示、自动填充等功能。推荐直接让Django渲染字段，同时添加Bootstrap样式：

<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">
        {{ update_profile_form.username.label }}
    </label>
    <div class="col-lg-6">
        {{ update_profile_form.username|add_class:"form-control" }}
        {% if update_profile_form.username.errors %}
            <small class="text-danger mt-1 d-block">{{ update_profile_form.username.errors.0 }}</small>
        {% endif %}
    </div>
</div>

要使用add_class过滤器，需要先安装django-widget-tweaks库（执行pip install django-widget-tweaks），然后在settings.py的INSTALLED_APPS里添加'widget_tweaks'，这样就能轻松给表单字段添加Bootstrap的form-control类。

额外代码优化建议 #

1. forms.py的ValidationError修正：你的格式化字符串写法有误，而且疑似笔误（"now allowed"应该是"not allowed"），修正后：

# 原错误写法
raise forms.ValidationError('The username "%s" is now allowed to be used!', username)
# 正确写法（用f-string更直观）
raise forms.ValidationError(f'The username "{username}" is not allowed to be used!')

2. views.py简化：GET请求时无需手动传initial，因为instance=request.user会自动填充用户现有数据：

else:
    upd_form = AccountUpdateForm(instance=request.user)

按照上述方法修改后，多余的">"字符会彻底消失，表单也能更规范地处理验证和数据填充。

内容的提问来源于stack exchange，提问作者M.J