なぜこの記事を書くのか

入力フォームはSaasを入れたり、ライブラリを入れたり、フルスクラッチで書いたりさまざまな実装方法があります。

今回は、基本的な実装方法について知っていればいつでも応用が効くと思ったので、記事にまとめてみようと思います。

Web入力フォームとは

_{デジタル庁のお問い合わせフォームから引用}

Web入力フォームは、ユーザーからデータを収集するためのUIコンポーネントです。
例えば以下のようなものがあります。

ログインフォーム
会員登録フォーム
お問い合わせフォーム
商品注文フォーム

Web入力フォームについてさらに詳しくおかわり

Web入力フォームは基本的に以下のフローをたどります。

ユーザー画面上の入力欄で入力したデータはクライアント側でJavaScriptの処理を受け、サーバー側でDBに保存されます。そうして最終的にはフィードバック表示として画面に結果が表示されます。
具体例を挙げると、ID登録のための入力フォームの場合は、登録完了表示やエラー表示などです。

このように全体像を覚えておくと、テキストや画像だけの静的コンテンツと違いがわかりやすいと思います。

良い入力フォームとは何か

さまざまな実装方法がありますが、いい入力フォームとはなんなのでしょうか？
諸説あると思いますが、個人的に以下を備えたものだと考えています。

わかりやすさ

明確なラベル表示（シンプルな文言でわかりやすい位置にある）
必須項目の明示（そもそも入力項目は減らした上で）
入力形式の説明（例：半角・英数字を使用してください）

使いやすさ

適切な入力タイプの使用（email, tel, numberなど）
エラー表示のわかりやすさ（色が変わったり、エラーメッセージが出たり）
タブ移動の自然な流れ（キーボード操作ができると尚いい）

アクセシビリティ

スクリーンリーダー対応
キーボード操作の対応
十分なコントラスト比

「エラー表示をリアルタイムにするのか、submit時にするのか」、「エラーテキストの文言はどうするのか」など正直考えるとキリがないほどにたくさんの要素があります。

実際に実装してみる

Vanilla.jsやReactを使用したバージョンも掲載予定なので、後ほど見比べてみてください。

HTML + CSS

最もシンプルな形式の入力フォームです。
送信ボタンを押した時に入力内容に対し、確認が行われます。
リアルタイムではないものの世の中に多く存在する仕様のため自然な感覚で操作できるかと思います。

HTML + CSS + Vanilla.js

リアルタイムチェックを入れた入力フォームです。
このフォームで満足できるユーザーは多いので気がします。
form要素にnovalidateを付与して、Web標準のバリデーション機能や表記を非表示にしているので、そこだけ心配ですが、その分JavaScriptでバリデーションやエラー機能を付与しています。ただ入力項目が多いとJSのコード量も当然増えるので、どうなのだろうか...

まとめ

今回は、Web入力フォームについてまとめてきました。
クライアント側とサーバー側が繋がるUIでもあると思うので少々複雑ですが、理解しておくと役立つ思うので、私自身もしっかり理解を深めていきたいです。

本記事を読んでいただきありがとうございました！