ここでは、フォーム要素の概要を紹介しながら、ウェブでのフォームの基本的な使い方を説明します。
ウェブサイトのユーザーにお気に入りの動物について質問するとします。 最初のステップとして、データを収集する必要があります。
これを 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
で実行されているスクリプトでフォームデータを処理したいとします。この場合、どのようにすればよいでしょうか。ぜひお試しください。
action
属性を使用すると、スクリプトの場所を選択できます。
<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>
<form>
要素の終了タグです。<form-container>
<form>
<form-element>
<form>
が処理される場所を定義するために使用できる属性はどれですか。
where
action
action
属性は、<form>
が処理される場所を定義します。href
url
デフォルトのリクエスト メソッドは何ですか。
GET
POST