HTML上で使われるフォームとは、
ログインやお問い合わせなどでよく使われる
入力や選択をして送信することができる
機能のことです。
FORMタグとは
form タグは、入力フォームを作成するタグです。
例：<form></form>
フォームでは、各入力部品に値を入力した後、
サブミットボタンを押して送信します。
その転送方法は、method 属性で指定し、
どの様なアクションをするかを、
action 属性で指定します。
form タグで指定できる主な属性
form タグで指定できる主な属性は
・method：送信形式をpostかgetで指定
・enctype：送信時のデータ形式を指定
・accept-charset：文字コードを指定
・accept：MIMEタイプを指定
・name：名前を指定
・target：結果を表示するターゲットを指定
があります。
このform タグを使うことで、アンケートや
お問い合わせなどのメール送信ができます。
ここでの送信先プログラムは「CGI」や
「PHP」などを指します。
INPUTタグとは
input タグは <form></form>を構成する部品を
作成するタグです。
input タグで指定できる主な属性
input タグで指定できる主な属性は、
・name：フォーム部品の名前
・value：値を指定
・size：表示文字数を指定
・maxlength：最大文字数を指定
・checked：初期値をチェック状態に（値は省略）
・disabled：入力、選択の無効化（値は省略）
・readonly：書き換え禁止（値は省略）
があります。
その中のtype属性の値により、
テキストボックスや送信ボタンなどの部品
を作成します。
type属性の値で指定できる主な属性
type属性の値で指定できる主な属性は、
・password：パスワード入力ボックス
・radio：ラジオボタン
・checkbox：チェックボックス
・submit：送信ボタン
・reset：リセットボタン
・button：汎用ボタン
・image：画像ボタン
・file：ファイルを選択する
・hidden：隠しデータ
例：<input type=”button”>
※ input タグは終了タグがありません。
また、type属性の値がimageの時に有効な属性として
・alt：画像の代替テキスト（値はテキスト）
・align：画像を揃える（値はtop[上]、middle[中央]、
bottom[下]、left[左]、right[右]）
があります。
それでは、input タグの例をあげます。
例１：テキストボックス、パスワード
・text：一行テキストボックス
・password：パスワード入力ボックス
＜記述例＞
<form>
ログインID：<input type="text"><br>
パスワード：<input type="password">
</form>＜表示例＞
例２：ラジオボタン
・radio：ラジオボタン
＜記述例＞
<form>
<input type="radio" name="level" value="1">level1
<input type="radio" name="level" value="2">level2
<input type="radio" name="level" value="3">level3
</form>※name属性で level と名前を付け、value属性で番号指定。
＜表示例＞
例３：チェックボックス
・checkbox：チェックボックス
＜記述例＞
<form>
<input type="checkbox" name="obj" value="text">text
<input type="checkbox" name="obj" value="password">password
<input type="checkbox" name="obj" value="radio">radio
</form>※name属性で obj と名前を付け、value属性で種類指定。
＜表示例＞
例４：送信ボタン、リセットボタン、汎用ボタン
・submit：送信ボタン
・reset：リセットボタン
・button：汎用ボタン
＜記述例＞
<form>
<input type="submit" value="送信">
<input type="reset" value="リセット">
<input type="button" value="汎用ボタン">
</form>※value属性でボタン名指定。
＜表示例＞
例５：画像ボタン
・image：画像ボタン
＜記述例＞
<form>
<input type="image" src="img/sky1.jpg">
</form>※src属性で画像ファイルの指定。
＜表示例＞
送信ボタンやリセットボタンは、
formタグの中の項目について有効になります。
例６：form タグでのリセットボタン
form タグのリセットボタンの動作確認の例です。
「ログインID」「パスワード」に何か入力した後
「リセット」を押すと入力内容が消えます。
＜記述例＞
<form action="#" method="post">
ログインID：<input type="text"><br>
パスワード：<input type="password"><br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>＜表示例＞
これで、formタグとinputタグについて
理解できたと思います。
コメント