如何使用WTForms渲染表单？

记得在之前《如何使用WTForms对表单进行验证？》一文中跟大家讲过，WTFroms不仅可以做表单验证，还可以做模板渲染，本节就为大家讲讲如何使用WTForms渲染表单？

新建一个flask_wtf_demo flask 项目,其代码如下：

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def index():
    return "index page"

@app.route("/login")
def login():
    return render_template("login.html")

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

注：由于我们只做模板渲染，所以这里就不考虑POST方法。

然后在templates文件下新建一个login.html文件，其代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td><input type="submit" name="登录"></td>
        </tr>
    </table>
</form>
</body>
</html>

运行主app文件，结果如下：

然后我们在项目下新建一个forms文件，用于放表单验证代码。forms.py文件代码如下：

from wtforms import Form,StringField
from wtforms.validators import InputRequired

class LoginForm(Form):
    username = StringField(validators=[InputRequired()])

定义好了forms.py文件，我们在主app文件导入LoginForm这个类

from forms import LoginForm

然后实例化一个LoginForm对象，赋给form变量，并将其传入模板中！

@app.route("/login")
def login():
    form = LoginForm(request.form)
    return render_template("login.html",form=form)

打开login.html文件，找到下方代码：

 <td>用户名</td>
 <td><input type="text" name="username"></td>

把它替换成下面代码：

<td>{{ form.username.label }}</td>
<td>{{ form.username() }}</td>

再运行主app文件，结果如下：

结果和上面结果基本一样，唯一区别就是上面显示的是用户名，而下方却是Username，为什么会出现这样的结果呢？原因是我们没有指定这个字段label名称，它会自动采用我们forms中定义的username字段，然后将其首字母大写显示到网页中。有的人可能会问？哪我们如何使用自定义字段名字呢？方法很简单，我们在froms.py定义验证字段的时候，在前面输入自定义名称即可！代码如下：

username = StringField("请输入用户名",validators=[InputRequired()])

再运行主app文件，结果如下：

怎么样？看完觉得是不是很简单？？

最后一个问题，我们这个表单界面太low了，我们要加点自定义样式（比如想给这文本框文字加个红色）怎么添加？方法如下：

1、先定义样式（这里以class选择器为例），代码如下：

.to_red{color:red;}

2、然后在 form.username()调用样式代码，代码如下：

{{ form.username(class="to_red") }}

再运行主app文件，在文本框输入文字测试一下效果：

最后的最后，总结一下用WTForms渲染模板的好处与坏处。

好处：少些代码

坏处：当网站页面需要调整、改版时，不利于web人员页面修改或样式调整

来源：CSDN

作者：汤锅

链接：https://blog.csdn.net/aimill/article/details/83069286

标签

表单验证

app

html表单