フォームを使用してユーザーからデータを取得する

ここでは、フォーム要素の概要を紹介しながら、ウェブでのフォームの基本的な使い方を説明します。

ウェブサイトのユーザーにお気に入りの動物について質問するとします。 最初のステップとして、データを収集する必要があります。

これを HTML で行うにはどうすればよいでしょうか。

HTML では、フォーム要素（<form>）、<label> を含む <input>、送信 <button> を使用してこれを作成できます。

フォーム要素とは

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

フォーム要素は、開始タグ <form>、開始タグで定義されたオプションの属性、終了タグ </form> で構成されます。

開始タグと終了タグの間に、さまざまなタイプのユーザー入力用に <input> や <textarea> などのフォーム要素を含めることができます。フォーム要素については、次のモジュールで詳しく説明します。

データはどこで処理されますか？

フォームが送信されると（たとえば、ユーザーが [送信] ボタンをクリックしたとき）、ブラウザはリクエストを行います。スクリプトはそのリクエストに応答し、データを処理できます。

デフォルトでは、フォームが表示されているページにリクエストが送信されます。

たとえば、https://web.dev で実行されているスクリプトでフォームデータを処理したいとします。この場合、どのようにすればよいでしょうか。ぜひお試しください。

<form action="https://example.com/animals">
...
</form>

上記の例では、https://example.com/animals にリクエストを行っています。example.com バックエンドのスクリプトは、/animals へのリクエストを処理し、フォームからのデータを処理できます。

データはどのように転送されますか？

デフォルトでは、フォームデータは GET リクエストとして送信され、送信されたデータは URL に追加されます。上記の例でユーザーが「frog」を送信すると、ブラウザは以下の URL にリクエストを行います。

https://example.com/animals?animal=frog

この場合、URL からデータを取得することで、フロントエンドまたはバックエンドのデータにアクセスできます。

必要に応じて、メソッド属性を変更することで、POST リクエストを使用するようにフォームに指示できます。

<form method="post">
...
</form>

POST を使用すると、データはリクエストの本文に含まれます。

データは URL に表示されず、フロントエンドまたはバックエンドのスクリプトからのみアクセスできます。

どの方法を使用すればよいですか。

どちらの方法にもユースケースがあります。

機密データを処理するフォームの場合は、POST メソッドを使用します。 データは暗号化され（HTTPS を使用している場合）、リクエストを処理するバックエンド スクリプトからのみアクセスできます。データは URL に表示されません。一般的な例としては、ログイン フォームがあります。

データが共有可能な場合は、GET メソッドを使用できます。この方法では、データが URL に含まれるのと同時に閲覧履歴に追加されます。 検索フォームでよく使用されます。検索結果ページをブックマークできます。

フォーム要素自体について学習したので、次はフォームをインタラクティブにするためのフォーム フィールドについて学習します。

理解度をチェックする

フォーム要素に関する知識をテストする

リソース

<form> 要素。