HTMLタグ – よく使うタグ(フォーム)
HTML からサーバーサイドにデータを送信するために必須の、form 要素と input 要素について、よく使うものをまとめます。
<form> タグ
サーバーに対して送信するデータの範囲を <form> タグを使って指定します。<form> タグにはデータの送信先やデータの送信方式も指定します。範囲内の input 要素の内容が送信されます。
データの送信先は、URL で指定します。データの送信方法は、GET (URL の一部として送信)か POST (本文に入れて送信)を指定します。
<form> タグは、あくまで送信するデータの範囲を指定するものです。レイアウト等に直接関係はありません。また、<form> タグ内に表などを入れることが可能です。
フォームの部品
データの入力を受け付ける要素として input 要素や textarea 要素などが用意されています。<form> タグで指定された範囲のデータが送信されます。name 属性でそのデータの名前を指定します。name 属性で指定した名前は、データ送信時のデータの名前として使用されます。また、多くの場合、value 属性で初期値を指定できます。
文字列・パスワード入力
テキスト(1 行) | |
テキスト(複数行) | |
パスワード入力 | |
検索テキスト | |
メールアドレスの入力 (メールの書式を満たしていないと送信できない) | |
URL の入力 (URL の書式を満たしていないと送信できない) |
テキスト入力では、placeholder 属性を指定することで、入力欄に短いヒントを表示させることができます。
例 :)
数値入力
初期値は、0 ~ 100 の 1 刻みです。数値入力では、以下の属性を指定することで、最小値、最大値、入力間隔の指定が可能です。
min | 最小値 |
max | 最大値 |
step | 入力間隔 |
送信ボタン・リセットボタン
フォームのデータを送信、リセットするための特別なボタンです。
<input> タグではなく、<button> タグを使っても同様のことができるようです。
ラジオボタン・チェックボックス
ラジオボックスの場合、グループ化するすべての name 属性を同じにします。一方、チェックボックスの場合は、個々が入力状態を持つため、name 属性をすべて異なるものにします。
value 属性には、選択された場合に送信するデータの内容を記載します(未選択の場合、データは送信されません)。
初期でチェック状態にするには、checked を指定します。
ボックスにラベルを付ける場合は、<label> タグで囲った文字列を書き、for 属性で対象のボックスの id を指定します。
データ送信だけを行う
input 要素の type 属性に hidden を指定すると、ブラウザ上に表示されない input 要素を作成できます。