フォームのパーツ
フォームの選択項目において、よく使われるフォームパーツについて学習します。
タイプ属性
それぞれのタイプを識別するため、input type=”属性”を指定します。
<input type="属性" name="属性の名前を入れる" value="">ラジオボタン
type属性の値に radio を指定すると、ラジオボタンを作成できます。ラジオボタンは、丸い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。ボタン形状は、ブラウザによって若干異なります。「 name=””」は、識別するために名前を指定します。例えば、name=”gender”と入れることで、この項目は「性別」であることを表しています。性別は、複数の選択枠がありますので、複数のラジオボタンが存在することになります。それぞれに同じnameを付けることで、同じ性別グループであることが判断できるわけです。ラジオボタンは、選択枠の中から、1つだけしか選択できません。
ラジオボタンには、このvalue属性が必須となり、name属性の値とセットでプログラム側に送られます。
(例)【属性】gender性別 【値】男性・女性
性別
<p>性別
<label><input type="radio" name="gender" value="男性">男性</label>
<label><input type="radio" name="gender" value="女性">女性</label>
</p>チェックボックス
type属性の値に checkbox を指定すると、チェックボックスを作成できます。チェックボックスは、四角い形状になっていてユーザーは、クリック(もしくはタップ)することで選択されます。四角い形状は、ブラウザによって若干異なります。ラジオボタン同様に、value属性とname属性の値がセットでプログラム側に送られます。チェックボックスでは、選択肢の中から、複数選択することができます。
(例)【属性】ご来店のきっかけ 【値】テレビ ・新聞・ホームページ・チラシ
ご来店のきっかけ
<p>ご来店のきっかけ<br>
<label><input type="checkbox" name="trigger" value="TV">テレビ </label>
<label><input type="checkbox" name="trigger" value="news">新聞</label>
<label><input type="checkbox" name="triggert" value="web">ホームページ</label>
<label><input type="checkbox" name="trigger" value="paper">チラシ</label>
</p>セレクトメニュー
select属性は、プルダウン形式の選択メニューです。1つしか選択することは出来ません。<option>タグで指定します。ラジオボタンやチェックボックスと同様、 <select>タグのname属性で付けた名前と、value属性の値がセットになって送信されます。
ご年齢
<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>選択肢の選び方
選択肢を設定する方法は、プルダウン形式の選択肢リストやチェックボックス、ラジオボタンなどがあります。どれを使用するかは、選択肢の内容や数などを踏まえて検討します。たくさんの選択肢がある場合、コンパクトに収まるセレクトメニューがよく用いられます。(例：住所を入力する際の都道府県) 狭い領域のスマートフォンで操作されることを想定し、入力しやすいフォームを目指しましょう。
その他のフォームパーツ
<input>には、様々なタイプが用意されています。用途に合わせて取り入れてみましょう。
パスワード
添付する
色を選ぶ
パスワード<input type="password">
添付する<input type="file">
色を選ぶ<input type="color">