Print Friendly, PDF & Email

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

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

前回は、「フォーム部品でユーザーに入力してもらう」方法を学びました。

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

用途に合わせた入力部品

セレクトボックス

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

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

<アウトプット>

<ソースコード>
<select name = "miyage">
    <option value="1">ひつまぶし</option>
    <option value="2">手羽先</option>
    <option value="3">カレーうどん</option>
    <option value="4">味噌煮込みうどん</option>
    <option value="5">きしめん</option>
</select>

※ポイントを明確にするため<form>などは省略しています。(以下同じ)

<select>を使い、中に選択肢の内容を<option>に入れるのが基本構造です。

name属性やvalue属性も設定できます。

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属性で同じ名前を付けると、単一選択にすることができます。

デフォルト値を設定するには、こうします。

<アウトプット>

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

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

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

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

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

<アウトプット>

長い長い選択肢1

長い長い選択肢2

そんな場合に便利なのが<label>です。

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

<label>タグとIDを組み合わせて使うことにより、このラベル部分もクリックできるようになります。

<ソースコード>
<p><label for="1"><input id="1" name="q1" type="radio">長い長い選択肢1</label></p>
<p><label for="2"><input id="2" name="q1" type="radio">長い長い選択肢2</label></p>

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

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

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

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

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

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

チェックボックス

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

<input>のtype属性には"checkbox"を指定します。 

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

<アウトプット>

ういろう うなぎパイ 名古屋嬢

 <ソースコード>
        <p>
            <input type="checkbox" name="miyage" value="1" >ういろう
            <input type="checkbox" name="miyage" value="2">うなぎパイ
            <input type="checkbox" name="miyage" value="3">名古屋嬢
        </p>
        <p>
            <input type="submit" value="送信する">
        </p>

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

<アウトプット>

ういろう うなぎパイ 名古屋嬢

<ソースコード>
        <p>
            <input type="checkbox" name="miyage" value="1" checked = "checked" >ういろう
            <input type="checkbox" name="miyage" value="2">うなぎパイ
            <input type="checkbox" name="miyage" value="3">名古屋嬢
        </p>
        <p>
            <input type="submit" value="送信する">
        </p>

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

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

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

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

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

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

新人エンジニア向けHTML講座の一覧に戻る