Webサイト制作におけるフォームについて（その１）
Webサイトのお問い合わせページなどで用いられるフォームについて、PHPとの絡みもあるようなので、復習も兼ねながらまとめておく。
フォームとは、ブラウザを通してユーザーからの入力を受け付ける要素のことであり、ユーザーからの情報収集を目的として使われる。
formタグ
inputタグ
- inputタグには主にtype属性とvalue属性、name属性があり、type属性の指定値によって、ボタンになったり、入力欄になったりする。
- value属性には、ボタンの場合はボタンに表示されるテキストを、入力欄の場合は入力欄に表示される初期値を指定する。
- name属性には、データを識別するための名前を指定する。複数の入力内容を送信する際に必要となる。name属性の指定値は画面には表示されないため、inputタグをpタグの中に入れて、入力欄の項目名（name属性に指定した名前と同じになることが多い）などをpタグ内のinputタグの前に記述する形で使われることが多い。
- inputタグには終了タグは必要ない。
主なtype値による表示結果は以下の通り。
以下、コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのまとめ</title>
<style>
p {
margin-left:5px;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>ボタン：<input type="button" name="btn1">
<input type="button" value="ボタン初期値" name="btn2"></p>
<p>画像：<input type="image" name="img1">
<input type="image" src="blog_images/50_20px.jpg" alt="50×20" value="画像初期値" name="img2"></p>
<p>リセット：<input type="reset" name="rst1">
<input type="reset" value="リセット初期値" name="rst2"></p>
<p>送信：<input type="submit" name="smt1">
<input type="submit" value="送信初期値" name="smt2"></p>
<p>テキスト：<input type="text" name="txt1">
<input type="text" value="テキスト初期値" name="txt2"></p>
<p>パスワード：<input type="password" name="pwd1">
<input type="password" value="パスワード初期値" name="pwd2"></p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
上記結果から、以下のことが分かった。
- typeが"button"のときは、初期値指定がない場合は、ボタン上には何も表示されない。
- typeが"image"のときは、初期値を指定しても画像上に指定した初期値は表示されない。
- typeが"reset"のときは、初期値指定なしでも"リセット"という文字が表示される。
- typeが"submit"のときは、初期値指定なしでも"送信"という文字が表示される。
- typeが"password"のときは、普通に入力した値が、●や*で表示される。
※typeが"password"のとき、表示上は●などになっていても、送信データが暗号化されているということではないらしい。
また、入力欄を作るtype属性が"text"と"password"には、size属性で入力欄の表示サイズ（単位不明、文字数とは完全には一致しない）を、maxlength属性で入力できる最大文字数を指定できる。
なお、maxlength属性で指定した数字は可能な入力文字数を表し、値が"10"の場合は半角だけでも10文字（10個）、全角だけでも10文字（10個）、全半角混ざっていても全部で10文字（10個）までしか入力できない。
以下、コード。
<form action="#" method="post"> <p>半角テキスト：<input type="text" name="txt1" size="30" maxlength="30"></p> <p>全角テキスト：<input type="text" name="txt2" size="30" maxlength="30"></p> <p>全半角テキスト：<input type="text" name="txt3" size="30" maxlength="10"></p> <p>パスワード：<input type="password" name="pwd1" size="30" maxlength="10"></p> </form>
以下、表示結果（各入力欄に最大文字数を入力）。
←クリックで拡大表示
