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

フォームの概要で、ウェブでのフォームの基本的な使い方を学びます 要素です。

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

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

HTML では、フォーム要素（<form>）を使用してこれを作成できます。 <input> を <label> に設定して、<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 に追加します。 ユーザーが「カエル」と上の例では、ブラウザは次の URL にリクエストを送信します。

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

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

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

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

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

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

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

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

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

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

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

理解度をチェックする

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

リソース

<form> 要素。