連載
» 2011年04月05日 00時00分 UPDATE

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

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

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

新たに追加された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ブラウザで表示します) サンプルの実行結果(画像は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ブラウザで表示します) サンプルの実行結果(画像は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>
サンプルの実行結果(画像はFirefox 4のもの) (上の画像をクリックすると、Webブラウザで表示します) サンプルの実行結果(画像はFirefox 4のもの) (上の画像をクリックすると、Webブラウザで表示します)
       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。