メニュー

リファレンス:フォームオプション

Name

フォームに、必須のオプションはありません。
しかし、 フロントエンドのフォーム で解説したように、最低でも name を付けることは、強く推奨します。

form:
    name: my-form

この名前は、 Grav サイト全体で 唯一無二でなければいけません
なぜなら、システムは、このフォーム名によって、フォームを一意に識別するからです。
フォームは、他のページからでも、このフォーム名により参照することができます。

Method

フォームの送信を、POST か、 GET か制御します。
デフォルトは POST です。
注意点として、file フィールドが入力欄にあるとき、 enctype="multipart/form-data" を method に追加してください。

form:
    method: GET

Action

デフォルトの action は、現在のページにルーティングします。
フォームは、フォームがあるページで処理される必要があるので、ほとんどの場合、これは理にかなっています。
しかし、異なる拡張子のファイル(もしかすると .json )や、特定のページのアンカーに上書きしたい場合もあるでしょう:

form:
    action: '/contact-us#contact-form'

フォームを定義したページとは別ページで、フォームの結果を処理したい場合に、その別ページでフォーム処理をすることもできます。
これは、オリジナルのフォームで使用されているテンプレートから、レスポンスのテンプレートを変更するテクニックとして使われます:

form:
    action: /contact-us/ajax-process

form-messages.html.twig というファイルがあり、メッセージデータだけを返します。
あるいは、これから見ていくような方法もあります…

Template

通常、フォームを表示するページのテンプレートは、成功/失敗のメッセージ表示や、インラインのバリデーションのレスポンスを完全に処理できます。
しかし、ときには、別の Twig テンプレートを使ってレスポンスを繰り返したほうが便利なこともあります。
その良い例として、 Ajax で処理したい場合です。
成功/失敗のメッセージだけの HTML をテンプレートで返したいでしょう。
そのようなとき、 JavaScript によってこれらを注入することができます:

form:
    template: form-messages

ID

CSS の id を設定できます。
もし設定されなければ、フォーム名が使われます。

form:
    id: my-form-id

Classes

id と同じく、フォームに class を設定します。
こちらには、デフォルト値はありません。

form:
    classes: 'form-style form-surround'

Attributes

フォーム要素に、カスタムの属性を付け加えます。
以下の例では、key を属性とし、value をその属性に対する値とします。

form:
    attributes:
        key: value

Inline Errors

インラインのエラーを表示するかどうかを決定します。
トラブルシューティングで重要なツールです。

form:
    inline_errors: true

Client-side Validation

client_side_validation を false にすると、 HTML5 のクライアントサイドでできるバリデーションを超えた、インラインエラーや詳細なサーバーサイドのバリデーションが表示できるようになります。
form.yaml ファイルや、フォーム定義によって、このクライアントサイドのバリデーションを無効化できます。

form:
    client_side_validation: false

XSS Checks

Grav 1.7 以降では、デフォルトで、すべてのフォームでさまざまな XSS 対策ができます。
デフォルト設定は、 セキュリティ設定 に書かれています。
しかし、フォームごとに、もしくは入力欄ごとに、これらの設定を上書きできます。
たとえば、そのフォーム全体で XSS チェックを無効にすることもできます:

form:
    xss_check: false

[!Warning]
XSS チェックの無効化は、推奨しません。 入力欄ごとに、特定のルールを上書きしてください。 ここでの例は、すべてフォームの入力欄でも機能します。

メインの設定を上書きすることで、個別のルールを有効化したり、無効化したりできます。
上書きされていないルールについては、デフォルトの設定が適用されます:

form:
    xss_check:
        enabled_rules:
            on_events: false
            invalid_protocols: false
            moz_binding: false
            html_inline_styles: false
            dangerous_tags: false

さらに良いことに、特定のプロトコルやタグを許容することもできます:

form:
    xss_check:
        safe_protocols:
            - javascript
        safe_tags:
            - iframe

Keep Alive

keep_alive を有効化すると、セッションが切れても、フォームの送信に失敗しません。
これを有効化することにより、セッションが切れる前に AJAX リクエストが行われ、セッションが ‘フレッシュ’ に保たれます:

form:
    keep_alive: true

Fieldsets

<fieldset></fieldset> タグを、フォームの入力欄に設定します。

form:
    name: Example Form
    fields:
        example:
            type: fieldset
            id: my-fieldset
            legend: 'Test Fieldset'
            fields:
                first_field: { type: text, label: 'First Field' }
                second_field: { type: text, label: 'Second Field' }

上記のフォームは、以下のように出力されます:

<form action="/grav/example/forms" class="" id="my-example-form" method="post" name="Example Form">
  <fieldset id="my-fieldset">
    <legend>Test Fieldset</legend>
    <div class="form-group">
      <div class="form-label-wrapper">
        <label class="form-label">First Field</label>
      </div>
      <div class="form-data" data-grav-default="null" data-grav-disabled="true" data-grav-field="text">
        <div class="form-input-wrapper">
          <input class="form-input" name="data[first_field]" type="text" value="">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="form-label-wrapper">
        <label class="form-label">Second Field</label>
      </div>
      <div class="form-data" data-grav-default="null" data-grav-disabled="true" data-grav-field="text">
        <div class="form-input-wrapper">
          <input class="form-input" name="data[second_field]" type="text" value="">
        </div>
      </div>
    </div>
  </fieldset>
</form>

上記の例では、 my-fieldset を id とするフィールドセット内に入力欄が表示されます。
また、 <legend></legend> タグが、 legend: オプションによりサポートされています。