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 对象。

  • 相关阅读:
    Java实现数字转化成字符串左边自动补零方法
    java如何对map进行排序详解(map集合的使用)
    java字符串比较的原理
    rancher快速创建mysql和redis
    k8s Ingress介绍和部署IngressController
    k8s+rancher+阿里云镜像简单部署flask项目
    helm 部署minio
    k8s存储数据卷
    k8s搭建redis集群
    团队作业4:第二篇Scrum冲刺博客
  • 原文地址:https://www.cnblogs.com/senlinyang/p/8377312.html
Copyright © 2011-2022 走看看