【HTML5】HTML5で追加されたformの新要素をいろいろなブラウザで試してみた : アシアルブログ

2010/04/20 │カテゴリ： Tech　 HTML5　 form　 JavaScript　

【HTML5】HTML5で追加されたformの新要素をいろいろなブラウザで試してみた

こんにちは、橋本です。

最近巷ではHTML5が盛り上がりを見せている気がします。

「世界的ですもんね。乗るしかない、このビックウエーブに！」

とはいえ、HTML5のすべてに触れると膨大な量になってしまうので、今日はHTML5の中でも、多くの変更が行われた、form要素について、実際に新しく追加された機能を使っていってみたいと思います。

まずは以下を参考に、どのような修正が加えられたか見てみましょう。

W3C - HTML 5 differences from HTML 4 日本語訳

formに関する変更はこのあたりでしょうか。
以下に列挙してみます。

・inputタグに以下のtype要素が追加。
tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color
・以下の属性が追加
inputのみ
autocomplete
min
max
multiple
pattern
step
list
contenteditable
spellcheck
formaction
formenctype
formmethod
formnovalidate
formtarget
autofocus
対象:input（type 属性が hidden の場合を除く）、select、textarea、button
placeholder
対象:input、textarea
form（属性として指定することで、対象のformを指定することができるようです。）
対象:input, output, select, textarea, button, fieldset
required
対象:input（hidden,image,submit,reset,buttonをのぞく）,textarea
novalidate
対象:form
formaction, formenctype, formmethod, formnovalidate, formtarget 属性
対象:input、button

いろいろと追加されているようですね。

各種項目については、ブラウザ毎に実装が済んでいるものと済んでいないものがあります。
今回は以下のブラウザを使って、実装が済んでいるブラウザを使って結果を見ていきたいと思います。

・Webkit(Safari)(Mac版 Build 57791)
・Chrome(Mac版 ver.5.0.342.9)
*バージョンが間違ってましたので、修正しました。
・10.52 Beta 2(Mac版 Build 8330)
・Minefield(Firefox)(Mac版 3.7a5pre 20100419)

Firefoxについては、そのままではHTML5としてパースしてくれないので、about:configで、html5.enableをtrueに変更します。

また、今回IEは除外します。
理由は聞かずに、生暖かい目で見守っていただけるとありがたいです。

では早速。
まずは、inputタグに追加されたtype要素をリストして、どのように表示されるか確認してみます。

サンプルコードはこちら

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル（inputタグ新規追加type要素）</title>
</head>
<body>
<p>新しく追加されたtype要素</p>
<ul>
<li><input type="tel" name="tel" id="tel"></li>
<li><input type="search" name="search" id="search"></li>
<li><input type="url" name="url" id="url"></li>
<li><input type="email" name="email" id="email"></li>
<li><input type="datetime" name="datetime" id="datetime"></li>
<li><input type="date" name="date" id="date"></li>
<li><input type="week" name="week" id="month"></li>
<li><input type="datetime-local" name="datetime-local" id="time"></li>
<li><input type="range" name="number" id="number"></li>
<li><input type="color" name="color" id="color"></li>
</ul>
</body>
</html>

まずはWebkit。

お次はChrome。

次にOpera。

最後にFirefox。

こう見ると、Operaが一番実装が進んでいる感じがします。
tel要素、color要素については、まだどのブラウザでも実装が行われていないようです。
個人的には、color要素がどのように実装されるのか楽しみです。javascriptやFlashでよく見かける、カラーピッカーみたいな感じになるのでしょうか？？どういった実装になるのか楽しみですね！

search要素に関しては、Chrome、Webkitで見た目に変化が見られます。
range要素については、どのブラウザでもスクロールバーが表示されてますね。
url要素、email要素、datetime要素、date要素、week要素、datetime-local要素はOperaのみ実装が済んでいるようで、カレンダーのようなものが表示されてます。今までjavascriptを使って実装していたカレンダー表示がデフォルトで実装されているというのは、中々嬉しいですね。

次に、追加された各属性について、既に実装が行われているものについて、サンプルコードを書いて見ていきます。

まず、autocomplete属性とlist属性。
対応ブラウザはOperaのみ。
サンプルコードはこちら。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル（autocomplete属性、list属性）</title>
</head>
<body>
<input type="text" id="input_autocomplete" name="input_autocomplete" autocomplete="on" list="hoge">
<datalist id="hoge">
<option value="hoge">
<option value="fuga">
<option value="puyo">
</datalist>
</body>
</html>

実行結果はこんな感じ

autocomplete属性は、onとoffを指定することができます。デフォルトはon。
list要素を指定することで、選択肢が表示されます。
list要素は、datalistタグとoptionタグを使って指定することができます。

次。
inputタグのmin、max要素とtype要素のrange指定を組み合わせて使ってみます。
FireFoxを除く全てのブラウザで実装済みです。

サンプルコードはこちら。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル（inputタグのmin、max要素とtype要素のrange指定）</title>
<script type="text/javascript">
function setUp() {
obj = document.getElementsByClassName('change');
for (var i = 0;i < obj.length; i++) {
obj[i].addEventListener('change', function(){changeColor()}, false);
}
changeColor();
}
function changeColor() {
// range要素から取得
var red = document.frm.red.value;
var green = document.frm.green.value;
var blue = document.frm.blue.value;
// 背景色の変更
document.body.style.backgroundColor = "rgb(" + red + ", " + green + ", " + blue + ")";
// inputに表示
document.frm.color.value = red + ", " + green + ", " + blue;
}
</script>
</head>
<body onload="setUp();">
<p>スクロールバーの値を変更すると、背景色が変わります！</p>
<form name="frm" action="#">
<ul>
<li><label for="red">赤</label><input type="range" name="red" id="red" class = "change" min="0" max="255"></li>
<li><label for="green">緑</label><input type="range" name="green" id="green" class = "change" min="0" max="255"></li>
<li><label for="blue">青</label><input type="range" name="blue" id="blue" class = "change" min="0" max="255"></li>
<li><input type="text" name="color" id="color" value="" readonly="true"></li>
</ul>
</form>
</body>
</html>

Webkitでの実行結果はこちら

スクロールバーを見てまず思いついたのはこれ。ちょろっとjavascriptを書いて、onchangeイベントを拾ってやれば、簡単にカラーピッカーが作成できます。他にも imageのサイズを変更するのに使ったり、色々用途はありそうですね。

次。
autofocus要素、placeholder要素です。
Operaはautofocusのみ、Firefoxはplaceholderのみ、WebkitとChromeは両方対応済です。

サンプルコードはこちら。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル（autofocus要素、placeholder要素）</title>
</head>
<body>
<form method="post">
<ul style="list-style: none">
<li><input type="text" placeholder="例:090-1234-5678"></li>
<li><input type="text" placeholder="フォーカスがここに" autofocus></li>
<li><textarea placeholder="ここにほげほげを入力してくださいね。"></textarea></li>
</ul>
</form>
</body>
</html>

Webkitでの実行結果がこちら

autofocus要素を指定すると、画面が表示された際に、指定した要素にフォーカスがある状態で表示されます。
placefolder要素を指定すると、未入力状態の指定要素に、指定した文字列を入力を表示しておくことが可能になります。入力内容の例を指定する際等に便利なのでは？？

次。
required要素、pattern要素。
Operaで対応済みです。
サンプルコードはこちら。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5サンプル（required要素、pattern要素）</title>
</head>
<body>
<form method="post">
<ul style="list-style: none">
<li><label for="text1">携帯番号</label><input name="text1" type="text" pattern="^0\d{1}0-\d{4}-\d{4}$"></li>
<li><label for="textarea1">ほげと入力</label><textarea name="textarea1" required pattern="ほげほげ"></textarea></li>
</ul>
<input type="submit">
</form>
</body>
</html>

Operaの実行結果はこちら

required要素を指定した要素は、入力必須項目として扱われます。pattern要素は、正規表現でパターンを指定することができます。入力した値が指定したパターンと異なる場合には、エラーが表示されます。
さきほど紹介した、placeholder要素と組み合わせて使うと、すごく便利な予感がします。

いろいろと見てきましたが、今までjavascriptを使って実装していた機能が要素の指定のみで実現出来るという点にいたく感動いたしました。
HTML5についてはまだ草案の段階であり、今後も変更が加えられていくかと思いますが、最終的にどのような仕様になるのか、非常に楽しみですね。

今回紹介出来なかったHTML5の新機能については、また別の機会に試せればと思います。