前のモジュールでは、<form>
要素の使用方法について学習しました。
このモジュールでは、フォームの仕組みと、フォームを使用するタイミングについて学習します。
<form>
要素を使用する必要はありますか?
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
の値は何ですか?
form-data
multipart/form-files
form-files
multipart/form-data
<form>
を使用せずにユーザーデータを送信することは可能ですか?
<form>
を送信するには
Enter
キーを押します。<input type="image">
をクリックします。<button>
をクリックします。