ITエンジニアのプレイングマネージャー化応援サイト

10.用途別のフォーム部品で入力しやすく

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

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

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

用途に合わせた入力部品

セレクトボックス

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

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

<アウトプット>

 
<ソースコード>

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

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

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

 

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

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

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

<アウトプット>
 

 
<ソースコード>

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

 

ラジオボタン

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

<アウトプット>
 

<ソースコード>

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

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

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

<アウトプット>

<ソースコード>

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

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

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

 

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

<アウトプット>

長い長い選択肢1

長い長い選択肢2

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

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

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

<アウトプット>

<ソースコード>

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

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

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

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

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

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

チェックボックス

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

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

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

<アウトプット>

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

 <ソースコード>

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

<アウトプット>

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

<ソースコード>

 

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

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

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

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

 

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

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

 

 

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

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

ZOOMを使った遠隔研修メニュー(PDFが開きます)

ZOOMを使った遠隔研修

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

YouTubeチャンネル

お問い合わせはこちらから

    お名前 (必須)

    メールアドレス (必須)

    題名(件名)

    メッセージ本文

    確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

    新入社員研修ポータル

    PAGETOP
    Copyright © Say Consulting Group, Inc. All Rights Reserved.