フォーム要素の詳細

前のモジュールでは、<form> 要素の使用方法を学習しました。このモジュールでは、フォームの仕組みとフォームを使用するタイミングについて学習します。

<form> 要素を使用すべきかどうか

フォーム コントロールは、必ずしも <form> 要素内に配置する必要はありません。たとえば、ユーザーが商品カテゴリを選択できるように <select> 要素を提供できます。バックエンドでデータの保存や処理は行わないため、ここでは <form> 要素は必要ありません。

ただし、ほとんどの場合、ユーザーのデータを保存または処理する場合は、<form> 要素を使用する必要があります。このモジュールで学習するように、<form> を使用すると、自分で作成しなければならないブラウザの多くの組み込み機能を利用できます。また、<form> には多くのユーザー補助機能がデフォルトで組み込まれています。ユーザーがフォームを送信したときにページを再読み込みしないようにするには、<form> 要素を引き続き使用して、JavaScript で拡張します。

<form> の仕組み

<form> がユーザーデータを処理する最善の方法であることを学びました。では、フォームの仕組みについてご説明します。

<form> はインタラクティブなフォーム コントロールのコンテナです。

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

フォームの送信の仕組み

<form> を送信すると、ブラウザは <form> 属性を確認します。データは、method 属性に応じて、GET リクエストまたは POST リクエストとして送信されます。method 属性が存在しない場合、現在のページの URL に対して GET リクエストが行われます。

フォームのデータにアクセスして処理するにはどうすればよいですか。 送信されたデータは、フロントエンドの JavaScript で GET リクエストを使用するか、バックエンドのコードで GET または POST リクエストを使用して処理できます。詳しくは、リクエストの種類とフォームデータの転送をご覧ください。

フォームが送信されると、ブラウザは action 属性の値である URL にリクエストを行います。さらに、ブラウザは [送信] ボタンに formaction 属性があるかどうかをチェックします。その場合は、そこで定義されている URL が使用されます。

さらに、ブラウザは <form> 要素の追加属性を検索します。たとえば、フォームを検証する必要があるかどうか（novalidate）、オートコンプリートを使用する必要があるかどうか（autocomplete="off"）、使用するエンコードを使用するかどうか（accept-charset）を決定します。

ユーザーが好きな色を送信できるフォームの作成を試みます。 データは POST リクエストとして送信する必要があります。また、データが処理される URL を /color にする必要があります。

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

ユーザーがフォームを送信できるようにする

フォームを送信する方法は 2 つあります。[送信] ボタンをクリックするか、フォーム コントロールの使用中に Enter キーを押します。

[送信] ボタンはさまざまな方法で追加できます。1 つの方法は、フォーム内で <button> 要素を使用することです。type="button" を使用しない限り、[送信] ボタンとして機能します。<input type="submit" value="Submit"> を使用する方法もあります。

3 つ目のオプションは、<input type="image" alt="Submit" src="submit.png"> を使用してグラフィカルな [Submit] ボタンを作成することです。ただし、CSS を使用してグラフィカルなボタンを作成できるようになったため、type="image" の使用はおすすめしません。

ユーザーがファイルを送信できるようにする

<input type="file"> を使用して、ユーザーが必要に応じてファイルをアップロード、送信できるようにします。

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

まず、type="file" を指定した <input> 要素をフォームに追加します。ユーザーが複数のファイルをアップロードする必要がある場合は、multiple 属性を追加します。

ユーザーがファイルをアップロードできるようにするには、フォームに enctype 属性を設定する必要があります。デフォルト値は application/x-www-form-urlencoded です。

<form method="post" enctype="multipart/form-data">
…
</form>

ファイルを送信できるようにするには、multipart/form-data に変更します。このエンコードを行わないと、POST リクエストでファイルを送信できません。

理解度をチェックする

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

リソース

• フォームの HTML 要素
• [送信] ボタンに関するベスト プラクティス