HTML5の新機能　FORM編

こんにちは、HTML5委員会です。

前回 HTML5の新要素 に引き続き、これから凄まじい進化を迎えるであろう

HTML5の新機能について紹介していきます。


そもそもHTML5が開発された経緯は何か？？を簡単にご説明しましょう。
 

HTMLは、元々文書構造などを記述するために使用されることが目的

でしたが、現在のWebのすさまじい進化により、

もっと複雑な機能が要求されるようになりました。

AJAXなどの動的なサイトなどがそれにあたりますが、

現行のHTMLでは十分その要求に応えることが難しくなってきました。


そのような要求に答えるため、Apple、Mozilla、Operaなどのブラウザベンダーが

もっと優れたWebアプリケーションに応えることが出来る次世代のHTML

を作ろうと立ち上げたのが

WHATWG（Web Hypertext Application Technology Working Group）

という団体です。
 

これが現在のHTML5のベースを作ることになります。


現在はW3CとWHATWGは協力してHTML5の仕様を色々と計画しています。
 

HTML5ではFLASHやFLEX、Sirverlightなどに替わる

RIA(Rich Internet Applications)の要素が多く含まれており、

動画や音楽再生の要素を始め色々な機能が追加されています。


HTML5に対応しているブラウザはまだまだ少ないですが、

今後各ブラウザベンダーはHTML5をサポートするブラウザを

開発することになるでしょう。
 

まだまだ正式な勧告はされていないのですが、

今後もどんどん新機能が追加されるでしょう。
 

少し長くなりましたが、本題に入ります。
 

本日はHTML5で機能追加されたFORM要素についてご紹介させて頂きます。
 

HTML5ではinput要素にのtype属性に沢山の属性値が増えました。
 

今までもJavaScriptを使うことで文字入力をチェックしたり、

select要素の中身を動的に生成したりすることは出来ましたが、

JavaScriptを使わなくても、より優れた入力フォームを作れる

ようになりました。
 

もちろんJavaScriptを使うことでさらに便利に使うことも出来ます。


サンプルコードを作成したので、まずは完成例から見て下さい。


 

これがHTMLとは驚きでしょう？？
 

多少JavaScriptは使っておりますが、

見た目の部分はすべてHTML5で出来ています。

まるでFLEXの入力フォームのようです。


サンプルコードがこちらです。

html5_form.html

注目するのは16行目からのtype属性の属性値！！
 

今までに見たことがない属性値が並んでおります。

それでは解説です。 

• 16行目 type="text" required

  今までと同じテキストですが　required　という属性を付けることにより、
  自動で必須項目にすることが出来ます。
  
  もし未入力で送信ボタンを押すと以下のような画面になります。
  
   

• 17行目　type="date" 18行目　type="datetime"

  こちらはテキストのどこかをクリックすると以下のようなカレンダーが
  表示されて日付を指定すると自動で日付や日時が入力されます。
  
  
   

• 19行目　type="email" 20行目　type="tel"

  見た目は普通のテキストですがそれぞれEMAILや数字が
  入力されていないとrequiredと同じように以下のような画面になります。
  
  
   

• 21行目　type="number"

  こちらはVisualBasicでおなじみのスピンボタンです。
  
  ボタンを押すと自動で数字が入力されます。
  
  上向きボタンを押せば増えて、下向きボタンを押せば数字が減ります。
  
  
   

• 22行目　type="text" autocomplete="on" list="list"

  こちらも只のテキストのように見えますがテキストをクリックすると
  オートコンプリート機能が付いているので、候補が表示されます。
  
  候補はdatalist要素で指定し、id属性で関連付けをします。
  
  
   

• 29行目　 type="range" name="range" min="0" max="10" value ="5" onchange="slider(this.value);" >

  こちらはFLEXのスライダーのような機能になります。
  
  min 、max属性で最小と最大を決めます。
  
  今回はJavaScriptを使って変更した値ををoutoput要素
  (こちらもHTML5の新要素です)で表示しています。
  
  今回は新属製の紹介なので細かいJavaScriptの説明は割愛します。
  
  こちらは動画や音楽再生が出来るvideo要素やaudio要素で
  使われることが多くなるのではないでしょうか？？
  
  (クリックで拡大します)
  
  
   

 以上がサンプルコードの説明になります。
 

今回ご紹介させて頂いたFormの新機能は、まだ一部に過ぎません。
 

残念ながらまだ実装されているブラウザは少なく、

今回のサンプルもOpera10でしか上手く動かすことが出来ませんが、

これからはより多くのブラウザでの実装が期待出来るでしょう。


HTML5委員会では、これからも新機能をご紹介していきますので

皆さん楽しみにしていて下さい。

--------------------------------------------------------------------------------

パソコンスクール KENスクール横浜校　Programインストラクター
http://www.kenschool.jp/school/yokohama/index.html

KENスクールでJavaScriptを学びたい方は、Program講座へ！
http://www.kenschool.jp/Program/index.html