Question

我正在使用flask和bootstrap，我需要创建一个没有标签的字段，因为我将把它作为占位符，这样可以节省UI中的空间，因为这个字段会出现几次。

{{ wtf.form_field(field) }}

我不想要标签字段，只需要用户输入信息的实际字段

谢谢你们。

Answer 1

使用模板文件中的标签，所有标签都被隐藏，并且空间可用：

{% block styles %}
{{super()}}
<style>
  .control-label {display: none;}
</style>
{% endblock %}

Answer 2

在python中创建Form类时，您可以简单地将标签设置为空字符串。

class form_field(Form):
    field = StringField( label='')

这里是在 documentation 中，虽然没有很好地解释。

它说； “当你覆盖一个 Field 的构造函数时，为了保持一致的行为，你应该设计你的构造函数，以便：

您将 label='',validators=None 作为前两个位置参数"

Answer 3

你正在使用一个以引导为主题的宏来渲染wtform对象，没有理由你不能根据现有的宏创建自己的自定义宏，除了没有{之外，它完全相同{1}}渲染。

例如，您正在使用的宏的代码是located on github。我可以复制所有宏并将其放在一个新的.label模板文件中，并将宏重命名为'wtf_nolabel`并根据我的需要进行调整。

让我们以第83-93行为例，这似乎呈现了上面尚未处理的所有内联表单元素：

custom_wtf.html

我可以删除{%- if form_type == "inline" %} {{field.label(class="sr-only")|safe}} {% if field.type == 'FileField' %} {{field(**kwargs)|safe}} {% else %}行，现在可以用于内联元素，向下移动到注明的代码下方，我将删除第97-99行以调整当前的水平渲染选项：< / p>

{{ field.label(class="sr-only")|safe }}

如果您的表单元素只是一种特定类型的输入，那么您可以构建自己的简化宏，它只是针对该表单元素。

Answer 4

如果您没有按照@Doobeh的描述编辑模板宏，并且您不想显示任何字段标签，则可以使用以下技术。

创建一个“无标签”mixin类，将所有表单字段的label属性设置为None。

class NoLabelMixin(object):
    def __init__(self, *args, **kwargs):
        super(NoLabelMixin, self).__init__(*args, **kwargs)
        for field_name in self._fields:
            field_property = getattr(self, field_name)
            field_property.label = None

class MyForm(Form):
    first_name = StringField(u'First Name', validators=[validators.input_required()])
    last_name  = StringField(u'Last Name', validators=[validators.optional()])

class MyNoLabelForm(NoLabelMixin, MyForm):
    pass

my_no_label_form = MyNoLabelForm()

Answer 5

有点迟了，但是我发现最简单的方法是使用CSS将标签的可见性设置为“无”。

.control-label {
display: none;

}

以上CSS将使所有标签不可见。对于每个标签，这可能并不理想，但是如果将“ no-label”类添加到特定的WTF表单字段（或者实际上是对字段进行分组的高级元素），则以下CSS将不会显示这些字段的标签：

.no-label .control-label {
display: none;

}

Answer 6

我知道这已经晚了，但我遇到了与 OP 相同的问题，因为我只是想要该字段（没有标签）。在 WTForms==2.3.3 和 Flask==1.1.2 中，它就像访问内部字段一样简单。

        {% for field in form.cities %}
        {{ wtf.form_field(field.city)}}
        {% endfor %}

因此，在 OP 的情况下，它是 field.name，其中 name 是您表单类中的变量名称。

Answer 7

而是创建一个新的宏和新类

1）做了一种css样式，隐藏了页面开头的标签，因此它们不显示

<style>
.my_div_class label{
 visibility: hidden;
}
</style>

2）一个javascript，删除运行document.ready

的我想要的div下面的所有标签

        var all = hold.getElementsByTagName("LABEL");
        for (var i=0; i < all.length; i++){
            var parent = all[i].parentElement;
            parent.removeChild(all[i])
            }
        }

可能不是最好的做法，但是做起来非常简单，非常快，发布它很简单，我可能需要记住以后，并且不需要深入了解bootstrap和烧瓶形式。希望它有所帮助

Answer 8

更容易！

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

这很简单

Answer 9

这一行将渲染一个带有隐藏标签的表单域

    {{ render_field(form.phone, form_type="inline", class="form-control", placeholder="Phone number")}}

这是渲染的输出：

    <div class="form-group required">
    <label class="sr-only" for="phone">Phone</label>
    <input class="form-control" id="phone" name="phone" placeholder="Phone Number" required="" type="text" value="">
    </div>

标签是隐藏的 class="sr-only"。

是否可以使用标签呈现wtf.form_field？

9 个答案: