WTForms初始化字段时可以添加占位符属性吗?


73

我想在WTForms的字段上添加一个占位符属性。我该怎么做?

abc = TextField('abc', validators=[Required(), Length(min=3, max=30)], placeholder="test")

上面的代码无效

如何添加具有值的占位符属性?

Answers:


138

已针对WTForms 2.1更新

从WTForms 2.1(2015年12月)开始,您现在可以通过使用render_kw=字段构造函数的参数来设置呈现关键字。

因此该字段看起来像:

abc = StringField('abc', [InputRequired()], render_kw={"placeholder": "test"})

注意这是可能的;它确实开始弥合代码和表示之间的界限;所以明智地使用它!


(旧答案,对于早于WTForms 2.1的版本仍然适用)

placeholder WTforms 2.0.x及更低版本中的Python构造函数不支持。

但是,您可以在模板中轻松完成此操作:

{{ form.abc(placeholder="test") }}

2
u是正确的,占位符应该是样式,不应添加结构元素。
Kit Ho

14
占位符与标签相同。因此,它是内容而不是样式。将其设置在模板中将使不可能具有通用模板。
Milimetric

12
description允许在构造字段时设置WTForms字段的关键字参数,而无需检查,仅将其直接复制到字段上即可,因此可以是任何值,而不仅仅是字符串,甚至可以是自定义属性。如果要保留自己的元数据,则可以简单地使用它来TextField(..., description={'placeholder': foo', 'class': bar}保留您想要的任何数据:(甚至是自定义类),然后在模板中将此属性用于所需的任何特殊元数据。
Crast

3
要添加字段标签,您可以编写:{{ form.abc(placeholder=form.abc.label.text) }}
danbruegge 2014年

2
我不赞成这个答案,我不明白有人怎么会认为占位符是一种显示设置。:D Plus解决方案实际上不适用于模板中硬编码形式以外的任何内容。
Drachenfels 2015年

8

正确答案如下:

abc = TextField('abc', validators=[Required(), Length(min=3, max=30)], description="test")

正如人们在阅读文档中可以读到的:

description – A description for the field, typically used for help text.

然后在您的模板中:

{% import 'forms.html' as forms %}

{% for field in form %}
    {{ forms.render_field(field) }}
{% endfor %}

其中render_field是在forms.html中定义的宏:

{% macro render_field(field) -%}

{% if field.type == 'CSRFTokenField' %}
    {{ field }}

    {% if field.errors %}
        <div class="warning">You have submitted an invalid CSRF token</div>
    {% endif %}
{% elif field.type == 'HiddenField' %}
    {{ field }}
{# any other special case you may need #}
{% else %}
    <div class="form-group">
        <label for="{{ field.label.field_id }}" class="col-sm-2 control-label">{{ field.label.text }}</label>
        <div class="col-sm-10">
            {{ field(placeholder=field.description) }}
            {% if field.errors %}
                <div class="alert alert-danger" role="alert">
                {% for err in field.errors %}
                    <p>{{ err|e }}</p>
                {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}

{%- endmacro %}

2

我的解决方案是使用自定义小部件:

from flask.ext.wtf import Form
from wtforms import StringField, validators
from wtforms.widgets import Input


class CustomInput(Input):
    input_type = None

    def __init__(self, input_type=None, **kwargs):
        self.params = kwargs
        super(CustomInput, self).__init__(input_type=input_type)

    def __call__(self, field, **kwargs):
        for param, value in self.params.iteritems():
            kwargs.setdefault(param, value)
        return super(CustomInput, self).__call__(field, **kwargs)


class CustomTextInput(CustomInput):
    input_type = 'text'


class EditProfileForm(Form):
    first_name = StringField('First name',
                             validators=[validators.DataRequired()],
                             widget=CustomTextInput(placeholder='Enter first name'))

也许它不是很优雅,但是它允许使用Flask-Bootstrap并在表单代码中而不是在模板中定义表单


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.