Web应用程序是为用户提供用户界面,HTML提供了<form>标签,该标签用于设计界面 可以适当使用表单的元素,例如文本输入(input),单选(radop)
用户输入的数据通过GET或POST方法以Http请求消息的形式提交到服务器端脚本。
服务器端脚本必须根据http请求数据重新创建表单元素。
使用HTML表单的另一个缺点是很难动态呈现表单元素, HTML本身无法提供验证用户输入的方法。
在这里,方便使用 WTForms。 Flask-WTF扩展程序与此 WTForms 库提供了一个简单的接口。
使用 Flask-WTF ,无涯教程可以在Python脚本中定义表单字段,并使用HTML模板呈现它们,也可以将验证应用于 WTF 字段。
看看动态生成HTML是如何工作的。
首先,需要安装Flask-WTF扩展。
pip install flask-WTF
安装的软件包包含一个 Form 类,该类必须用作用户定义表单的父级。
WTforms 软件包包含各种表单字段的定义。下面列出了一些标准表单字段。
Sr.No | Standard Form Fields & Remark |
---|---|
1 | TextField 表示<input type ='text'> HTML表单元素 |
2 | BooleanField 表示<input type ='checkbox'> HTML表单元素 |
3 | DecimalField 用小数显示数字的文本字段 |
4 | IntegerField 用于显示整数的TextField |
5 | RadioField 表示<input type ='radio'> HTML表单元素 |
6 | SelectField 表示选择表单元素 |
7 | TextAreaField 表示<testarea> html表单元素 |
8 | PasswordField 表示<input type ='password'> HTML表单元素 |
9 | SubmitField 表示<input type ='submit'>表单元素 |
如,可以将包含文本字段的表单设计如下:
from flask_wtf import Form from wtforms import TextField class ContactForm(Form): name=TextField("Name Of Student")
除了"name" 字段外,还会自动创建CSRF令牌的隐藏字段。这是为了防止跨站点请求伪造攻击。
渲染后,将生成等效的HTML脚本,如下所示。
<input id="csrf_token" name="csrf_token" type="hidden" /> <label for="name">Name Of Student</label><br> <input id="name" name="name" type="text" value="" />
在Flask应用程序中使用用户定义的表单类,并使用模板呈现表单。
from flask import Flask, render_template from forms import ContactForm app=Flask(__name__) app.secret_key='development key' @app.route('/contact') def contact(): form=ContactForm() return render_template('contact.html', form=form) if __name__ == '__main__': app.run(debug=True)
WTForms包还包含验证器类。在将验证应用于表单字段时很有用。以下列表显示了常用的验证器。
Sr.No | Validators Class & Remark |
---|---|
1 | DataRequired 检查输入字段是否为空 |
2 | 检查字段中的文本是否遵循电子邮件ID约定 |
3 | IPAddress 验证输入字段中的IP地址 |
4 | Length 验证输入字段中字符串的长度是否在给定范围内 |
5 | NumberRange 在给定范围内验证输入字段中的数字 |
6 | URL 验证在输入字段中输入的URL |
现在,无涯教程将" DataRequired" 验证规则应用于联系表中的 name 字段。
name=TextField("Name Of Student",[validators.Required("Please enter your name.")])
表单对象的 validate()函数会验证表单数据,如果验证失败,则会抛出验证错误。 错误消息将发送到模板。在HTML模板中,错误消息是动态呈现的。
{% for message in form.name.errors %} {{ message }} {% endfor %}
下面的示例演示了上面给出的概念。 联系表单的设计在(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("Name Of Student",[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('Languages', choices=[('cpp', 'C++'), ('py', 'Python')]) submit=SubmitField("Send")
验证器将应用于“Name”和“Email”字段。
下面是Flask应用程序脚本(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 request.method == 'POST': if form.validate() == False: flash('All fields are required.') return render_template('contact.html', form=form) else: return render_template('success.html') elif request.method == 'GET': return render_template('contact.html', form=form) if __name__ == '__main__': app.run(debug=True)
模板(contact.html)的脚本如下-
<!doctype html> <html> <body> <h2 style="text-align: center;">Contact Form</h2> {% for message in form.name.errors %} <div>{{ message }}</div> {% endfor %} {% for message in form.email.errors %} <div>{{ message }}</div> {% endfor %} <form action="http://localhost:5000/contact" method=post> <fieldset> <legend>Contact Form</legend> {{ form.hidden_tag() }} <div style=font-size:20px; 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> {{ form.language }} <br> {{ form.submit }} </div> </fieldset> </form> </body> </html>
在Python Shell中运行 formexample.py 并访问URL http://localhost:5000/contact 。 Contact 表单将如下所示显示。
如果有任何错误,页面将如下所示-
如果没有错误,将呈现" success.html" 。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)