web-dev-qa-db-ja.com

cssクラスをwtformのフィールドに追加します

Wtforms（およびフラスコ）を使用して動的なフォームを生成しています。生成するフィールドにいくつかのカスタム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'

ビューで、これを実行してフィールドを作成します（ClassedTextFieldはフォームからインポートされ、fは基本フォームのインスタンスです）：

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

フォームの残りの部分は正しく作成されますが、このジンジャ：

{{f.test_field}}

この出力を生成します（クラスなし）：

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

ヒントはありがたいです、ありがとう。

cssflaskwtforms
45
pheven

実際には、ウィジェットレベルに移動して、フィールドのレンダリングにHTMLクラス属性を付加する必要はありません。 jinjaテンプレートのclass_パラメーターを使用して簡単に指定できます。

例えば.

    {{ 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属性の挿入の詳細については、 公式ドキュメント をご覧ください。

141
user559633

プログラムで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>
9
John Go-Soco

WTForms 2.1では、以下のようなextra_classesを使用しています。

1。最初の方法

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

このように、@ John Go-Socoの回答を使用して、フォームフィールドでrender_kw属性を使用することもできます。

2。2番目の方法

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

しかし、私はより最初の方法を使用したいと思います。

1
Gofy and Kitty