小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


HTML5で強化されたフォーム要素についてサンプルを作って試してみた。

近になり、HTML5についての特集が組まれた記事をよく目にします。2010年の今頃には、W3Cより正式仕様が決定する予定だそうで、そこから少しずつ長い年月をかけて、HTML5への移行が進んでいくのではないかと思います。

HTML5を利用すると、どんなことができるようになるのかだけでも知っておくために、サンプルを作って試してみました。HTML5の目玉は、動画が埋め込めるようになるvideoタグや2Dグラフィックスが描けるようになるcanvasタグと言われていますが、企業で使われるアプリケーションではあまり縁がないと思い、以下の記事を参考に、フォーム部分に関してのみ調べました。

autofocus属性(Opera10、Google Chrome3、Safari4)

autofocus属性を指定すると、ページのオンロード時に特定の要素にフォーカスをあてることができます。
HTML5 Sample Page::autofocus属性

placeholder属性(Google Chrome3、Safari4)

placeholder属性を指定すると、検索窓に、クリックすると消えるガイドプロンプトを表示することができます。
HTML5 Sample Page::placeholder属性

type属性(Opera10)

HTML5で指定することができるtype属性のサンプルです。
HTML5 Sample Page::type属性

required属性(Opera10)

required属性を指定すると、必須入力項目のチェックを行うことができます。
HTML5 Sample Page::required属性

min/max属性(Opera10)

min/max属性を指定すると、最小値・最大値のチェックを行うことができます。
HTML5 Sample Page::min/max属性

step属性(Opera10)

step属性を指定すると、コンボボックスでの増減値の幅を指定することができます。
HTML5 Sample Page::step属性

感想

簡単なサンプルを作ってHTML5の機能を試してみましたが、まだまだブラウザの実装が追い付いていないのが実状みたいです。今のところ最も実装が進んでいそうなのが、Opera10でした。今まではJavaScriptを利用して実現していた機能が、HTMLタグだけで実現できるというのは、作る側からしたらとても良いことなので、早く普及してもらいたいです。