フォーム関連要素（3）サイトのフォームを多機能にするHTML5の新要素5選：HTML5“とか”アプリ開発入門（8）（1/2 ページ）

HTML5の新しいform関連要素を、出力値やデータのリスト、進捗率の視覚化、公開鍵暗号など用途別にサンプルコードとともに紹介

» 2011年04月05日 00時00分公開

[白石俊平，株式会社オープンウェブ・テクノロジー]

新たに追加された5つのフォーム関連要素

　前回の「HTML5でinput要素に追加された新しいタイプ13連発」までは、HTML5において＜input＞要素に対して加えられた変更を見てきました。今回は、＜input＞要素以外のフォーム（＜form＞）に関連する新要素について見ていきます。今回ご紹介する要素は、以下のとおりです。

出力値を表す＜output＞要素

　＜output＞要素は、プログラムによって生成された出力値を表す要素です。＜output＞要素を用いることで、「この部分は自動的に生成された値である」という意味を明確にできます。

　for属性に、他の入力フォームのIDを指定することで、出力値の元になった入力フォームを明示的に指定できます。for属性には、複数のIDをスペースで区切って指定できます。

　以下の例では、ユーザーに2つの数値を入力させ、その計算結果を自動的に算出します（このサンプルは、Google Chrome 9とOpera 11、Firefox 4で動作します）。

<!DOCTYPE html>
<meta charset="UTF-8">
　
<input type="number" id="num1" placeholder="数値1"> +
<input type="number" id="num2" placeholder="数値2"> =
<!-- for属性を用いて、num1とnum2から生成された値であることを明示 -->
<output for="num1 num2" id="result"></output>
<!-- output要素のvalueプロパティに値を指定すると、出力値を書き換えることができる -->
<button onclick="document.getElementById('result').value =
                 parseInt(document.getElementById('num1').value, 10) +
                 parseInt(document.getElementById('num2').value, 10)">
  計算
</button>

サンプルの実行結果（画像はFirefox 4のもの）（上の画像をクリックすると、Webブラウザで表示します）

＜output＞要素が持つ値を使う際の注意点

　＜output＞要素は、マークアップやJavaScriptで取り扱うのに非常に扱いやすい設計が行われていますが、値の取り扱いには少し注意が必要です。

　ここで「クセ」と申し上げたことは、理解してしまえば非常に単純です。上記のサンプルでも見たとおり、＜output＞要素を用いて出力値をマークアップするには、要素の内部に値を記述します。

<output id="o">出力値</output>

　しかし、JavaScriptを用いて＜output＞要素に値を読み書きするには、2通りのやり方があります。textContentプロパティを用いて要素内のテキストを取得する方法と、valueプロパティを用いる方法です。＜output＞要素においては、valueとtextContentはお互いに同じ値となります。

    var output = document.getElementById("o");
    // 要素内のテキストを変更する
    output.textContent = "出力値";
    // valueプロパティを参照すると、値は「出力値」となっている
    alert(output.value);

　また、最初から＜output＞要素の内部に記述されていたテキストは「デフォルト値」という扱いになります。フォームをリセット（＜input type="reset"＞を使うと、リセットボタンになる）した際、textContentプロパティ（＝valueプロパティ）の値がデフォルト値に戻ります。

　以下の例では、「変更」ボタンをクリックすると、＜output＞要素の内容が変化し、リセットボタンを押すと値が元に戻ります。この例は、Opera 11でのみ正しく動作します（Chrome 9やFirefox 4では、リセットすると、＜output＞要素の内容が空になります）。

<!DOCTYPE html>
<meta charset="UTF-8">
　
<form>
  <output name="out">デフォルト値</output>
  <input type="button" onclick="form.out.value = '変更された値'" value="変更">
  <input type="reset">
</form>

サンプルの実行結果（画像はOpera 11のもの）（上の画像をクリックすると、Webブラウザで表示します）

　また、あまり利用することはないでしょうが、デフォルト値はdefaultValueプロパティでもJavaScriptから参照できます。defaultValueプロパティには、値もセットできます。

事前定義されたデータのリスト＜datalist＞要素

　＜datalist＞要素は不可視の要素で、内部に＜option＞要素を任意数記述することにより、事前定義されたデータのリストを表します。現在の仕様では「＜input＞要素のlist属性に＜datalist＞要素のIDを指定することで、入力値の候補を表示できる」と定義されています。

　以下のサンプルを実行すると、入力フィールドにフォーカスが当たった際、入力値の候補が表示されます（Opera 11とFirefox 4で動作します）。

<!DOCTYPE html>
<meta charset="UTF-8">
　
<!-- datalist要素のIDをlist属性に指定 -->
<input list="suggestions">
　
<!--
  datalist要素を使用。不可視の要素だが、未対応ブラウザでは要素の
  内容が表示されてしまうので、CSSで非表示にしている
-->
<datalist id="suggestions" style="display: none;">
  <option value="banana">バナナ</option>
</datalist>