Print Friendly, PDF & Email

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

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

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

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

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

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

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

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

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

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

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

パスワード入力フォーム

<アウトプット>

入力した文字が見えなくなっています。

<ソースコード>
<input type="password" name="example">

ファイルの送信欄

<アウトプット>

<ソースコード>
<p><input name="example" type="file"></p>

カレンダー入力

<アウトプット>

<ソースコード>
<p><input name="example" type="date"></p>

メールアドレスの入力欄

<アウトプット>

<ソースコード>
<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 /> 
    <input type="submit" value="送信" name="submit" /> 
</form>

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

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

入力補完

<アウトプット>
希望のエリア:
<ソースコード>
<form action="#"> 
    希望のエリア: <input type="text" name="area" autocomplete="on" list="nagoya"> 
    <datalist id="nagoya"> <option value="栄"> <option value="名駅"> <option value="今池"> </datalist> 
    <input type="submit" value="送信"> 
</form>

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

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

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

ちなみに、上記の例で

<form action="#">

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

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

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

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

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

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

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

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

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

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

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