HTMLフォームの例
<form> 要素
HTML <form> 要素は、ユーザー入力を収集するために使用されるフォームを定義します。
<form>
.
form elements
.
</form>
HTMLフォームには form 要素が含まれます。
フォーム要素は、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど、さまざまなタイプの入力要素です。
<input> 要素
<input>要素は、最も重要なフォーム要素です。
<input> 要素は type 属性でいくつかの方法で表示出来ます
ここではいくつかの例を示します。:
| Type | 説明 |
|---|---|
| <input type=”text”> | 1行のテキスト入力フィールドを定義します |
| <input type=”radio”> | ラジオボタンを定義します（多くの選択肢の1つを選択するため） |
| <input type=”submit”> | 送信ボタンを定義します（フォームの送信用） |
このチュートリアルの後半で、入力タイプについてさらに詳しく学習します。
テキスト入力
<input type="text"> テキスト入力用の1行の入力フィールドを定義します。
例文
<form>
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>
</form>
ブラウザで見るとこんな感じ:
First name:
Last name:
ノート: フォーム自体は表示されません。また、テキストフィールドのデフォルトの幅は20文字です。
ラジオボタン入力
<input type="radio"> ラジオボタンを定義します。
ラジオボタンを使用すると、限られた数の選択肢から1つを選択できます。:
例文
<form>
<input type=”radio” name=”gender” value=”male” checked> 男性<br>
<input type=”radio” name=”gender” value=”female”> 女性<br>
<input type=”radio” name=”gender” value=”other”> その他
</form>
これは、上記のHTMLコードがブラウザに表示される方法です。:
男性
女性
その他
送信ボタン
<input type="submit"> フォームデータをフォームハンドラーに 送信するためのボタンを定義します。
フォームハンドラは通常、入力データを処理するためのスクリプトを備えたサーバーページです。
フォームハンドラーは、フォームのアクション 属性で指定されます。:
例文
<form action=”アクション用のページ”>
First name:<br>
<input type=”text”
name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>
これは上記のHTMlコードがブラウザに表示される方法です。:
アクション属性
action 属性はフォームが送信された時に実行されるアクションを定義します。
通常はユーザがクリックするとフォームデータがサーバ上のWebページに送信されます。
上記のHTMLでデータは “アクション用ページ”というサーバ上のページ上に送信されますこのページにはフォームデータを処理するサーバ側スクリプトが含まれています。:
<form action=”アクション用ページ“>
action属性を省略すると、現在のページに設定されます。
ターゲット属性
このtarget 属性は、送信された結果が新しいブラウザータブ、フレーム、または現在のウィンドウで開くかどうかを指定します。
デフォルト値は “_self“です。これは、フォームが現在のウィンドウで送信されることを意味します。
フォームの結果を新しいブラウザタブで開くには、値 “_blank“:を使用します。
例文
<form action=”/action_page.php” target=”_blank”>
その他の有効な値は、_parent“, “_top、またはiframeの名前を表す名前です。
メソッド属性
method 属性は、フォームデータを送信するときに使用されるHTTPメソッド (GET または
POST) を指定します。:
例文
<form action=”/action_page.php” method=”get”>
または:
例文
<form action=”/action_page.php” method=”post”>
GETを使用する場合
フォームデータを送信するときのデフォルトの方法はGETです。
ただし、GETを使用すると、送信されたフォームデータが ページアドレスフィールドに表示されます:
/action_page.php?firstname=Mickey&lastname=Mouse
GETに関する注意:
- フォームデータを名前/値のペアでURLに追加します
- URLの長さは制限されています（約3000文字）
- GETを使用して機密データを送信しないでください！（URLに表示されます）
- ユーザーが結果をブックマークしたいフォーム送信に便利
- GETは、Googleのクエリ文字列などの安全でないデータに適しています
いつPOSTを使用しますか？
フォームデータに機密情報または個人情報が含まれる場合は、常にPOSTを使用します。POSTメソッドは、送信されたフォームデータをページアドレスフィールドに表示しません。
POSTに関する注意:
- POSTにはサイズの制限はなく、大量のデータを送信するために使用できます。
- POSTによるフォーム送信はブックマーク出来ません
名前属性
各入力フィールドには、送信する name 属性が必要です
name 属性を省略すると、その入力フィールドのデータはまったく送信されません。
この例では “Last name” 入力フィールドのみを送信します:
例文
<form action=”/action_page.php”>
First name:<br>
<input type=”text” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>
<fieldset>を使用したフォームデータのグループ化
<fieldset> 要素は、フォームのグループに関連するデータに使用されます。
<legend> 要素は <fieldset>要素のキャプションを定義します。
例文
<form action=”/action_page.php”>
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type=”text” name=”firstname”value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
これは、上記のHTMLコードがブラウザに表示される方法です。:
すべての<form>属性のリスト: