フォーム関連
フォームの選択項目において、よく使われるフォームパーツについて学習します。
タイプ属性とは
それぞれのタイプを識別します。
|
1 |
<input type="属性" name="属性の名前を入れる" value="" size="●●"> |
ラジオボタン
type属性の値に radio を指定すると、ラジオボタンを作成できます。ラジオボタンは、丸い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。ボタン形状は、ブラウザによって若干異なります。「 name=" "」は、識別するために名前を指定します。name="gender"と入れることで、この項目は「性別」であることを表しています。
複数のラジオボタンに同じnameを付けることで、同グループであることが判断できるわけです。
ラジオボタンでは、そのグループの中から1つだけ選択することができます。value属性の値とセットで送信されることにより、ユーザーが選択した属性を収集することが可能になります。
name属性（送信される文字列を指定）
name属性の値は、そのラジオボタンが選択されることにより、データとして送信されることになります。ラジオボタンには、このvalue属性が必須となり、name属性の値とセットでプログラム側に送られます。
(例)
【属性】gender性別 【値】男性・女性
|
1 2 3 |
<p>性別 <label><input type="radio" name="gender" value="男性"> 男性</label> <label><input type="radio" name="gender" value="女性"> 女性</label> </p> |
性別
チェックボックス
type属性の値に checkbox を指定すると、チェックボックスを作成できます。チェックボックスは、四角い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。四角い形状は、ブラウザによって若干異なります。ラジオボタン同様に、value属性とname属性の値がセットでプログラム側に送られます。チェックボックスでは、そのグループの中から複数選択することができます。
(例)
【属性】興味のある分野 【値】読書・旅行・グルメ・映画
|
1 2 3 4 5 6 |
<p>興味のある分野 <label><input type="checkbox" name="Interest" value="books">読書</label> <label><input type="checkbox" name="Interest" value="Travel">旅行</label> <label><input type="checkbox" name="Interest" value="food">グルメ</label> <label><input type="checkbox" name="Interest" value="movies">映画</label> </p> |
興味のある分野
セレクトメニュー
selected属性は、プルダウン形式の選択メニューです。1つしか選択することは出来ません。<option>タグで指定します。ラジオボタンやチェックボックスと同様、 <select>タグのname属性で付けた名前と、value属性の値がセットになって送信されます。
|
1 2 3 4 5 6 7 8 |
<p>ご年齢<br> <select name="age"> <option value="">選択してください</option> <option value="10s">10代</option> <option value="20s">20代</option> <option value="30s">30代</option> <option value="40s">40代</option> </select></p> |
ご年齢
その他
その他にも、様々なフォームのパーツがあります。
|
1 2 3 |
<input type="file">ファイルを添付することができます。 <input type="reset">入力内容などをリセットします。 <input type="password">パスワードの入力ボックス |