HTML表单
在HTML中,表单通过<form>标签创建,表单中的字段使用<input>标签定义:
渲染后效果:
使用Flask-WTF处理表单
先用Pipenv 安装Flask-WTF 及其依赖:
$ pipenv install flask-wtf
Flask-WTF 默认为每个表单启用csrf保护,它会为我们自动生成和验证csrf令牌. 我们需要为程序设置密钥:
app.secret key = 'secret string'
-
定义WTForms表单类
from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, BooleanField, SubmitField from wtforms.validators import DataRequired, Length class LoginForm(FlaskForm): username = StringField('Username', validators=[DataRequired()]) password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)]) remember = BooleanField('Remember me') submit = SubmitField('Log in')
-
常用的WTForms字段
实例化字段类传入的参数:
常用的WTForms验证器:
-
输出HTML代码
使用WTForms创建的LoginForm为例:
>>> form = LoginForm() >>> form.username() '<input id="username" name="username" required type="text" value="">'
字段的label值:
>>> form.username.label() '<label for="username">Username</label>'
在创建HTML表单时,我们经常需要使用HTML <input>元素的其他属性对字段进行设置. 比如 添加class属性、添加placeholder属性设置占位文本.
添加额外属性方法:-
使用render_kw属性
比如下面的username字段使用render_kw设置了placeholder HTML属性:
这个字段被调用后输出的HTML 代码如下所示:username = StringField('Username', render_kw={'placeholder':'Your Username'})
<input type ="text" id="username" name="username" placeholder="Your Username" >
-
在html中添加
<div class="form-group"> {{ form.username.label }} {{ form.username(class='form-control') }} </div>
-
-
在模板中渲染表单
为了能够在模板中渲染表单,我们需要把表单类实例传入模板.
@app.route('/basic') def basic(): form = LoginForm() return render_template('login.html', form=form)