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

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

11.いろいろな入力部品

セレクトボックス

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

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

<アウトプットイメージ>

 
<ソースコード>

<select>を使い、中に選択肢の内容を<option>に入れます。

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

<アウトプットイメージ>
 

 
<ソースコード>

手羽先がデフォルトで選択されています。

 

ラジオボタン

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

<アウトプットイメージ>
 

<ソースコード>

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

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

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

<アウトプットイメージ>

<ソースコード>

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

そこが次のチェックボックスとの違いです。

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

 

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

<アウトプットイメージ>

長い長い選択肢1

長い長い選択肢2

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

選択肢の文をラベルといいます。

<label>で囲うことにより、このラベル部分もクリックできるようになります。

<アウトプットイメージ>

<ソースコード>

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

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

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

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

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

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

 

チェックボックス

チェックボックスは複数の選択肢から一つを選択する時に使われるフォーム部品です。
<input>のtype属性には”checkbox”を指定します。 
セレクトボックスとは違い、すべての選択肢が表示されます。
<アウトプットイメージ>

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

 <ソースコード>

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

<アウトプットイメージ>

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

<ソースコード>

 

なお、今回は説明のために省いた箇所もありましたが、

value属性は必ず指定しましょう。

この属性値が選択時に送信されるデータになります。

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

 

 

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

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

 

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