logo标签列表

是否可以在不使用标签的情况下呈现wtf.form_field？

htmltwitter-bootstrapformsflask
7
我正在使用Flask和Bootstrap，我需要创建一个没有标签的字段，因为我将把它作为占位符放置，这样可以节省UI中的空间，因为该字段会出现多次。
{{ wtf.form_field(field) }}

我不需要标签字段，只需要用户输入信息的实际字段。
9个回答
3

可能有点晚了，但我觉得最简单的方法是使用CSS将标签的可见性设置为None。

.control-label {
display: none;

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

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

}

2
您正在使用一个基于Bootstrap的宏来渲染wtform对象，您完全可以创建自己的定制宏，基于现有的宏进行修改，做到与原有宏完全相同，只是不会渲染.label。
例如，您正在使用的宏的代码可以在GitHub上找到。我可以将该宏的所有内容复制到一个新的custom_wtf.html模板文件中，并将该宏重命名为“wtf_nolabel”，然后根据我的需要进行调整。
让我们以83-93行为例，这段代码似乎渲染了所有未在上面处理的内联表单元素：
{%- if form_type == "inline" %}
    {{field.label(class="sr-only")|safe}}
    {% if field.type == 'FileField' %}
      {{field(**kwargs)|safe}}
{% else %}

我可以删除 {{ field.label(class="sr-only")|safe }} 这行代码，这样就可以让内联元素正常工作。继续往下看，我需要删除第97-99行来调整水平渲染选项，因为当前的选项是：

{{field.label(class="control-label " + (
  " col-%s-%s" % horizontal_columns[0:2]
))|safe}}

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

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

创建一个名为“无标签”（No 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()
2
这行代码将渲染一个带有隐藏标签的表单字段。
    {{ 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"，这个类会使其隐藏。
2

在模板文件中加入以上内容后，所有标签都会被隐藏，页面会变得更加简洁。

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

在Python中创建Form类时，可以将标签设置为空字符串。

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

这是文档中的内容，但没有很好的解释。
它说： 当您覆盖字段的构造函数时，为了保持一致的行为，您应该设计您的构造函数，使其满足以下条件：
您将label=' '，validators=None作为前两个位置参数。
0

我知道这有点晚了，但我和 OP 一样遇到了同样的问题，我只想要字段（没有标签）。在 WTForms==2.3.3 和 Flask==1.1.2 中，只需访问内部字段即可。

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

在OP的情况下，它将是field.name，其中name是您表单类中的变量名。
-1

不要创建新的宏和新的类

1）编写了一个CSS样式，隐藏页面开头的标签，使其不显示

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

2) 一个在 document.ready 中运行的 JavaScript，用于删除我想要的 div 下面所有标签。

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

可能不是最佳实践，但很容易做到并且速度很快，因为它很简单，所以发布它，我可能需要稍后记住它，并且不需要深入了解Bootstrap和Flask表单。希望有帮助。

-1

更加简单！

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

这太简单了

这会隐藏页面中的所有标签。天哪！ - blurfus
它确实回答了问题，不要渲染标签，比重写jinja wtf表单模板宏更容易。 - pelos
不是这样的。它仍会渲染标签，但在之后隐藏它们（和所有标签）。这不仅影响与wtf表单模板相关的标签，而且还会影响DOM（HTML/document）上的任何标签。 - blurfus
渲染意味着在页面中显示（与代码内容无关），他没有询问特定的标签，但如果是这种情况，用户只需要隐藏某些标签，他可以使用类和ID，例如 .my_class label... - pelos
1
那不是渲染的意思，但无论如何... 无论如何，我的观点是这将影响所有标签，因此这不是一个好建议，这就是为什么被投票否决的原因。 - blurfus
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接