33.HTML フォームタグについて

<form> 要素

HTML <form> 要素は、ユーザー入力を収集するために使用されるフォームを定義します。

HTMLフォームには form 要素が含まれます。

フォーム要素は、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど、さまざまなタイプの入力要素です。

<input> 要素

<input>要素は、最も重要なフォーム要素です。

<input> 要素は type 属性でいくつかの方法で表示出来ます

ここではいくつかの例を示します。:

テキスト入力

<input type="text"> テキスト入力用の1行の入力フィールドを定義します。

ブラウザで見るとこんな感じ:

First name:

Last name:

ラジオボタン入力

<input type="radio"> ラジオボタンを定義します。

ラジオボタンを使用すると、限られた数の選択肢から1つを選択できます。:

これは、上記のHTMLコードがブラウザに表示される方法です。:

男性
女性
その他

送信ボタン

<input type="submit"> フォームデータをフォームハンドラーに 送信するためのボタンを定義します。

フォームハンドラは通常、入力データを処理するためのスクリプトを備えたサーバーページです。

フォームハンドラーは、フォームのアクション 属性で指定されます。:

これは上記のHTMlコードがブラウザに表示される方法です。:

アクション属性

action 属性はフォームが送信された時に実行されるアクションを定義します。

通常はユーザがクリックするとフォームデータがサーバ上のWebページに送信されます。

上記のHTMLでデータは “アクション用ページ”というサーバ上のページ上に送信されますこのページにはフォームデータを処理するサーバ側スクリプトが含まれています。:

action属性を省略すると、現在のページに設定されます。

ターゲット属性

このtarget 属性は、送信された結果が新しいブラウザータブ、フレーム、または現在のウィンドウで開くかどうかを指定します。

デフォルト値は “_self“です。これは、フォームが現在のウィンドウで送信されることを意味します。

フォームの結果を新しいブラウザタブで開くには、値 “_blank“:を使用します。

その他の有効な値は、_parent“, “_top、またはiframeの名前を表す名前です。

メソッド属性

method 属性は、フォームデータを送信するときに使用されるHTTPメソッド　(GET または
POST) を指定します。:

または:

GETを使用する場合

フォームデータを送信するときのデフォルトの方法はGETです。

ただし、GETを使用すると、送信されたフォームデータが ページアドレスフィールドに表示されます:

GETに関する注意:

• フォームデータを名前/値のペアでURLに追加します
• URLの長さは制限されています（約3000文字）
• GETを使用して機密データを送信しないでください！（URLに表示されます）
• ユーザーが結果をブックマークしたいフォーム送信に便利
• GETは、Googleのクエリ文字列などの安全でないデータに適しています

いつPOSTを使用しますか？

フォームデータに機密情報または個人情報が含まれる場合は、常にPOSTを使用します。POSTメソッドは、送信されたフォームデータをページアドレスフィールドに表示しません。

POSTに関する注意:

• POSTにはサイズの制限はなく、大量のデータを送信するために使用できます。
• POSTによるフォーム送信はブックマーク出来ません

名前属性

各入力フィールドには、送信する name 属性が必要です

name 属性を省略すると、その入力フィールドのデータはまったく送信されません。

この例では “Last name” 入力フィールドのみを送信します:

<fieldset>を使用したフォームデータのグループ化

<fieldset> 要素は、フォームのグループに関連するデータに使用されます。

<legend> 要素は <fieldset>要素のキャプションを定義します。

これは、上記のHTMLコードがブラウザに表示される方法です。:

すべての<form>属性のリスト: