フォーム要素の詳細

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

<form> 要素を使用する必要はありますか？

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

フォーム コントロールは、必ずしも <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> 属性を確認します。データは GET として送信されます。 method 属性に応じた POST リクエストを指定します。method 属性が存在しない場合、 GET リクエストが現在のページの URL に対して行われます。

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

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

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

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

フォームを表示

このフォームを使用するのも 1 つの方法です。

<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> 要素を使用する方法の 1 つです。 type="button" を使用しない限り、[Submit] ボタンとして機能します。 また、<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 属性を追加します。

ユーザーがファイルをアップロードできるようにするには、もう 1 つ変更が必要です。フォームに 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"> をクリックします。
もう一度考えてみましょう。
上記すべて。
🎉

リソース