flask web学习之表单（一）

在web程序中，表单是用户交互最常见的方式之一。用户注册、登陆、撰写文章、编辑设置无一不用到表单。

一、使用Flask-WTF处理表单

1.1 安装Flask-WTF库

pipenv install flask-wtf
pip install flask-wtf

flask-wtf默认为每个表单开启CSRF保护，它会为我们自动生成和验证CSRF令牌。所以我们应该设置：

app.secret_key = 'dadesjdajdhadheuisdjakj'

1.2 定义WTForms表单类

from wtforms import Form, StringField, IntegerField, validators

class MyForm(Form):
	name = StringField('name', [validators.Length(min=4, max=25)])
	age = IntegerField('Age', [validators.NumberRange(min=0, max=100)])

在这个例子中，我们使用了StringField和IntegerField来分别定义了name和age两个字段。每个字段都有一个标签（即’Name’和’Age’），以及一些验证器（validators）来验证用户提交的数据是否符合要求。例如，validators.Length(min=4, max=25)表示name字段的长度必须在4到25个字符之间，而validators.NumberRange(min=0, max=100)表示age字段的值必须在0到100之间。

常用的WTForm字段

实例化字段类常用参数

常用的WTForm验证器

name = StringField('Your name', validators=[DataRequired(message=u'名字不能为空')])

当使用flask-wtf定义表单时，我们仍然使用WTForm提供的字段类和验证器，创建的形式也一样，只是表单类要继承flask-wtf提供的FlaskForm类。

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, validators

class MyForm(FlaskForm):
	name = StringField('name', [validators.Length(min=4, max=25)])
	age = IntegerField('Age', [validators.NumberRange(min=0, max=100)])

1.3 输出HTML代码

默认情况下，WTForm输出的字段HTML代码只包含id和name属性，属性值均为表单类中对应的字段属性名称。如果要添加额外的属性，通常有两种方法：

使用render_kw属性

username = StringField('Username', render_kw={'placeholder': '请输入你的账号'})

在调用字段时传入

form.username(style='width;200px;', class_='bar')

class 是python的保留关键字，在这里我们使用class_来代替class,渲染后会得到正确的class属性。

1.4 在模板中渲染表单

<form method="POST" action="{
  { url_for('submit_form') }}">
  {
  { form.hidden_tag() }}
  
  <div class="form-group">
    {
  { form.username.label(class="form-label") }}
    {
  { form.username(class="form-control", placeholder="Enter your username") }}
    {% for error in form.username.errors %}
      <span class="text-danger">{
  { error }}</span>
    {% endfor %}
  </div>
  
  <div class="form-group">
    {
  { form.password.label(class="form-label") }}
    {
  { form.password(class="form-control", placeholder="Enter your password") }}
    {% for error in form.password.errors %}
      <span class="text-danger">{
  { error }}</span>
    {% endfor %}
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

使用rener_kw字典或是在调用字段时传入参数来定义字段的额外HTML属性，通过这种方式添加css类，我们可以编写一个BootStrap风格的表单。