<form>
.
form elements
.
</form>
HTML フォームは、form 要素を含みます。
フォーム要素とは、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどのさまざまな種類の input 要素です。
<input> は、最も重要な form 要素です。
<input> 要素は、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>
Try it Yourself ❯
上記の HTML コードは、ブラウザに次のように表示されます:
First name:注: フォーム自体は目に見えません。 また、テキストフィールドのデフォルト幅が 20 文字あることにも注意してください。
<<input type="radio"> は、ラジオボタンを定義します。
ラジオボタンは、限られた数の選択肢の中から 1 つだけをユーザに選択させます:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Try it Yourself ❯
上記の HTML コードは次のようにブラウザへ表示されます:
Male<input type="submit"> は、フォームハンドラへフォームを 送信するためのボタンを定義します。
サブミットボタンは、フォームデータをサーバへ送信するために使用します。 データは、フォームの action 属性で指定したページに送られます。 action 属性で定義したファイルは、通常、受信した入力で何らかの処理を行います:
フォームハンドラは、通常、入力データを処理するためのスクリプトを持つサーバ・ページです。
フォームハンドラは、フォームの action 属性で指定します：
<form action="action_page.php">
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>
Try it Yourself ❯
上記のHTMLコードは、ブラウザに次のように表示されます:
action 属性 は、フォームを送信したときに実行するアクションを定義します。
通常、ユーザが送信ボタンをクリックすると、フォームデータがサーバ上の Web ページに送信されます。
上記の例では、フォームデータは "action_page.php" というサーバ上のページに送信されます。 このページには、フォームデータを処理するサーバサイド・スクリプトが含まれています：
<form action="action_page.php">
action 属性を省略すると、アクションは現在のページに設定されます。
method 属性は、フォームを送信するときに使用する HTTP メソッド (GET または POST) を指定します：
<form action="action_page.php" method="GET">
または：
<form action="action_page.php" method="POST">
フォームを送信するときのデフォルト・メソッドは GET です。
ただし、GET を使用した場合、送信フォームデータがページ・アドレス・フィールドに表示されます：
action_page.php?firstname=Mickey&lastname=Mouse注： 機密情報を送信する際には GET を使用しないでください！ GET はサイズの制限があるため、少量で、非機密なデータに適しています。
フォームデータに機密情報や個人情報が含まれている場合は、いつも 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>
Try it Yourself ❯
<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>
Try it Yourself ❯
上記のHTMLコードは、ブラウザに次のように表示されます:
フォームからの e-mail 送信
フォームから e-mail を送信する方法。
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
<form> 属性のリストは、次のとおりです：
| 属性 | 説明 |
|---|---|
| accept-charset | 送信するフォームで使用した文字セットを指定 (デフォルト：ページの文字セット)。 |
| action | フォームを送信する場所のアドレス (url) を指定 (デフォルト：送信するページ)。 |
| autocomplete | ブラウザがフォームを自動補完するかを指定 (デフォルト：on)。 |
| enctype | 送信データのエンコーディングを指定 (デフォルト：is url-encoded)。 |
| method | フォームを送信提出する時に使用する HTTP メソッドを指定 (デフォルト：GET)。 |
| name | フォームを識別するために使用する名前を指定 (DOM を使用する場合：document.forms.name)。 |
| novalidate | ブラウザへフォームを検証しないよう指定。 |
| target | action 属性のアドレスのターゲットを指定 (デフォルト：_self). |
次の章で属性の詳細を学習します。