HTMLフォーム
- 前のページ XHTML 属性
- 次のページ HTML フォーム属性
HTMLフォームは、異なるタイプのユーザー入力を収集するために使用されます。
<form>要素
HTMLフォームはユーザーの入力を収集するために使用されます。
<form>要素がHTMLフォームを定義します：
例
<form> . form elements . </form>
HTMLフォームにはフォーム要素。
フォーム要素とは、異なるタイプの<input>要素、チェックボックス、ラジオボタン、送信ボタンなどが含まれます。
<input>要素
<input> 要素の中で最も重要なものはフォーム要素。
<input>要素には多くの形式があり、異なる type 属性。
この章で使用されているタイプは以下の通りです：
| タイプ | 説明 |
|---|---|
| text | 一般的なテキスト入力を定義 |
| radio | ラジオボタン入力（複数の選択肢のうちの1つを選択）を定義 |
| submit | 送信ボタン（フォームを送信）を定義 |
注記：このチュートリアルで学ぶことになる、入力タイプに関する知識についても後で詳しく説明します。
テキスト入力
<input type="text"> 以下に定義されています：テキスト入力の単一行入フィールド：
例
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ブラウザではこのように見えます：
注記：フォーム自体は見えません。また、テキストフィールドのデフォルトの幅は20文字です。
ラジオボタン入力
<input type="radio"> 定義ラジオボタン。
ラジオボタンはユーザーが限られた数のオプションから1つを選択できるようにします：
例
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
ラジオボタンはブラウザではこのように見えます：
送信ボタン
<input type="submit"> 以下に向けて定義されています：フォームハンドラ（form-handler）送信フォームのボタン。
フォームハンドラは、入力データを処理するスクリプトを含むサーバーページです。
フォームハンドラはフォームの 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>
ブラウザではこのように見えます：
Action属性
action属性フォームを提出時に実行されるアクションを定義します。
サーバーにフォームを提出する一般的な方法は、送信ボタンを使用することです。
通常、フォームはウェブサーバー上のウェブページに提出されます。
上記の例では、提出されたフォームを処理するサーバースクリプトを指定しています：
<form action="action_page.php">
action 属性を省略すると、action が現在のページに設定されます。
Method 属性
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は少量のデータの送信に最適です。ブラウザは容量制限を設定します。
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 代码はブラウザで見たときのようになります：
HTML フォーム属性
HTML <form> 要素は、すべての可能性の属性が設定されていると次のようになります：
例
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"> ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form>
以下に <form> 属性の一覧を示します：
| 属性 | 説明 |
|---|---|
| accept-charset | 送信されるフォームで使用する文字セットを指定（デフォルト：ページの文字セット）。 |
| action | フォームをどこに送信するかのアドレス（URL）（送信ページ）を指定します。 |
| autocomplete | ブラウザがフォームを自動的に完了するかどうかを指定（デフォルト：有効）。 |
| enctype | 送信されるデータのエンコーディングを指定（デフォルト：url-encoded）。 |
| method | フォームを送信する際に使用するHTTPメソッドを指定（デフォルト：GET）。 |
| name | フォームの名前を識別する（DOMでは：document.forms.name）。 |
| novalidate | ブラウザがフォームを検証しないことを指定します。 |
| target | action属性のaddressターゲットを指定（デフォルト：_self）。 |
注記：以下の章で属性に関する多くの知識を学びます。
- 前のページ XHTML 属性
- 次のページ HTML フォーム属性
