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

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

前回は、「用途別のフォーム部品でさらに入力しやすく」する方法を学びました。
 
今回は、HTML5でさらに便利になったフォーム部品について学びましょう。
 

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

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

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

パスワード入力フォーム

<アウトプット>

 入力した文字が見えなくなっています。
<ソースコード>

 

ファイルの送信欄

<アウトプット>

 
<ソースコード>

カレンダー入力

<アウトプット>

 
<ソースコード>

 

メールアドレスの入力欄

<アウトプット>

<ソースコード>
 「@」を入力しないとメッセージが表示されます。

色の入力欄

<アウトプット>

<ソースコード>

検索テキストの入力欄

<アウトプット>
 

入力した文字列を一度に消去できます。

<ソースコード>

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

<アウトプット>
 

<ソースコード>

ただし、ユーザーが入力済みの文字列と間違えることがあります。

とするよりも、

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

 

入力必須項目

<アウトプット>

<ソースコード>

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

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

入力補完

<アウトプット>

希望のエリア:

<ソースコード>

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

1.<input>のautocomplete属性を”on”にします

2.list属性と<datalist>のid属性を同じものにします

3.<datalist>内の<option>のvalue属性に設定された属性値が選択肢になります

 

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

次回は、「メニューを作る」ということでかっこいいメニューを作りましょう。

 

 

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