表单

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属性：

    username = StringField('Username', render_kw={'placeholder':'Your Username'})
    

    这个字段被调用后输出的HTML 代码如下所示：

    <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)