albatrosary's blog

UI/UXとエンタープライズシステム

HTML5 で追加された input タグの新しい type 属性

この記事は、HTML5 Advent Calendar 2013 - Adventarの16日目になります。ここでは普段書かないような少し砕けた内容を記載します。

 

HTML5 で追加された input タグの新しい type 属性の種類

私が Web 標準として HTML5 の機能で一番地味で一番好きな機能は input タグです。 HTML5 になり様々な input タグで type属性が追加されました。

type="search" : 検索テキスト
type="tel" : 電話番号
type="url" : URL
type="email" : メールアドレス
type="number" : 数値
type="datetime" : UTC(協定世界時)による日時
type="datetime-local" : UTC(協定世界時)によらないローカル日時
type="month" : 月
type="week" : 週
type="date" : 日付
type="time" : 時間
type="range" : レンジ
type="color" : 色

何がいいのか

なんとか UIとかの導入検討をする必要がない

UI 評価を行うだけで膨大なコストが発生しています。「HTML5標準のものを使用します」ですめば検討するコストが大幅に削減されること間違い無しです。

学習コストが低い

すべてのブラウザアプリケーションがこのUI を使用することで UI を操作する学習期間が無くなる。すなわち、すべてのアプリケーションでカレンダーと言ったら type="date"  で表示されるコンポーネントを使うし、数値と言ったら type="number" で表示されるコンポーネントを利用する。

そもそもこう言うのが好き

元々自分はこう言うのが好きなので・・ただそれだけです。

参考

ちなみにこれらのことは、下記資料に綺麗にまとめられてます。

http://liginc.co.jp/web/html-css/html/42756

 

最後に

これら属性がすべて実装され、すべてのアプリケーションで利用されることを祈ります。