HTMLタグ – よく使うタグ(フォーム)

HTML からサーバーサイドにデータを送信するために必須の、form 要素と input 要素について、よく使うものをまとめます。


<form> タグ

サーバーに対して送信するデータの範囲を <form> タグを使って指定します。<form> タグにはデータの送信先データの送信方式も指定します。範囲内の input 要素の内容が送信されます。

データの送信先は、URL で指定します。データの送信方法は、GET (URL の一部として送信)か POST (本文に入れて送信)を指定します。

<form> タグは、あくまで送信するデータの範囲を指定するものです。レイアウト等に直接関係はありません。また、<form> タグ内に表などを入れることが可能です。

フォームの部品

データの入力を受け付ける要素として input 要素や textarea 要素などが用意されています。<form> タグで指定された範囲のデータが送信されます。name 属性でそのデータの名前を指定します。name 属性で指定した名前は、データ送信時のデータの名前として使用されます。また、多くの場合、value 属性で初期値を指定できます。

文字列・パスワード入力

表1: 文字入力
テキスト(1 行)
テキスト(複数行)
パスワード入力
検索テキスト
メールアドレスの入力
(メールの書式を満たしていないと送信できない)
URL の入力
(URL の書式を満たしていないと送信できない)

テキスト入力では、placeholder 属性を指定することで、入力欄に短いヒントを表示させることができます。

例 :)


数値入力

表2: 数値入力

初期値は、0 ~ 100 の 1 刻みです。数値入力では、以下の属性を指定することで、最小値、最大値、入力間隔の指定が可能です。

表3: 数値入力の設定
min最小値
max最大値
step入力間隔

送信ボタン・リセットボタン

フォームのデータを送信、リセットするための特別なボタンです。

表4: 数値入力

<input> タグではなく、<button> タグを使っても同様のことができるようです。

ラジオボタン・チェックボックス

表5: ラジオボタン・チェックボックス

ラジオボックスの場合、グループ化するすべての name 属性を同じにします。一方、チェックボックスの場合は、個々が入力状態を持つため、name 属性をすべて異なるものにします。

value 属性には、選択された場合に送信するデータの内容を記載します(未選択の場合、データは送信されません)。

初期でチェック状態にするには、checked を指定します。

ボックスにラベルを付ける場合は、<label> タグで囲った文字列を書き、for 属性で対象のボックスの id を指定します。

データ送信だけを行う

input 要素の type 属性に hidden を指定すると、ブラウザ上に表示されない input 要素を作成できます。