前のモジュールでは、<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
にする必要があります。
考えられる解決策の 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
キーを押します。
[送信] ボタンはさまざまな方法で追加できます。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
リクエストでファイルを送信できません。
理解度をチェックする
フォーム要素に関する知識をテストする
ファイルを送信するには、enctype
のどの値が必要ですか?
multipart/form-data
multipart/form-files
form-data
form-files
<form>
なしでユーザーデータを送信することはできますか?
<form>
を送信するにはどうすればよいですか?
<button>
をクリックします。Enter
キーを押します。<input type="image">
をクリックします。