全1416文字
Google Chrome、Microsoft Edge、Firefox、Safariといった今どきのWebブラウザーでは、ユーザーの使いやすさを向上するようなWebの表現を、ブラウザーの違いを気にすることなく実装できる。シンプルなコードでWebの表現力をアップさせる最新機能を紹介する。
Webページの入力フォームで、図1のようなカレンダーを表示するHTMLを紹介します。
図1 ●日付を選択して入力できるカレンダー形式のフォーム
[画像のクリックで拡大表示]
このような入力フォームは、ユーザーに生年月日や商品の購入日などの日付を入力させたいときに使います。ユーザーが「2022/04/01」という文字を手入力するようなUI（ユーザーインタフェース）よりも、カレンダーから日付を選択して入力できるUIの方が、入力フォームの使い勝手は向上します。
このような表現は表1に示した短い構文で実現できます。input要素のtype属性にdateを指定するだけで、カレンダー形式の日付選択UIが表示されます。さらに、value属性に日付を指定すると、図2のように初期値にその日付を設定できます。
表1 ●カレンダー形式の日付選択UIをHTMLのinput要素で作る構文
[画像のクリックで拡大表示]
図2 ●初期値に設定した日付が表示される
[画像のクリックで拡大表示]
このようなカレンダー形式の日付選択UIの作成には、従来は、jQuery UIのライブラリーや複雑なJavaScriptを使っていました。しかし、モダンブラウザーであれば、HTMLを1行書くだけで表現できるのです。
