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

フォーム要素の概要で、ウェブでフォームを使用する基本を学びます。

ウェブサイトのユーザーに好きな動物について質問したいとします。まず、データを収集する方法が必要です。

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 で実行されるスクリプトでフォームデータを処理するとします。どのようにすればよいでしょうか？ CodePen で試してみる

      <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 からデータを取得することで、フロントエンドまたはバックエンドでデータにアクセスできます。

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

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

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

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

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

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

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

データを共有できる場合は、GET メソッドを使用できます。URL に含まれているため、データはブラウザの履歴に追加されます。検索フォームでよく使用されます。検索結果ページをブックマークできます。

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

理解度を確認する

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

リソース

<form> 要素。