Question

我正在使用wtforms（和flask）生成动态表单。我想在我正在生成的字段中添加一些自定义css类，但到目前为止我一直无法这样做。使用我发现here的答案，我试图使用自定义小部件来添加此功能。它的实现方式几乎与该问题的答案完全相同：

class ClassedWidgetMixin(object):
  """Adds the field's name as a class.

  (when subclassed with any WTForms Field type).
  """

  def __init__(self, *args, **kwargs):
    print 'got to classed widget'
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

  def __call__(self, field, **kwargs):
    print 'got to call'
    c = kwargs.pop('class', '') or kwargs.pop('class_', '')
    # kwargs['class'] = u'%s %s' % (field.name, c)
    kwargs['class'] = u'%s %s' % ('testclass', c)
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs)


class ClassedTextField(TextField, ClassedWidgetMixin):
  print 'got to classed text field'

在View中，我这样做是为了创建字段（ClassedTextField是从表单导入的，而f是基本表单的一个实例）：

  f.test_field = forms.ClassedTextField('Test Name')

表单的其余部分是正确创建的，但这个jinja：

{{f.test_field}}

生成此输出（无类）：

<input id="test_field" name="test_field" type="text" value="">

任何提示都会很棒，谢谢。

Answer 1

您实际上并不需要转到窗口小部件级别来将HTML类属性附加到字段的呈现中。您只需使用jinja模板中的class_参数指定它即可。

e.g。

    {{ form.email(class_="form-control") }}

将导致以下HTML ::

    <input class="form-control" id="email" name="email" type="text" value="">

要动态地执行此操作，例如，使用表单的名称作为HTML类属性的值，您可以执行以下操作：

金贾：

    {{ form.email(class_="form-style-"+form.email.name) }}

输出：

    <input class="form-style-email" id="email" name="email" type="text" value="">

有关注入HTML属性的更多信息，请查看official documentation。

Answer 2

如果您想以编程方式将css类（或者实际上是任何其他属性）包含在form字段中，则可以使用render_kw参数。

例如：

r_field = RadioField(
    'Label', 
    choices=[(1,'Enabled'),(0,'Disabled')], 
    render_kw={'class':'myclass','style':'font-size:150%'}
)

将呈现为：

<ul class="myclass" id="r_field" style="font-size:150%">
    <li><input id="r_field-0" name="r_field" type="radio" value="1"> <label for="r_field-0">Enabled</label></li>
    <li><input id="r_field-1" name="r_field" type="radio" value="0"> <label for="r_field-1">Disabled</label></li>
</ul>

Answer 3

虽然很晚，但是这是我发现的。渲染模板时，您可以在圆括号内传递任何键值对，并且只需在渲染时放置这些键值即可。例如，如果您必须将一个类和一些占位符文本放在一起，则可以像下面这样进行操作：

{{ form.email(class='custom-class' placeholder='email here') }}

实际上将如下所示渲染：

<input class="custom-class" id="email" name="email" placeholder="email here" type="text" value="">

基本上，您甚至可以尝试通过添加一些不存在的HTML属性和一些值来进行实验。

为了减轻痛苦，将辅助函数用作宏并直接渲染它们而不是实际字段是一件好事。假设您有常见的类和错误类。您可以拥有这样的帮助程序宏：

{% macro render_field(field,cls,errcls) %}

  {% if field.errors %}
  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    
    {{ field(class = cls + " " + errcls,**kwargs) | safe}}
    <div class="invalid-feedback">
      {% for error in field.errors %}
      <span> {{error}}</span>
      {% endfor %}
    </div>
  </div>

  {% else %}

  <div class="form-group">
    <label for="{{ field.id}}">{{ field.label.text }}</label>
    {{ field(class = cls,**kwargs) | safe}}
  </div>
  
  {% endif %}
{% endmacro %}

现在，在渲染字段时，您可以像这样在模板中使用其他属性来调用：

{{render_field(form.email,cls="formcontrol",errcls="isinvalid",placeholder="Your Email") }}

这里我使用了引导程序类，只需根据您的需要修改helper函数！

希望有帮助！编码愉快！

Answer 4

在 WTForms 2.1 中，我使用extra_classes，就像下面这样：

1。第一种方式

{{ f.render_form_field(form.email, extra_classes='ourClasses') }}

我们也可以使用@John Go-Soco答案在表单字段上使用render_kw属性，就像这样。

2。第二种方式

style={'class': 'ourClasses', 'style': 'width:50%;'}
email = EmailField('Email', 
                   validators=[InputRequired(), Length(1, 64), Email()],
                   render_kw=style)

但是我更希望使用第一种方法。

将css类添加到wtform中的字段

4 个答案: