HTMLフォーム

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。

<form> 要素

HTML フォームはユーザー入力を収集するために使用されます。

<form> 要素は HTML フォームを定義します。

例

<form>
 .
form elements
 .
</form>

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

フォーム要素は、チェックボックス、ラジオ ボタン、送信ボタンなど、さまざまなタイプの入力要素を指します。

<input> 要素

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

<input> 要素には、type 属性に応じて多くの形式があります。

これは、この章で使用されるタイプです:

注: 入力タイプについては、このチュートリアルの後半で詳しく学習します。

テキスト入力

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

例

<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"> は、フォーム ハンドラー ボタンへの送信フォームを定義します。

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

フォーム ハンドラーは、フォームの 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 属性は、フォームの送信時に実行するアクションを定義します。

フォームをサーバーに送信する通常の方法は、送信ボタンを使用することです。

通常、フォームは Web サーバー上の Web ページに送信されます。

上記の例では、送信されたフォームを処理するサーバー スクリプトが指定されています。

<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 (デフォルトのメソッド) を使用できます。

フォームの送信が受動的（検索エンジンのクエリなど）であり、機密情報が含まれていない場合。

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 Form 属性

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> 属性のリストを示します:

注: 属性については、次の章で詳しく説明します。