HTML5で追加されたフォームの新機能を試してみた
HTML5から実装されるフォームの要素が多数あり、事前調査とスマートフォンサイトにも使えそうなことから、ちょこちょことメモを残しておきます。
input typeの追加属性
inputタグのtype属性に、要素が幾つか追加されました。追加された項目については、この辺りで網羅されているので、そちらを参照ください。
中でも、number・date・tel・email等はお問い合わせフォームにも良くある項目なので、実装された時には活用したいですね。
また、rangeの様に入力形式が大幅に変わったものもあります。
※対応していないブラウザでは、ただのテキスト入力欄になります。
JavaScriptを利用しないと作れなかったスライドバーでの入力方法は、色々な使い道がありそうです。
placeholder属性
サンプルとして予め表示させておき、フォーカス時に非表示になるテキストを追加できるplaceholder要素が実装されます。
この機能についても、以前まではJavaScriptを利用して実装しており、HTMLだけで完結できるので、単純に工数の削減が見込めそうです。
required・pattern属性
まだOperaのみの対応となりますが、必須入力、正規表現によるパターン制限をHTMLのみでかけることが出来ます。
サーバサイドのプログラムか、即時反映であればJavaScriptが必要だった入力チェックですが、HTMLだけで完結できるのはものすごい便利そうです。
フォームだけでもまだまだ追加された要素は沢山ありますが、とりあえずサクッと調べてみて、気になったものを挙げてみました。
調べながら思ったことは、HTML5が世に出回った時にはフォームの組み方、入力形式が変わっているかもしれないなぁと感じました。