web-dev-qa-db-ja.com

Flask-WTFormsを使用して、htmlのフォームセクションのスタイルを設定するにはどうすればよいですか？

Flask-WTFの非常に単純化されたwikiを読みましたが、それを使って何ができるかについてあまり理解できませんでした。私は、htmlの<form>セクションが次のようにしか見えないという印象を受けています

<form method="post">
    {{ form.hidden_tag() }}
    {{ form.name }}
    <input type="submit">
</form>

しかし、私は本当に次のようなマテリアライズドを使用してスタイルを設定したいと思います。

        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">account_circle</i>
                <input value="FN" id="first_name" type="text" class="validate">
                <label class="active" for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
                <input value="LN" id="last_name" type="text" class="validate">
                <label class="active" for="last_name">Last Name</label>
            </div>
        </div>

{{ form.first_name }}と{{ form.last_name }}はどこに収まりますか？

編集：私の答えをもう少し詳しく説明しましょう：たとえば、Materialized datepicker（ユーザーが日付を選択できる優れたポップアップカレンダー）のようなものが必要です。これは<input class='datepicker' length="50">にあるはずですが、今は<input>行全体を{{ form.date }}に置き換えています...クラスを編集する特権を失いました。

pythonflaskwtformsflask-wtforms
10
return 0

WTFormsフィールドは、レンダリングする入力に設定される属性を持つ 呼び出された にすることができます。フィールドを参照するだけでなく、スタイリングやJavaScript機能などに必要な属性をフィールドに渡します。ラベルは同じように動作し、field.labelでアクセスできます。

for、value、type、id、およびnameは自動的に処理されるため、渡す必要はありません。属性の特殊なケースを処理するためのいくつかの ルール があります。属性名がPythonキーワード（classなど）の場合、下線を追加します：class_。ダッシュは無効ですPython名前なので、単語間の下線はダッシュに変換されます。data_toggleはdata-toggleになります。

{{ form.first_name(class_='validate') }}
{{ form.first_name.label(class_='active') }}

{{ form.begins(class_='datepicker', length=50) }}

リンクされたメソッドはどちらも直接呼び出す必要がないことに注意してください。これらのドキュメントは、フィールドを呼び出すときの動作を説明しているだけです。

12
davidism

WTForms 2.1では、次の行のようにextra_classesを使用します。

1。最初の方法

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

または多分あなたの場合はこのように：

{{ form.first_name, extra_classes='ourClasses' }}

以下の2番目の方法のように、フォームフィールドでrender_kw属性を使用することもできます。

2。2番目の方法

style={'class': 'ourClasses', 'style': 'width:50%; other_css_style;'}
first_name = StringField('First name',
                     validators=[InputRequired(),Length(1, 64)],
                     render_kw=style)

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

1
Tri