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字段

字段类	说明	对应的html表示
StringField（文本字段）	用于接收文本输入	<input type="text">
PasswordField（密码字段）	用于接收密码输入	<input type="password">
TextAreaField（多行文本字段）	用于接收多行文本输入	<textarea></textarea>
IntegerField（整数字段）	用于接收整数输入	<input type="number">
BooleanField（布尔字段	用于接收布尔值输入	<input type="checkbox">
SelectField（下拉选择字段）	用于从预定义选项中选择一个值。	<select><option>...</option></select>
RadioField（单选按钮字段）	用于从预定义选项中选择一个值。	<input type="radio">
FileField（文件上传字段）	用于上传文件。	<input type="file">

实例化字段类常用参数

参数	说明
label	字段的标签（Label）或名称（Name），用于在表单中标识该字段。
validators	包含一个或多个验证器对象的列表，用于验证输入数据是否符合指定规则。
default	字段的默认值。
description	字段的描述信息，通常用于在页面上显示字段的说明文本。
render_kw	包含一些HTML属性和值的字典，用于向字段的HTML表示中添加额外的属性和样式。
choices	可选的预定义选项列表，用于下拉选择字段和单选按钮字段。
coerce	指定将输入值转换为另一种类型的函数，例如将字符串转换为整数。
filters	包含一个或多个过滤器对象的列表，用于在表单提交前对输入数据进行处理。

常用的WTForm验证器

验证器	说明
DataRequired	验证字段必须包含数据。
Length	验证输入数据的长度是否在指定范围内。
Email	验证输入数据是否为有效的电子邮件地址。
EqualTo	验证两个字段的值是否相等。
NumberRange	验证输入数据是否在指定的数字范围内。
Regexp	使用正则表达式验证输入数据是否符合指定模式。

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风格的表单。