はじめに
ほぼすべてのWebアプリケーションにとって、フォームはなくてはならないものになりましたが、HTMLフォームの主要な要素は13年近くも前のものです。HTML 5の最初の大きな目的の1つが、現状の潮流に合わせてこれらの要素を変更することであったのも不思議ではありません。
W3Cが最初にXHTML仕様を策定したとき根底にあった目標の1つは、XMLコンテンツの処理に適したフォームアーキテクチャを作ることでした。そこで2002年にXFormsが開発されました。ところが、HTMLコミュニティの多くの人からは、HTML 4で進化した名前／値のペアやJavaScriptよりもXMLが重視されていて、平均的なWeb開発者には複雑で柔軟性の低い仕様だと受け止められました。
このような反応のなか、Web Hypertext Application Technology Working Group（WHATWG）が新しいHTML仕様を作成し、それが結果的にはW3Cに採用されて次世代HTML 5の草案となりました。この過程でXHTML 2.0の計画はなくなりました。
2009年8月現在のHTML 5の草案には、いくつかの新しいフォーム要素と既存要素の改訂が組み込まれています。これらの変更は、HTML 4.0で使用している基本データモデルを踏襲するもので、各フォームコントロールは独自の内部ステートを持ち、外部リソースに依存しません。ただし、この処理については、過去のバージョンの言語仕様ほど明確には定義されていません。
この記事では、HTML 5の草案に導入されている、主要な新しいフォーム要素と既存要素の変更点を説明します。
output要素
新しいフォーム要素のなかで最も重要なのは、<output>要素でしょう。<input>要素と同様に、<output>要素にも@value属性があり、現在の状態の値が反映されます。ただし、<output>要素で表示されるのは、内部コンテンツではなく値です。@value属性（または要素の対応する.valueプロパティ）が変化すると、そのコンテンツも変化します。
例えば、以下の単純な"Hello, World!"コードでは、あいさつの相手の名前がoutputフィールドになっています。
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Hello!</title>
<script type="text/javascript"><![CDATA[
function updateHello(ctrl){
var helloOutput = document.getElementById('helloName');
helloOutput.value = ctrl.value;
}
]]></script>
</head>
<body>
<div>Hello, <output id="helloName" value="World"/>!</div>
<input type="button" value="John" onclick="updateHello(this)"/>
<input type="button" value="Paul" onclick="updateHello(this)"/>
<input type="button" value="George" onclick="updateHello(this)"/>
<input type="button" value="Ringo" onclick="updateHello(this)"/>
</body>
</html>
outputの利点はすぐには分かりにくいかもしれません。確かに、同じid値と.innerTextプロパティを持つ<span>要素でも、これと同じことはできるでしょう。しかし、<output>要素の利点は、この要素に新しく追加されたプロパティを使うことで発揮されます。
@modeと@defaultValueという2つの属性を使うと、フィールドの初期値を作成できます。@modeを"default"に設定し、@value属性を設定しないでおくと、outputフィールドの@valueは@defaultValueの値と同じになります。どちらも指定しなかった場合には、空文字列（""）になります。@valueが変化すると、@defaultValueも変化します。
一方、@mode属性を"value"に設定した場合、@defaultValueは、@valueの値が変化しても変わらず、.defaultValueプロパティからしかアクセスできなくなります。
フィールドの初期値を作成した結果は、フォームをリセットすると確認できます。各フォームには専用の.reset()メソッドがあり、これが呼び出されると、フォームの各要素はそれぞれの内部リセットルーチンを呼び出します。outputの場合、リセットの結果、@value属性は（それに伴い対象要素の表示も）@defaultValueの値に設定されます。 フォームコントロールは、対象となるフォーム要素内に記述する必要はありません。コントロールの@form=name属性を使えば、指定した名前のフォームと結び付けることができます。このことは、<output>にとって特に有用です。<output>要素は大抵テキストコンテンツに含まれ、リンク先のフォームからは離れていることが多いからです。
以下に例を示します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Hello!</title>
<script type="text/javascript"><![CDATA[
function updateHello(ctrl){
var helloOutput = document.getElementById('helloName');
helloOutput.mode="value";
helloOutput.value = ctrl.value;
}
]]></script>
</head>
<body>
<div>Hello, <output id="helloName" defaultValue="World"
form="selector"
/>!</div>
<form name="selector">
<input type="button" value="John" onclick="updateHello(this)"/>
<input type="button" value="Paul" onclick="updateHello(this)"/>
<input type="button" value="George" onclick="updateHello(this)"/>
<input type="button" value="Ringo" onclick="updateHello(this)"/>
<input type="reset" value="Reset"/>
<form>
</body>
</html>
ここでは、<output>はフォームの外に記述されていますが、@form属性を介してフォームと結び付いています。初期値は"World"です。ユーザーがいずれかのボタンを押すと、まず@mode属性が"value"に設定され、@value属性と@defaultValue属性が分離されます。こうして、@defaultValueには常に初期値（ここでは"World"）が保持されます。
ユーザーがResetボタンを押すと、outputフィールドの@modeは自動的に"default"にリセットされ、@valueの値は@defaultValueの値に設定されます（その結果、また"Hello, World!"に戻ります）。このようにして生成するoutputにHTML要素を組み込めるかどうかは、オリジナルのHTML 5仕様には明記されていません。
HTML 5が普及すれば、<output>要素は広く使われることになるでしょう。この要素を使うことで、JavaScriptのコーディングも（特定の新規ドキュメントでは特に）onforminputなどのフォームベースのイベントも飛躍的に簡素化できます。
