Webサイト制作におけるフォームについて（その2）
前回の続きで、inputタグのtype属性におけるその他の指定値の場合についてまとめていく。
チェックボックス
- inputタグのtype属性に"checkbox"を指定する。
- チェックボックスは、複数選択肢の中から複数個を選択できるようにする場合に使う。
- value属性にはそのボックスを選んだ際に送信される値を指定する。
- 同じチェックボックスに属するinputタグのname属性には一般的に同じ名前を指定する。
- チェックの初期値を設定するには、checked属性に"checked"を指定する。ただ単に"checked"と書くだけでも処理はされる。
以下、コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのまとめ</title>
<style>
input {
margin-left:5px;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>犬：<input type="checkbox" name="dog" value="1">パグ<input type="checkbox" name="dog" value="2" checked>フレンチブル<input type="checkbox" name="dog" value="3">ブルテリア</p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
ラジオボタン
- inputタグのtype属性に"radio"を指定する。
- ラジオボタンは、複数選択肢の中から１個を選択できるようにする場合に使う。
- value属性にはそのボタンを選んだ際に送信される値を指定する。
- 同じラジオボタンに属するinputタグのname属性には一般的に同じ名前を指定する。
- チェックの初期値を設定するには、checked属性に"checked"を指定する。ただ単に"checked"と書くだけでも処理はされる。
以下、コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのまとめ</title>
<style>
input {
margin-left:5px;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>鳥：<input type="radio" name="dog" value="1" checked>ハシビロコウ
<input type="radio" name="dog" value="2">カワセミ
<input type="radio" name="" value="3">オオハシ</p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
隠しデータの送信
labelタグ
- labelタグは入力欄やチェックボックスなどの項目（選択肢）とlabelタグ内に記述した項目名とを関連付けるために使う。
- labelタグと他のフォーム要素とを関連付けると、labelタグ内に記述した項目名をクリックしてもフォーム要素の選択肢を選択できるようになる。
- labelタグと他のフォーム要素とを関連付けるには、labelタグのfor属性の指定値とinputタグのid属性の指定値を同じ値にする方法と、labelタグ内にinputタグを書いてしまう方法の2通りがある。後者の場合は、labelタグのfor属性とinputタグのid属性の指定は不要。
以下、関連付け例のコード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームのまとめ</title>
<style>
input {
margin-left:5px;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>ゲーム機：<input type="radio" name="game" value="1" id="hw1"><label for="hw1">PS3</label>
<input type="radio" name="game" value="2" id="hw2"><label for="hw2">Xbox360</label>
<input type="radio" name="game" value="3" id="hw3"><label for="hw3">Wii</label></p>
</p>
<p><label>記入欄：<input type="text" name="テキスト" value=""></label></p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
「ゲーム機：」部はただのテキスト、「PS3」「Xbox360」「Wii」部はそれぞれテキストをクリックしても選択できる。
「記入欄：」部はクリックすると入力欄にカーソルが移り、選択（入力可能）状態になる。
textareaタグ
- textareaタグは複数行の入力欄を必要とする場合に使う。
- 他の要素同様に識別用にname属性を指定する。
- cols属性とrows属性とがあり、cols属性で横幅、rows属性で縦幅を指定する。
以下、コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>textareaタグ</title>
<style>
label {
width:70px;
display:block;
float:left;
}
textarea.test1 {
font-size:2em;
}
textarea.test2 {
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>
<label for="greet1">あいさつ</label>
<textarea name="greeting1" cols="20" rows="5" id="greet1">
あいさつを書いて下さい。あいさつを書いて下さい。あいさつを書いて下さい。
</textarea>
</p>
<p>
<label for="greet2">Greeting2</label>
<textarea name="greeting2" cols="20" rows="5" id="greet2">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!!!!!!!!!!!!!!!!!!!!
????????????????????</textarea>
</p>
<p>
<label for="greet3">Greeting3</label>
<textarea name="greeting3" cols="20" rows="5" id="greet3">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
!!!!!!!!!!!!!!!!!!!!
????????????????????
</textarea>
</p>
<p>
<label for="greet4">Greeting4</label>
<textarea name="greeting4" cols="20" rows="3" id="greet4">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST</textarea>
</p>
<p>
<label for="greet5">Greeting5</label>
<textarea name="greeting5" cols="20" rows="3" id="greet5">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST
</textarea>
</p>
<p>
<label for="greet6">Greeting6</label>
<textarea name="greeting6" cols="20" rows="3" id="greet6" class="test1">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST</textarea>
</p>
<p>
<label for="greet7">Greeting7</label>
<textarea name="greeting7" cols="20" rows="3" id="greet7" class="test2">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRST</textarea>
</p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
上記結果から、以下のことが分かった。
- greeting2(4)とgreeting3(5)の比較から、テキストと終了タグの間に改行をいれるか否かで、テキストとして認識される行数が変わる（改行すると1行増えた扱いになるらしい）。
- greeting2(4)とgreeting3(5)の比較から、colsの指定値に従って、入力欄の外枠の横幅は一定となるが、スクロールバーが表示された場合、スクロールバーの幅分だけテキストの表示範囲（入力可能範囲）が狭まる。
- greeting2とgreeting5の結果から、指定した行数（rowsの指定値）を超えると、表示上は隠れる部分がなくてもスクロールバーが表示される。
- greeting4とgreeting6の結果から、文字サイズによってcolsの指定値で表示される入力欄の横幅が変わり、またそこに収まる列数（文字数）が変わる。
- greeting4とgreeting7の結果から、フォントによってcolsの指定値で表示される入力欄の横幅が変わり、またそこに収まる列数（文字数）が変わる。
selectタグとoptionタグ（リスト）
- 入力として、リストから選ばせたい場合に使う。
- ulタグとliタグのようにselectタグとoptionタグはセットで使い、optionタグの内容が選択肢となる。
- size属性で表示する選択（入力）欄の行数を指定する。
以下、コード。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>selectタグとoptionタグ</title>
<style>
select.test1{
width:100px;
}
select.test2{
height:45px;
}
label {
display:block;
float:left;
}
</style>
</head>
<body>
<form action="#" method="post">
<p>お酒：
<select name="alcohol" >
<option value="">好きなお酒を選択してください</option>
<option value="1">ビール</option>
<option value="2">ワイン</option>
<option value="3">日本酒</option>
<option value="4">焼酎</option>
<option value="5">泡盛</option>
</select>
</p>
<p>おつまみ：
<select name="sidedish">
<option value="" >好きなおつまみを選択してください</option>
<option value="1">さきいか</option>
<option value="2" selected>あたりめ</option>
<option value="3">柿ピー</option>
<option value="4">ビーフジャーキー</option>
<option value="5">カルパス</option>
</select>
</p>
<p><label for="ndl">好きな麺類：</label>
<select name="noodle" size="5" id="ndl">
<option value="">好きな麺類を選択してください</option>
<option value="1">ラーメン</option>
<option value="2">うどん</option>
<option value="3">そば</option>
<option value="4" selected>そうめん</option>
</select>
</p>
<p><label for="rc">好きなご飯もの：</label>
<select name="rice" size="5" id="rc">
<option value="" selected>好きなご飯ものを選択してください</option>
<option value="1">鯛めし</option>
<option value="2">鶏めし</option>
<option value="3">赤飯</option>
<option value="4">五目御飯</option>
<option value="5">わかめご飯</option>
<option value="6">たけのこご飯</option>
</select>
</p>
<p><label for="dst1">好きなデザート1：</label>
<select name="dessert1" size="5" class="test1" id="dst1">
<option value="">好きなデザートを選択してください</option>
<option value="1" selected>アイス</option>
<option value="2">プリン</option>
<option value="3">ゼリー</option>
</select>
</p>
<p><label for="dst2">好きなデザート2：</label>
<select name="dessert2" size="5" class="test2" id="dst2">
<option value="">好きなデザートを選択してください</option>
<option value="1" selected>杏仁豆腐</option>
<option value="2">パフェ</option>
<option value="3">ケーキ</option>
</select>
</p>
</form>
</body>
</html>以下、表示結果。
←クリックで拡大表示
上記結果から、以下のことが分かった。
- size属性を指定しないと、プルダウンリストからの選択になる。
- size属性の指定値と同じ行数まではスクロールバーなしで表示される（スクロールバーがなくてもバー幅は表示されている）。
- size属性の指定値より項目数が多いと、スクロールバーが表示される。
- size属性の指定値より項目数が少なくても、指定値分の行数（高さ）が表示される。
- selectedを指定しないと、リストの一番上の項目が初期表示となる。selectedを指定すると、指定した項目が初期表示される。
- 選択欄の幅を指定しないと、一番長い項目が収まる幅で表示される。
- 選択欄の幅や高さの指定が項目の長さや項目数より足りないと見切れる。
