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 タグの例をあげます。
例1:テキストボックス、パスワード
・text:一行テキストボックス
・password:パスワード入力ボックス
<記述例>
<form>
ログインID:<input type="text"><br>
パスワード:<input type="password">
</form>
<表示例>
例2:ラジオボタン
・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属性で番号指定。
<表示例>
例3:チェックボックス
・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属性で種類指定。
<表示例>
例4:送信ボタン、リセットボタン、汎用ボタン
・submit:送信ボタン
・reset:リセットボタン
・button:汎用ボタン
<記述例>
<form>
<input type="submit" value="送信">
<input type="reset" value="リセット">
<input type="button" value="汎用ボタン">
</form>
※value属性でボタン名指定。
<表示例>
例5:画像ボタン
・image:画像ボタン
<記述例>
<form>
<input type="image" src="img/sky1.jpg">
</form>
※src属性で画像ファイルの指定。
<表示例>
送信ボタンやリセットボタンは、
formタグの中の項目について有効になります。
例6: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タグについて
理解できたと思います。
コメント