サーチ…
前書き
入力要素をグループ化してデータを送信するために、HTMLはフォーム要素を使用して入力要素と送信要素をカプセル化します。これらのフォームは、指定されたメソッドのデータをサーバーまたはハンドラーが処理するページに送信する処理を行います。このトピックでは、入力データを収集して送信する際にHTMLフォームを使用する方法について説明します。
構文
<form method="post|get" action="somePage.php" target="_blank|_self|_parent|_top|framename">
パラメーター
| 属性 | 説明 |
|---|---|
accept-charset | フォームの送信に使用される文字エンコードを指定します。 |
action | フォームの送信時にフォームデータを送信する場所を指定します。 |
autocomplete | フォームがオートコンプリートをオンにするかオフにするかを指定します。 |
enctype | フォームデータをサーバーに送信する際にフォームデータをどのようにエンコードするかを指定します（method = "post"の場合のみ）。 |
method | フォームデータ（POSTまたはGET）を送信するときに使用するHTTPメソッドを指定します。 |
name | フォームの名前を指定します。 |
novalidate | 送信時にフォームを検証しないように指定します。 |
target | フォームを送信した後に受信した応答を表示する場所を指定します。 |
備考
<form>要素は、情報をサーバーに送信するフォーム関連要素（ <button> <fieldset> <input> <label> <output> <select> <textarea> ）を含むセクションを表します。開始タグ（ <form> ）と終了タグ（ </form> ）の両方が必要です。
提出する
アクション属性
action属性は、フォームが送信されたときに実行されるアクションを定義します。これは、通常、送信された情報を収集し、それを処理するスクリプトにつながります。空白のままにすると、同じファイルに送信されます
<form action="action.php">
メソッド属性
method属性は、GETまたはPOSTのいずれかのフォームのHTTPメソッドを定義するために使用されます。
<form action="action.php" method="get">
<form action="action.php" method="post">
GETメソッドは、主にIDや名前で投稿を受け取るなど、データを取得するために、または検索クエリを送信するために使用されます。 GETメソッドは、action属性で指定されたURLにフォームデータを追加します。
www.example.com/action.php?firstname=Mickey&lastname=Mouse
POSTメソッドは、データをスクリプトに送信するときに使用されます。 POSTメソッドは、フォームデータをアクションURLに追加するのではなく、要求本体を使用して送信します。
フォームからデータを正しく送信するには、名前属性名を指定する必要があります。
例としてのフィールドの値を送信して姓にその名前を設定してみましょう：
<input type="text" name="lastname" value="Mouse">
その他の属性
<form action="action.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<!-- form elements -->
</form>
フォームタグのターゲット属性
target属性は、フォームを送信した後に受け取る応答を表示する場所を示す名前またはキーワードを指定します。
target属性は、ブラウジングコンテキスト（タブ、ウィンドウ、またはインラインフレームなど）の名前またはキーワードを定義します。
ターゲット属性を持つタグから：
<form target="_blank">
属性値
| 値 | 説明 |
|---|---|
| _ブランク | 応答は新しいウィンドウまたはタブに表示されます |
| _自己 | 応答は同じフレームに表示されます（これがデフォルトです） |
| _親 | 応答は親フレームに表示されます |
| _上 | 応答はウィンドウの全体に表示されます |
| フレーム名 | 応答は指定されたiframeに表示されます |
注意：target属性はHTML 4.01では 非推奨です 。ターゲット属性はHTML5でサポートされています 。
フレームとフレームセットはHTML5ではサポートされていないため、 _parent、_top、framenameの値は主にiframeで使用されます。
ファイルのアップロード
formタグのenctype属性をmultipart/form-data設定することにより、画像やファイルをサーバにアップロード/送信することができmultipart/form-data 。 enctypeは、サーバーに送信する際にフォームデータをどのようにエンコードするかを指定します。
例
<form method="post" enctype="multipart/form-data" action="upload.php">
<input type="file" name="pic" />
<input type="submit" value="Upload" />
</form>
いくつかの入力フィールドをグループ化する
フォームを設計する際には、いくつかの入力フィールドをグループ化してフォームレイアウトの整理に役立てることができます。これは、タグを使用して行うことができます。ここではその使用例を示します。
各フィールドセットについて、LEGEND TEXTタグを使用してセットの凡例を設定することができます
例
<form>
<fieldset>
<legend>1st field set:</legend>
Field one:<br>
<input type="text"><br>
Field two:<br>
<input type="text"><br>
</fieldset><br>
<fieldset>
<legend>2nd field set:</legend>
Field three:<br>
<input type="text"><br>
Field four:<br>
<input type="text"><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>
結果
ブラウザのサポート
Chrome、IE、Edge、FireFox、Safari、Operaの最新バージョンでもタグをサポートしています