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

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

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

なぜ、HTML5のフォーム部品を学ぶのか、その理由。

前回は、「用途別のフォーム部品でさらに入力しやすく」する方法を学びました。

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

HTML5になってからフォーム部品の数が増えました。

例えば、当社の新人エンジニア研修においても、ユーザーに日付を選んでもらうといった場面があります。

そんなときにカレンダーから入力できるととても便利ですね。

フォームを扱う いろいろな入力部品

ここでは、最後に色々なフォーム部品を紹介してこの連載を終えます。

なお、これらのタグはHTML5から追加されたタグなので一部のブラウザでは表示されないことがあります。

パスワード入力フォーム

<アウトプット>

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

<ソースコード>
<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" >

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

とするよりも、

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

入力必須項目

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

inputタグにrequired属性を加えることで入力必須項目にできます。

入力せずに「送信」ボタンを押すとメッセージを表示します。

入力補完

<アウトプット>
希望のエリア:
<ソースコード>
<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>

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

  • inputタグのautocomplete属性を"on"にします
  • inputタグのlist属性とdatalistタグのid属性を同じものにします
  • datalistタグ内のoptionタグのvalue属性に設定された属性値が選択肢になります

ちなみに、上記の例で

<form action="#">

の「#」は現在と同じページを再起的に呼び出すときの書き方です。

また、送信先のプログラムの名前が決まっていないときにもこのように書くことがあります。

記憶にとどめておいてください。

今回は、HTML5でさらに便利になったフォーム部品について学びました。

「新人エンジニア向けHTML講座」は、これにて一旦最終回とさせていただきます。

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

これからの学びは広大なインターネット空間でどうぞ。

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

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

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

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