ここでは、IT系企業の新人エンジニア研修向けにHTMLを解説しています。

デザイナーになるほど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タグを必ず付けるようにしてください。

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

<label for="r1"><input id="r1" name="q1" type="radio">長い長い選択肢１</label>
<label for="r2"><input id="r2" name="q1" type="radio">長い長い選択肢２</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５から追加されたタグなので一部のブラウザでは表示されないことがあります。

パスワード入力フォーム

入力した文字が「・」になり見えなくなります。

＜アウトプット＞
＜ソースコード＞
<input type="password" name="example">

ファイルの送信欄

＜アウトプット＞
＜ソースコード＞
<input name="example" type="file">

カレンダー入力

＜アウトプット＞

カレンダーから日付を選ぶことも直接入力することもできます。

＜ソースコード＞
<input name="example" type="date">

メールアドレスの入力欄

送信ボタンを押すときにメールアドレスに@が含まれていないと注意メッセージが表示され、送信できなくなります。

＜アウトプット＞

＜ソースコード＞
<input type="email" name="example">

色の入力欄

＜アウトプット＞
＜ソースコード＞
<input name="example" type="color" >

検索テキストの入力欄

何か文字列を入力すると入力欄の右側に「×」が表示されます。「×」を押すと入力した文字列を一度に消去できます。

＜アウトプット＞

＜ソースコード＞
<input type="search" name="example">

プレースホルダで入力補助

＜アウトプット＞
＜ソースコード＞
<input type="text" placeholder="入力してください" name="example" >

ただし、プレースホルダーの文字列をユーザーが入力済みの文字列と間違えることがあります。

とするよりも、

とした方が間違いは少なくなります。

入力必須項目

inputタグにrequired属性を加えることで入力必須項目にできます。入力せずに「送信」ボタンを押すとメッセージを表示します。

＜アウトプット＞
　 　
＜ソースコード＞
<form action="#"> 
    <input type="text" name="namae" required> 
    <button type="submit">送信</button>
</form>

入力補完

入力補完は一行テキストとセレクトボックスを合わせたようなフォーム部品です。選択肢を示しながら、ユーザーに自由な文字列を入力してもらうことも可能です。

入力補完を行うには、以下の３ステップが必要です。

  • inputタグのautocomplete属性を"on"にします
  • inputタグのlist属性とdatalistタグのid属性を同じものにします
  • datalistタグ内のoptionタグのvalue属性に設定された属性値が選択肢になります
＜アウトプット＞
希望のエリア:
＜ソースコード＞
<form action="#"> 
    希望のエリア: <input type="text" name="area" autocomplete="on" list="nagoya"> 
    <datalist id="nagoya"> <option value="栄"> <option value="名駅"> <option value="今池"> </datalist> 
    <button type="submit">送信</button>  
</form>

ちなみに、上記の例で

<form action="#">

の「#」は現在と同じページを再起的に呼び出すときの書き方です。また、送信先のプログラムの名前が決まっていないときにもこのように書くことがあります。記憶にとどめておいてください。

今回は、さまざまなフォーム部品について学びました。

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

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

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

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

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

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

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

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

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

□ その他にもいろいろな便利な入力部品がHTMLには用意されている

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

最後までお読みいただきありがとうございました。

新人エンジニア研修のプログラムを見てみる。

当社は研修講師を募集中です（サブ講師のため未経験者可）。