zoukankan      html  css  js  c++  java
  • Flask从入门到精通之Flask表单渲染成HTML

      表单字段是可调用的,在模板中调用后会渲染成HTML。假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示:

    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.name.label }} {{ form.name() }}
        {{ form.submit() }}
    </form>

      当然,这个表单还很简陋。要想改进表单的外观,可以把参数传入渲染字段的函数,传入的参数会被转换成字段的HTML 属性。例如,可以为字段指定id 或class 属性,然后定义CSS 样式

    <form method="POST">
        {{ form.hidden_tag() }}
        {{ form.name.label }} {{ form.name(id='my-text-field') }}
        {{ form.submit() }}
    </form>

      即便能指定HTML 属性,但按照这种方式渲染表单的工作量还是很大,所以在条件允许的情况下最好能使用Bootstrap 中的表单样式。Flask-Bootstrap 提供了一个非常高端的辅助函数,可以使用Bootstrap 中预先定义好的表单样式渲染整个Flask-WTF 表单,而这些操作只需一次调用即可完成。使用Flask-Bootstrap,上述表单可使用下面的方式渲染

    {% import "bootstrap/wtf.html" as wtf %}
    {{ wtf.quick_form(form) }}

      import 指令的使用方法和普通Python 代码一样,允许导入模板中的元素并用在多个模板中。导入的bootstrap/wtf.html 文件中定义了一个使用Bootstrap 渲染Falsk-WTF 表单对象的辅助函数。wtf.quick_form() 函数的参数为Flask-WTF 表单对象,使用Bootstrap 的默认
    样式渲染传入的表单。hello.py 的完整模板如一下示例:

    {% extends "base.html" %}
    {% import "bootstrap/wtf.html"as wtf %}
    {% block title %}Flask{% endblock %}
    
    {% block page_content %}
    <div>
        <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
    </div>
    {{ wtf.quick_form(form) }}
    {% endblock %}

      模板的内容区现在有两部分。第一部分是页面头部,显示欢迎消息。这里用到了一个模板条件语句。Jinja2 中的条件语句格式为{% if condition %}...{% else %}...{% endif %}。如果条件的计算结果为True,那么渲染if 和else 指令之间的值。如果条件的计算结果为False,则渲染else 和endif 指令之间的值。在这个例子中,如果没有定义模板变量name则会渲染字符串“Hello, Stranger!”。内容区的第二部分使用wtf.quick_form() 函数渲染NameForm 对象。

  • 相关阅读:
    慕课网-安卓工程师初养成-1-4 练习题
    慕课网-安卓工程师初养成-1-3 使用记事本编写Java程序
    慕课网-安卓工程师初养成-1-2 开发环境搭建
    慕课网-安卓工程师初养成-1-1 Java简介
    安卓开发菜鸟初学
    Java编程——输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。
    JSP三种常用注释
    语录——(摘自应届毕业生网)
    Servlet基础知识
    建议网站购物——建立一个简易购物网站,包括登录页面、商品选择页面和结账页面。
  • 原文地址:https://www.cnblogs.com/senlinyang/p/8377312.html
Copyright © 2011-2022 走看看