（十）表单的渲染

最新推荐文章于 2024-03-28 17:41:27 发布

转载最新推荐文章于 2024-03-28 17:41:27 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/506240

文章标签：

#python #前端 #ViewUI

服务端代码:

#学会了写表单类，如何将表单类渲染成HTML呢，此处可以结合前面学过的模板标签来进行渲染。
 
#一、服务端代码
#1、test_corms.py 文件
#coding:utf-8

from flask import Flask, render_template

from forms import LoginForm

app = Flask(__name__)
 
@app.route('/')

def login():

    '''访问首页'''

    form = LoginForm()

    return render_template("from1.html",form=form)
 
#预防重复提交

app.config['SECRET_KEY'] = 'ddu384783274*%%Hgdiwre@#$%^&*de'
 
if __name__ == '__main__':

    app.run(debug=True)
 
#2、forms.py文件
#coding:utf-8

from flask_wtf import FlaskForm

from wtforms import StringField, SubmitField, SelectField, RadioField,TextAreaField, \

    DateField, BooleanField

from wtforms.validators import DataRequired

from wtforms.widgets import CheckboxInput, PasswordInput
 
class LoginForm(FlaskForm):

    '''定义登录表单'''

    username = StringField('用户名',validators=[DataRequired()],

                           render_kw={"required":"required","class":"form-controal"})

    password = StringField('密码', validators=[DataRequired()], widget=PasswordInput())

    language = SelectField('编程语言',

        choices = [('cpp','c++'),('py','python'),('java','Java')])

    code = TextAreaField('代码')

    date = DateField('日期')

    is_checked = BooleanField('是否已经通过验证')

    submit = SubmitField('登录')

前端代码：

<!DOCTYPE HTML>

<html>

    <head>

        <title>

            flask-wtf 表单渲染

        </title>

    </head>

    <body>

        <form action="", method="get", accept-charset="utf-8">

            <div>

                {{ form.username.label }} : {{ form.username(id="id-username") }}

                <small>{{ form.username.description }}</small>

            </div>

            <div>

                {{ form.password.label}} : {{ form.password }}

            </div>

            <div>

                {{ form.language.label }} : {{ form.language }}

            </div>

            <div>

                {{ form.code.label }} : {{ form.code }}

            </div>

            <div>

                {{ form.date.label }} : {{ form.date }}

            </div>

            <div>

                {{ form.is_checked.label}} : {{ form.is_checked}} 

            </div>

            <div>

                {{ form.submit.label }} : {{ form.submit }}

                {{ form.csrf_token }}

            </div>

        </form>

    </body>
 
</html>

本文转自 TtrToby 51CTO博客，原文链接:http://blog.51cto.com/freshair/1927432