WTForms 标签位置/隐藏标签答案

【问题标题】：WTForms Label Position / Hiding LabelWTForms 标签位置/隐藏标签
【发布时间】：2019-10-19 22:21:10
【问题描述】：

我已经使用带有 Bootstrap 的 HTML / CSS 构建了一个表单，并且我正在尝试将 WTForms 集成到其中 - 一切正常并且格式化完美，直到我开始使用 wtf.form_field 函数格式化字段，现在我似乎有多余的标签。

谁能告诉我如何 a) 重新定位标签或 b) 根本不渲染它们？

这是我的代码示例：

<div class="container">
    <form action="" method="post" novalidate>
    <div class="form-group row">
        <label for="label-name" class="col-sm-4 col-form-label">Desired Label Position</label>
        <div class="col-sm-8">
 {{ wtf.form_field(form.crm_description, class="form-control", placeholder="Placeholder Text", rows="1", readonly=true)}}

         </div>
     </div>

这是我想要实现的一个示例：左侧的标签是设计使然，但是 wtforms 似乎想在我似乎无法移动的字段本身的顶部添加它自己的标签。

谢谢

【问题讨论】：

看起来您正在使用 Flask-Bootstrap 库来呈现您的表单？看看macro definition for form_field，似乎没有办法指定它不呈现标签，但是有一个fom-type 参数，你可以要求一个“水平”表单类型，听起来像它应该做你想做的事，例如。将form-type="horizontal" 包含到您的wtf.form_field() 函数调用中。

标签： css python-3.x flask flask-wtforms wtforms

【解决方案1】：

查看类并将css标签显示设置为none

例如：

<style>
    label{
      display: None;
    }
    </style>

【讨论】：

是的，这看起来没有任何副作用......
你可能需要检查标签类，使用 chrome 上的检查来查看这个样式块。