Добавить класс css в поле в wtform

Я создаю динамическую форму, используя wtforms (и флягу). Я хотел бы добавить некоторые пользовательские классы css в поля, которые я создаю, но до сих пор я не мог этого сделать. Используя ответ, который я нашел здесь, я попытался использовать собственный виджет, чтобы добавить эту функциональность. Он реализуется почти так же, как и ответ на этот вопрос:

class ClassedWidgetMixin(object):
  """Adds the field 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'

В представлении я делаю это для создания поля (ClassedTextField импортируется из форм, а f является экземпляром базовой формы):

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

Остальная часть формы создается правильно, но этот jinja:

{{f.test_field}}

производит этот вывод (без класса):

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

Любые советы будут замечательными, спасибо.

Ответы

Ответ 1

Вам действительно не нужно идти на уровень виджета, чтобы привязать атрибут класса HTML к рендерингу поля. Вы можете просто указать его с помощью параметра class_ в шаблоне jinja.

например.

    {{ 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 см. в официальной документации .

Ответ 2

Если вы хотите программно включить класс css (или, действительно, любые другие атрибуты) в поле формы, вы можете использовать аргумент 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>

Ответ 3

В 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)

Но я бы больше хотел использовать первый способ.