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

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

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

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

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

 

パスワード入力フォーム

<アウトプットイメージ>

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

 

ファイルの送信欄

<アウトプットイメージ>

 
<ソースコード>

 

カレンダー入力

<アウトプットイメージ>

 
<ソースコード>

 

メールアドレスの入力欄

<アウトプットイメージ>

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

 

色の入力欄

<アウトプットイメージ>

<ソースコード>

 

検索テキストの入力欄

<アウトプットイメージ>
 

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

<ソースコード>

 

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

<アウトプットイメージ>
 

<ソースコード>

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

とするよりも、

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

 

入力必須項目

<アウトプットイメージ>

<ソースコード>

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

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

 

入力補完

<アウトプットイメージ>

希望のエリア:

<ソースコード>

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

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

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

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

 

 

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

さらなる学習は広大なインターネットでどうぞ!

 

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