フォーム要素の詳細

前のモジュールでは、<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"> を使用してグラフィカルな [送信] ボタンを作成することです。ただし、CSS でグラフィカルなボタンを作成できるようになったため、type="image" の使用はおすすめしません。

最後に、タイムアウトを追加しないでください。ユーザーがフォームを送信するのに必要な時間を確保します。タイムアウトが発生すると、データが失われ、ユーザーの不満につながります。W3C フォーム タイムアウト ガイドラインをご覧ください。

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

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

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

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

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

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

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

理解度を確認する

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

リソース

• フォームの HTML 要素
• 送信ボタンのベスト プラクティス