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

<form>タグ

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

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

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

フォームの部品

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

フォームの部品としては、次のようなものが用意されています。

文字列・パスワード入力

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

 

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

例:) <input name="ex1" type="text" placeholder="ヒントを表示" />

数値入力


(初期値は、0~100の1刻みです)

 

数値入力では、以下の属性を指定することで、最小値、最大値、入力間隔の指定が可能です。

min
最小値
max
最大値
step
入力間隔

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

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

テスト用テキストボックス :


データを送信するボタン

画像ボタン(機能は送信ボタン)src属性に画像ファイルを指定します。

フォームの内容をリセットするボタン

 

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

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



 

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

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

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

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

データ送信だけを行う

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