HTML5 〜　フォームを多機能にする新要素を試してみた

今回試したHTML5の新要素は下記３つである。

出力値を表すouput要素
事前定義されたデータのリストdatalist要素
処理の進捗率を表すprogress要素

さて、出力値を表すouput要素だが、例えば下記のように2つのinputタグの数値を合計してテキスト出力することができる。

!-- 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>

ただ、使い方はわかるのだが、これで何が便利になったのかが分からない。
きっとこれまで何かが不便だったから便利にするために、機能追加に至ったはずだが、分からないので今は考えないようにしておこうと思った。

次に、事前定義されたデータのリストdatalist要素であるが、下記コードを書くと、バナナ、りんご、オレンジをリスト表示できる。
また、input要素のlist属性にdatalist要素のIDを指定することで、入力値の候補を表示できる。
この機能は、入力候補を簡単に表示できるので有難味が分かりやすかった。

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

最後に、処理の進捗率を表すprogress要素。
下記のように書くと、静的なプログレスバーが表示されるだけだ。
value属性の値がプログレスのパーセンテージ。５０なので半分だ。

<progress value="50" max="100">50%</progress>

結局、動的なプログレスバーにするには、当然だがJavaScriptで処理を書かなければならない。
下記は、「HTML5とかアプリ開発入門」からの引用だが、このようにmax属性の値を動的に変更することで、動的なプログレスバーが作成できる。

<script>
  var progress = document.getElementsByTagName("progress")[0];
  var percentage = document.getElementById("percentage");

  // 500〜1000までの値を最大値とする
  progress.max = Math.random() * 500 + 500;
  progress.value = 0;

  // 定期的に繰り返す
  var timer = setInterval(function() {
    // 100までの値をランダムで進捗率にプラスする
    progress.value += Math.random() * 100;

    // positionの値に100をかけるとパーセンテージが分かる
    var percent = Math.floor(progress.position * 100);

    // 進捗率がマックスに達したら繰り返し処理終了
    if (progress.value >= progress.max) {
      percent = 100; // 強制的に100%と表示する
      clearInterval(timer);
    }
    // プログレスバーの横にパーセント表示
    // progress要素の中身も同時に更新する
    percentage.textContent = progress.textContent = percent + "%";
  }, 500);
</script>