Flask-WTF

2025年3月17日 | 阅读 3 分钟

WTF 代表 WT Forms，旨在为用户提供交互式用户界面。 WTF 是 flask 的一个内置模块，它提供了一种在 flask Web 应用程序中设计表单的替代方法。

为什么 WTF 有用？

WTF 之所以有用，是因为以下因素。

表单元素与来自客户端的请求对象一起发送到服务器端。服务器端脚本需要重新创建表单元素，因为客户端表单元素和服务器端要使用的变量之间没有直接映射。
没有办法实时呈现 HTML 表单数据。

WT Forms 是一个灵活的表单渲染和验证库，用于提供用户界面。

安装 Flask-WTF

要使用 WT 表单，我们需要安装 flask-wtf 库，可以使用 pip 安装程序进行安装。

该模块包含一个 Form 类，它被认为是所有表单相关操作的父类。

标准表单字段如下所示。

序号	FormField (表单字段)	描述
1	TextField	用于表示文本字段 HTML 表单元素。
2	BooleanField	用于表示复选框 HTML 表单元素。
3	DecimalField	用于表示文本字段以显示带小数的数字。
4	IntegerField	用于表示文本字段以显示整数值。
5	RadioField (单选字段)	用于表示单选按钮 HTML 表单元素。
6	SelectField (选择字段)	用于表示选择表单元素。
7	TextAreaField (文本域字段)	用于表示文本区域表单元素。
8	PasswordField (密码字段)	用于从用户那里获取密码作为表单输入。
9	SubmitField (提交字段)	它表示 <input type = 'submit' value = 'Submit'> html 表单元素。

请看以下示例。

示例

在此示例中，我们将使用 flask WTF 模块创建一个表单。首先，我们将创建一个名为forms.py的表单类，并将这些表单元素导入到模块 formexample.py 中。

forms.py

from flask_wtf import Form
from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField
from wtforms import validators, ValidationError

class ContactForm(Form):
   name = TextField("Candidate Name ",[validators.Required("Please enter your name.")])
   Gender = RadioField('Gender', choices = [('M','Male'),('F','Female')])
   Address = TextAreaField("Address")
   
   email = TextField("Email",[validators.Required("Please enter your email address."),
   validators.Email("Please enter your email address.")])
   
   Age = IntegerField("Age")
   language = SelectField('Programming Languages', choices = [('java', 'Java'),('py', 'Python')])

   submit = SubmitField("Submit")

formexample.py

from flask import Flask, render_template, request, flash
from forms import ContactForm
app = Flask(__name__)
app.secret_key = 'development key'

@app.route('/contact', methods = ['GET', 'POST'])
def contact():
   form = ContactForm()
   if form.validate() == False:
      flash('All fields are required.')
   return render_template('contact.html', form = form)



@app.route('/success',methods = ['GET','POST'])
def success():
   return render_template("success.html")

if __name__ == '__main__':
   app.run(debug = True)

contact.html

<!doctype html>
<html>
   <body>
      <h2 style = "text-align: center;">Registration Form</h2>
		
      {% for message in form.name.errors %}
         <div>{{ message }}</div>
      {% endfor %}
      
      {% for message in form.email.errors %}
         <div>{{ message }}</div>
      {% endfor %}
      
      <form action = "https://:5000/success" method = "POST">
         
            {{ form.hidden_tag() }}
            
            <div style = "font-size:18px;" font-weight:bold; margin-left:150px;>
               {{ form.name.label }}<br>
               {{ form.name }}
               <br>
               {{ form.Gender.label }} {{ form.Gender }}
               {{ form.Address.label }}<br>
               {{ form.Address }}
               <br>
               {{ form.email.label }}<br>
               {{ form.email }}
               <br>
               {{ form.Age.label }}<br>
               {{ form.Age }}
               <br>
               {{ form.language.label}}<br><br>
               {{ form.language }}
               <br><br>
               {{ form.submit }}
            </div>
            
         </fieldset>
      </form>
   </body>
</html>

Success.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<h1>Form posted successfully</h1>
</body>
</html>

输出

下一个主题Flask vs Django

Flask-WTF

为什么 WTF 有用？

安装 Flask-WTF

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Python Flask

Flask-WTF

为什么 WTF 有用？

安装 Flask-WTF

示例

相关帖子

Flask SQLAlchemy

Flask vs Django

Flask Session

Flask Flashing

Flask 模板

Flask SQLite

Flask 应用程序路由

第一个 Flask 应用程序

Flask 请求对象

Flask Cookies

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器