Form
＊このドキュメントは編集中です
Dictionary
役割と種類
フォームとは、入力や変更などデータ操作のインタラクションを行うUIのパターンです。 Webアプリケーションでは、以下のようなユースケースが挙げられます。
- 登録フォーム
- ログインフォーム
- 決済フォーム
- 検索フォーム
- 予約フォーム
ペパボでは、このWebアプリケーション的な一括送信のフォームを設計する機会が多いため、ガイドラインにおいてもその傾向を反映しています。 iOSやAndroidなどのネイティブアプリはもちろん、今後リアルタイムで双方向の通信を活用したプロダクトを手掛ける場合も見据えて、即時反映的なフォームの設計についても記載していきます。
Layout
フォームラベル・入力フォーム・説明文・エラー文などをセットにしたレイアウトパターンです。
| 要素 | Name | Description | Must |
|---|---|---|---|
| A | Fieldset label | field群を説明するタイトル | |
| B | Fieldset description | fieldset-labelを補足するテキスト | |
| C | Field label | Controlの入力値を簡潔に表現したテキスト | ✓ |
| D | Helper text | 対象のcontrolに関する補足を簡潔に説明するテキスト | |
| E | Field description | 入力すべき値に関する説明 | |
| F | Fieldset | 複数のFieldの集合 | |
| G | Field | LabelとControlを囲む要素 | ✓ |
| H | Control | テキストフィールドやセレクトボックスなど入力を受け付ける要素を内包する要素 | ✓ |
| I | Action | 送信ボタンなどフォーム全体に対してアクションを実行する要素 |
補足
CField label
Controlの入力値を簡潔に表現したテキストです。 Controlに応じて以下のようにマークアップしてください。
- テキストフォームやセレクトボックス
- label要素を利用
- for属性にControl内の要素のid属性の値を指定
- ラジオボタンやチェックボックス
- span要素を利用
DHelper text
対象のControlに関する補足を簡潔に説明するテキストです。 多くの場合は以下の理由から、Helper textを活用しなくてもよくなります。
- 何を入力するフィールドであるかは、ほとんどの場合field-labelで説明できます。まずはfield-labelで入力項目を簡潔に言い表すタイトルを検討してください。
- 入力対象のグループに対しての説明が不足している場合（例：複数のinput項目に対して同じような補足が必要なケースなど）は、fieldset-descriptionで一括して説明することを検討してください。
Helper textの文字量を不用意に増やすと、ユーザーが認識しなければいけない情報量が肥大化し、操作効率やユーザビリティに影響します。 詳細に至るまでを説明しないと入力できないようなフィールドは、設計自体の見直しも検討しましょう。
HControl
入力を受け付ける要素をまとめたグループです。 この要素は末尾に配置します。 ユーザーが入力すべき内容を認知できるように、予めField labelやField description、Helper textで入力についての説明を完了させておく必要があります。 この要素の下に配置された要素は、オートコンプリート機能によって隠されてしまう可能性があることに注意してください。
Controlの種類
IAction
フォーム全体に作用するsubmitボタン（送信・保存・ログイン・変更など）を設置できます。 また、ステップ形式のフォームでは「次へ」や「戻る」ボタンが使用されることがあります。