flask web学习之表单(一)

发布时间:2024年01月11日

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

文章来源:https://blog.csdn.net/qq_42369064/article/details/135513476
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。