補講：フォーム部品に関するその他の知識。

2022年2月1日 最終更新日時 : 2023年6月30日 山崎講師山崎講師

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

※この章は研修時間の都合により丸ごとスキップすることがあります。

なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由。

今回は、フォーム部品を使ってさらにデータ入力を簡単にする方法を学びましょう。

当社の新人エンジニア研修でも、フォーム部品を選択できる知識が必要です。

例えば、複数選択可能な項目と1つしか選べない項目を作るときに最適な部品を選べるようになりましょう。

用途に合わせた入力部品

セレクトボックス

セレクトボックスは複数の選択肢から一つを選択する時に使われるフォーム部品です。

すべての選択肢は表示しませんので、スペースを取りません。

＜アウトプット＞

＜ソースコード＞
<select>
    <option>ひつまぶし</option>
    <option>手羽先</option>
    <option>カレーうどん</option>
    <option>味噌煮込みうどん</option>
    <option>きしめん</option>
</select>

※name属性やvalue属性も設定できますが、今回は見やすいように省略しています。また、ポイントを明確にするためformタグやbuttonタグは省略しています。（以下同じ）

セレクトボックスを作るにはselectタグを使い、その中に選択肢の内容をoptionタグに入れます。

value 属性が含まれない場合は既定で要素の中に含まれるテキストの値が使用されるのは、前回見たテキストボックスと同じです。

セレクトボックスは何かを選ぶことを強制します。

なにも選ばないという値を取ることができません。

そこで良くとられるのが以下のような対応です。

＜アウトプット＞

＜ソースコード＞
<select>
    <option selected>▼選択してください</option>
    <option>ひつまぶし</option>
    <option>手羽先</option>
    <option>カレーうどん</option>
    <option>味噌煮込みうどん</option>
    <option>きしめん</option>
</select>

このように、デフォルトで選択しておきたい場合は<option selected>とします。

ラジオボタン

ラジオボタンも複数の選択肢から一つを選択する時に使うフォーム部品です。

ただし、セレクトボックスとは異なりすべての選択肢がユーザーに見えています。

どれか一つしかスイッチを押せない昔のカーラジオのイメージです。

＜アウトプット＞

男 女

＜ソースコード＞
<input type="radio" name="gender1" value="male">男
<input type="radio" name="gender1" value="female">女

ラジオボタンを作るにはinputタグのtype属性には"radio"を指定します。

name属性で同じ名前を付けることで単一選択にします。

実験1

name属性で同じ名前を付けないとどうなるか実験してみましょう。

実験結果のメモ：
＜アウトプット＞

男 女

＜ソースコード＞
<input type="radio" name="gender2">男
<input type="radio" name="gender2"　checked="checked">女

また、デフォルト値を設定するにはchecked属性を"checked"にします。

ちなみに、ラジオボタンは一度選ぶと選択肢を外すことができなくなります。

そこは、前のセレクトボックスと同じで、次のチェックボックスと違うところです。

よって、「回答しない」という選択肢を用意したほうが良いこともあります。

なお、以下のように選択肢が長文の場合はピンポイントにボタン部分を選択することが難しくなります。

＜選択しにくいラジオボタン＞

<input name="q1" type="radio">長い長い選択肢１
<input name="q1" type="radio">長い長い選択肢２

そんな場合に便利なのがlabelタグです。

上記「長い長い選択肢１」のような選択肢の文をラベルといいます。

以下のようにlabelタグのfor属性とinputタグのid属性を一致させることより、ラベル部分もクリックできるようになります。

＜選択しやすいラジオボタン＞ 

<label for="r1"><input id="r1" name="q1" type="radio">長い長い選択肢１</label>
<label for="r2"><input id="r2" name="q1" type="radio">長い長い選択肢２</label>

したがってこのlabelタグを必ず付けるようにしてください。

＜ソースコード＞
<label for="r1"><input id="r1" name="q1" type="radio">長い長い選択肢１</label>
<label for="r2"><input id="r2" name="q1" type="radio">長い長い選択肢２</label>

なお、ラジオボタンは、回答者には選択肢の各項目が想像できない場合に使用します。

すべての選択肢を示して、その中からじっくりと選んで欲しい時です。

一方､ラジオボタンの欠点はスペースを取ることです。

スペースを節約したい場合には、前述のセレクトボックスを使います。

セレクトボックスは、選択肢の内容を見なくても想像がつくような設問に使用するのが原則です。

例えば都道府県名などがセレクトボックスの項目として最適です。

チェックボックス

チェックボックスは複数の選択肢から選択する時に使われるフォーム部品です。

チェックボックスを作るにはinputタグのtype属性に"checkbox"を指定します。 

セレクトボックスとは違い、すべての選択肢が表示されます。

＜アウトプット＞

 ＜ソースコード＞
        <p>
            <label for="c1"><input type="checkbox" name="miyage" value="1" id="c1">ういろう</label>
            <label for="c2"><input type="checkbox" name="miyage" value="2" id="c2">うなぎパイ</label>
            <label for="c3"><input type="checkbox" name="miyage" value="3" id="c3">名古屋嬢</label>
        </p>

デフォルト値を設定するにはラジオボタンと同じようにchecked属性に"checked"を指定します。

＜アウトプット＞

＜ソースコード＞
        <p>
            <label for="c1"><input type="checkbox" name="miyage" value="1" id="c1" checked = "checked" >ういろう</label>
            <label for="c2"><input type="checkbox" name="miyage" value="2" id="c2">うなぎパイ</label>
            <label for="c3"><input type="checkbox" name="miyage" value="3" id="c3">名古屋嬢</label>
        </p>

以上がセレクトボックス、ラジオボタン、チェックボックスの概略です。

なお、今回は説明をポイントのみに絞り、シンプルにするためにところどころvalue属性を省いた箇所もありました。

しかし、このvalueの属性値が選択時に送信されるデータになりますので、Webアプリケーションを作成する場合はプログラムで受け取りやすい文字列で指定しましょう。

また、name属性は同じ値にするようにしましょう。

このname属性の書き間違いのためWebアプリケーション側でデータが受け取れないことが良く発生します。

以上、今回は「セレクトボックス、ラジオボタン、チェツクボックス」について学びました。

次回は、「HTML５でさらに便利になったフォーム部品」について学んでいきましょう。

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□セレクトボックスは複数の選択肢から一つを選択する時に使われるフォーム部品である。

□セレクトボックスを作るにはselectタグを使いその中に選択肢の内容をoptionタグに入れる。

□ラジオボタンは排他的な選択肢に使うフォーム部品である。

□ラジオボタンを作るにはinputタグのtype属性に"radio"を指定する。

□labelタグのfor属性とinputタグのid属性を一致させることより、ラベル部分もクリックできるようになる。

□チェックボックスは複数の選択肢から選択する時に使われるフォーム部品である。

□チェックボックスを作るにはinputタグのtype属性に"checkbox"を指定する。 

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
Local by FlywheelのダウンロードからWordPressの準備まで
2022年1月23日
次の記事
更新が楽になるグーテンベルグのスラッシュベスト7
2022年2月10日