フォーム要素の詳細

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

フォーム コントロールを <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 リクエストが送信されます。

フォームデータにアクセスして処理するにはどうすればよいですか？送信されたデータは、GET リクエストを使用してフロントエンドの JavaScript で処理することも、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 を押します。

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

3 つ目の方法は、<input type="image" alt="Submit" src="submit.png"> を使用してグラフィカルな [送信] ボタンを作成する方法です。ただし、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 リクエストでファイルを送信できません。

理解度を確認する

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

ファイルを送信するために必要な enctype の値

multipart/form-data
🎉
multipart/form-files
もう一度考えてみましょう。
form-data
もう一度考えてみましょう。
form-files
もう一度考えてみましょう。

<form> なしでユーザーデータを送信できますか？

いいえ
もう一度考えてみましょう。
はい（JavaScript を使用）。
🎉
可能（Flash を使用）。
もう一度考えてみましょう。
はい（HTML5 を使用）。
もう一度考えてみましょう。

<form> を送信するにはどうすればよいですか？

<button> をクリックします。
もう一度考えてみましょう。
Enter キーを押します。
もう一度考えてみましょう。
<input type="image"> をクリックします。
もう一度考えてみましょう。
上記すべて。
🎉

リソース