如何将flask_wtf表单合并到Bootstrap表单中?

xriantvc  于 2023-04-18  发布在  Bootstrap
关注(0)|答案(1)|浏览(236)

我正在尝试创建一个简单的登录/退出网站,但我不知道如何有效地使用Bootstrap和Flask。我刚刚开始使用Bootstrap,所以我对它的工作原理和Web开发都很陌生。
下面是我使用的flask_wtf表单:

<h1>Sign In</h1>
<form action="" method="post" novalidate>
    {{ form.hidden_tag() }}
    <p>
        {{ form.username.label }}<br>
        {{ form.username(size=32) }}
    </p>
    <p>
        {{ form.password.label }}<br>
        {{ form.password(size=32) }}
    </p>
    <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
    <p>{{ form.submit() }}</p>
</form>
class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember_me = BooleanField('Remeber Me')
    submit = SubmitField('Sign In')

一个基本的Bootstrap形式:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Username</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Remember Me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
</form>

我不明白如何在Bootstrap代码中使用Flask风格的占位符。

  • 注意:我不知道为什么HTML大多是橙子的;如果有人能改变它,使它看起来更清晰,那就太好了。*
3bygqnnd

3bygqnnd1#

这应该可以工作:

<form action="" method="post" novalidate>
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.username.label }}
        {{ form.username(class_="form-control", size=32) }}
    </div>
    <div class="form-group">
        {{ form.password.label }}
        {{ form.password(class_="form-control", size=32) }}
    </div>
    <div class="form-group form-check">
        {{ form.remember_me(class_="form-control") }} {{ form.remember_me.label }}
    </div>
    {{ form.submit(class_="form-control") }}
</form>

相关问题