HTMLタグ – よく使うタグ（フォーム）

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

<form>タグ

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

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

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

[topBannar]

フォームの部品

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

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

文字列・パスワード入力

	テキスト（1行） XHTML <input type="text" name="t1" value="テスト" /> 1 2 3   <input type="text" name="t1" value="テスト" />
テスト	テキスト（複数行） XHTML <textarea name="t2">テスト</textare> 1 2 3   <textarea name="t2">テスト</textare>
	パスワード入力 XHTML <input type="password" name="t3" /> 1 2 3   <input type="password" name="t3" />
	検索テキスト XHTML <input type="search" name="t4" value="検索テキスト" /> 1 2 3   <input type="search" name="t4" value="検索テキスト" />
	メールアドレスの入力 （メールの書式を満たしていないと送信できない） XHTML <input name="email" type="email" value="info@sumiretool.net" /> 1 2 3   <input name="email"  type="email" value="info@sumiretool.net" />
	URLの入力 （URLの書式を満たしていないと送信できない） XHTML <input type="url" name="url" value="https://www.sumirelab.com" /> 1 2 3   <input type="url" name="url" value="https://www.sumirelab.com" />

 

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

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

数値入力

	XHTML <input name="n1" type="number" value="100" /> 1 2 3   <input name="n1" type="number" value="100" />
	XHTML <input name="n1" type="range" value="50" /> 1 2 3   <input name="n1" type="range" value="50" />   （初期値は、0～100の1刻みです）

 

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

min

最小値

max

最大値

step

入力間隔

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

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

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

	XHTML <input type="submit" value="送信します" /> 1 2 3   <input type="submit" value="送信します" />   データを送信するボタン
	XHTML <input type="image" src="button.png" alt="送信" /> 1 2 3   <input type="image" src="button.png" alt="送信" />   画像ボタン（機能は送信ボタン）src属性に画像ファイルを指定します。
	XHTML <input type="reset" value="リセットします" /> 1 2 3   <input type="reset"  value="リセットします" />   フォームの内容をリセットするボタン

 

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

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

好き 嫌い

XHTML <input type="radio" name="like" value="好き" id="rb1" checked /> <label for="rb1">好き</label> <input type="radio" name="like" value="嫌い" id="rb2" /> <label for="rb2">嫌い</label> 1 2 3 4 5 6   <input type="radio" name="like" value="好き" id="rb1" checked />   <label for="rb1">好き</label> <input type="radio" name="like" value="嫌い" id="rb2" />   <label for="rb2">嫌い</label>

リンゴ みかん

XHTML <input id="box1" name="cb1" type="checkbox" value="apple" checked/> <label for="box1">リンゴ</label> <input id="box2" name="cb2" type="checkbox" value="orange" /> <label for="box2">みかん</label> 1 2 3 4 5 6   <input id="box1" name="cb1" type="checkbox" value="apple" checked/>   <label for="box1">リンゴ</label> <input id="box2" name="cb2" type="checkbox" value="orange" />   <label for="box2">みかん</label>

 

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

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

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

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

データ送信だけを行う

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

 

 

[bottomBannar]