Flask+Bootstrap登录页FlaskForm设值时placeholder异常、按钮转义问题

问题根源 #

你遇到的placeholder错乱、转义字符异常都是模板调用Flask-WTF字段的方式错误导致的：

• Flask-WTF的表单字段（比如form.username、form.password）本身是字段实例，直接在Jinja2中输出会渲染完整的<input>标签代码
• 你把整段标签代码塞进了value属性中，Jinja2默认会对HTML特殊字符做转义，就出现了"、<input id=这类异常内容
• 你的LoginForm类中没有定义submit字段，模板调用{{form.submit}}本身就是无效调用

修复步骤 #

1. 调整app.py中的LoginForm定义 #

首先补充缺失的SubmitField导入和提交按钮定义，也可以把需要的HTML属性统一放到render_kw参数中，减少模板代码：

from flask_wtf import FlaskForm
# 新增导入SubmitField
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import InputRequired, Length

class LoginForm(FlaskForm):
    username = StringField(validators=[InputRequired(), Length(
        min=4, max=20)], render_kw={
            "placeholder": "用户名", 
            "class": "form-control", 
            "id": "floatingInput"
        })
    
    password = PasswordField(validators=[InputRequired(), Length(
        min=4, max=20)], render_kw={
            "placeholder": "密码", 
            "class": "form-control", 
            "id": "floatingPassword"
        })
    # 新增提交按钮定义
    submit = SubmitField('登录', render_kw={
        "class": "w-100 btn btn-lg btn-warning"
    })

@app.route('/login/', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user:
            if bycrypt.check_password_hash(user.password, form.password.data):
                login_user(user)
                print('Logged in')
                return redirect(url_for('sucess'))
    return render_template('login.html', form=form)

2. 重写login.html的表单代码 #

推荐直接用Flask-WTF的原生渲染方式，不需要手动写input标签，完全避免转义和属性错乱问题：

<form method="POST">
    {{ form.hidden_tag() }}
    <h1 class="h3 mb-3 fw-normal text-center text-white">请登录</h1>

    <div class="form-floating">
        {{ form.username() }}
        <label for="floatingInput">用户名</label>
    </div>
    <br>
    <div class="form-floating">
        {{ form.password() }}
        <label for="floatingPassword">密码</label>
    </div>
    <br>
    {{ form.submit() }}
    <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
</form>

如果你一定要手动编写input标签，记得取字段的data属性作为value值，不要直接输出字段本身：

<form method="POST">
    {{ form.hidden_tag() }}
    <h1 class="h3 mb-3 fw-normal text-center text-white">请登录</h1>

    <div class="form-floating">
        <input class="form-control" placeholder="用户名" value="{{form.username.data if form.username.data else ''}}" id="floatingInput" name="username">
        <label for="floatingInput">用户名</label>
    </div>
    <br>
    <div class="form-floating">
        <input type="password" class="form-control" id="floatingPassword" placeholder="密码" value="{{form.password.data if form.password.data else ''}}" name="password">
        <label for="floatingPassword">密码</label>
    </div>
    <br>
    <button class="w-100 btn btn-lg btn-warning" type="submit">登录</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
</form>

注意：密码字段不需要设置value值，输入错误刷新后保留密码本身也是不符合安全规范的行为，实际生产环境建议去掉密码输入框的value属性。

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