初心者のためのWEBデザイナーの教科書

フォームの作成Ⅱ

フォーム関連

フォームの選択項目において、よく使われるフォームパーツについて学習します。

タイプ属性とは

それぞれのタイプを識別します。


ラジオボタン

type属性の値に radio を指定すると、ラジオボタンを作成できます。ラジオボタンは、丸い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。ボタン形状は、ブラウザによって若干異なります。「 name=" "」は、識別するために名前を指定します。name="gender"と入れることで、この項目は「性別」であることを表しています。
複数のラジオボタンに同じnameを付けることで、同グループであることが判断できるわけです。
ラジオボタンでは、そのグループの中から1つだけ選択することができます。value属性の値とセットで送信されることにより、ユーザーが選択した属性を収集することが可能になります。
name属性(送信される文字列を指定)
name属性の値は、そのラジオボタンが選択されることにより、データとして送信されることになります。ラジオボタンには、このvalue属性が必須となり、name属性の値とセットでプログラム側に送られます。
(例)
【属性】gender性別 【値】男性・女性

性別
 


チェックボックス

type属性の値に checkbox を指定すると、チェックボックスを作成できます。チェックボックスは、四角い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。四角い形状は、ブラウザによって若干異なります。ラジオボタン同様に、value属性とname属性の値がセットでプログラム側に送られます。チェックボックスでは、そのグループの中から複数選択することができます。
(例)
【属性】興味のある分野 【値】読書・旅行・グルメ・映画

興味のある分野
   


セレクトメニュー

selected属性は、プルダウン形式の選択メニューです。1つしか選択することは出来ません。<option>タグで指定します。ラジオボタンやチェックボックスと同様、 <select>タグのname属性で付けた名前と、value属性の値がセットになって送信されます。

ご年齢


その他

その他にも、様々なフォームのパーツがあります。