Добавьте класс CSS на поле в WTForm

Question

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

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'

.

В поле зрения, я делаю это, чтобы создать поле (ClassedTextFieldfield Imported из форм, а 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 к рендерингу поля.Вы можете просто указать его, используя параметр class_ в шаблоне Jinja.

e.g.

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

.

приведет к следующему HTML ::

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

.

Делать это динамически, скажем, используя имя формы в качестве значения атрибута класса HTML, вы можете сделать следующее:

jinja:

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

.

Выход:

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

.

Для получения дополнительной информации о инъекционных атрибутах HTML, посмотрите на Официальная документация . .

Answer 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>

.

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

.

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