The original version of this document is in English. You may check the list of available translations.

HTML 作成者のための XForms 入門

Version date: 28 October 2003

序文

XForms は Web フォームのための新しいマークアップ言語です。本文書は HTML 作成者のための簡単な XForms 入門であり、既存のフォームを対応する XForms のフォームにどう置き換えればいいかを示しています。本文書は HTML フォームに関する知識を前提としており、従って全くの初心者向けのチュートリアルではありません。いくつか HTML のフォームでは不可能な XForms の新機能 (見出しに * がついているもの) についても言及していますが、 XForms の全ての機能を網羅したチュートリアルではありません。

簡単な検索フォーム
 名前空間接頭辞
フォームコントロール
 簡単なテキスト入力
 テキストエリア
 ラジオボタン
 チェックボックス
 メニュー
 ファイル選択
 パスワード
 ボタン
 画像ボタン
 リセット
 選択肢のグループ化 (optgroup)
コントロールのグループ化
 出力コントロール*
レンジコントロール*
隠しコントロール
送信値
 送信値を明示化する方法
 初期値
 隠し値
 初期値を別の場所から得る方法*
任意の XML 文書の「編集」*
送信
 複数の送信*
送信メソッド
 送信後の処理 (Life after Submit)*
コントロールの制御
 選択不能なコントロール
 読み出し専用のコントロール
 必須のコントロール*
Constraint プロパティ*
Calculate プロパティ*
型*
プロパティの結合*
1文書中の複数のフォーム
 ref の代わりに bind を用いる方法
ここでは触れない機能

* HTML のフォームには存在しない機能

簡単な検索フォーム

以下の簡単な HTML フォームを例に挙げてみましょう:

<html>
<head><title>検索</title></head>
<body>
    <form action="http://example.com/search"
          method="get">
         検索キーワード: <input type="text" name="q">
         <input type="submit" value="検索">
    </form>
</body>
</html>

XForm における主な違いは、集められる値の詳細やそれらをどう送信するかは head 要素内の model と呼ばれる要素内に集められていることです。フォームコントロールだけが body 内に記述されます。従ってこの場合、最低限 head 内に記述すべき内容は以下のようになります。

<model>
   <submission action="http://example.com/search"
               method="get"
               id="s"/>
</model>

(XForms の要素名や属性名は小文字です。)

<form> 要素はもはや不要で、 body 要素内のコントロールは以下のようになります:

<input ref="q"><label>検索キーワード:</label></input>
<submit submission="s"><label>検索</label></submit>

フォームコントロールが <label> 要素を子要素として持ち、 <input> は "name" 属性の代わりに "ref" 属性を用い、独立した submit コントロールが head 内に記述された送信の詳細にリンクされているのがおわかりでしょうか。従って完全な例は以下のようになります:

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
       xmlns="http://www.w3.org/2002/xforms">
<h:head>
    <h:title>検索</h:title>
    <model>
        <submission action="http://example.com/search"
                    method="get" id="s"/>
    </model>
</h:head>
<h:body>
    <h:p>
        <input ref="q"><label>検索キーワード:</label></input>
       <submit submission="s"><label>検索</label></submit>
    </h:p>
</h:body>
</h:html>

名前空間接頭辞

もう一つの明らかな違いは、XHTML の要素に h: という接頭辞 (prefix) がついていることです。これは XForms そのものとは関係なく、異なるマークアップ言語を組み合わせられるように設計された XML 自体のルールに由来するものです。 XForms は XHTML だけでなく、任意の異なる言語と組み合わせられるように設計されています。 XML プロセッサは XForms とは異なる要素群がどの言語に属するかを識別する必要がありますが、 1つの言語を「デフォルト」の言語として指定することもできます。上記の文書では XForms がデフォルトの言語に指定されていますが、冒頭の xmlns 宣言を変更することで XHTML をデフォルトに指定することもできます:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://www.w3.org/2002/xforms">
<head>
    <title>検索</title>
    <f:model>
        <f:submission action="http://example.com/search"
                      method="get" id="s"/>
    </f:model>
</head>
<body>
    <p>
        <f:input ref="q"><f:label>検索キーワード:</f:label></f:input>
       <f:submit submission="s"><f:label>検索</f:label></f:submit>
    </p>
</body>
</html>

どちらの記述にするかはあなた次第です。どちらもデフォルトにせずに、全ての要素に接頭辞をつけることもできます。接頭辞は h: でも x: でも html: でも form: でも、何でも構いません。全てあなた次第です。

将来的には、XHTML2 ではフォームを接頭辞なしに記述できるようになるでしょう。

フォームコントロール

XForms は全ての HTML フォームコントロールに対応するコントロールを提供しますが、そのアプローチには大きな違いがあります。 HTML では主にコントロールがどのように表示されるか を指定し、一方 XForms ではコントロールが何をするか を指定します。従って、HTML の仕様では select 要素でメニューを作成し、 input 要素で radio 型を指定することで選択肢の中から1つを選ぶラジオボタンを作成するのに対し、 XForms では select や select1 といった要素があり、それらはリストから0以上の、あるいは1つだけの選択肢を選択する、というコントロールの意図を指定するだけです。それらがどのようにユーザに提示されるかはデバイスにより、あるいはスタイルシートにより異なります。表示領域の乏しい携帯電話ではどちらもメニューとして表示されるかもしれませんし、広い画面上ではどちらも選択可能なボタンとして表示されるかもしれません。フォーム作成者は望み通りの表示を得るためのヒントを指定したり、スタイルシートを使って正確なスタイル指定を行なうこともできますが、さもなければデバイスあるいは (デフォルトの) スタイルシートが適宜適切な表示方法を選択します。

以下では HTML のフォームコントロールに対応するコントロールをどう記述するかを解説します。

簡単なテキスト入力

名前: <input type="text" name="givenname">

は以下のように置き換えられます:

<input ref="givenname"><label>名前:</label></input>

これがテキスト入力であると指定する必要はありません。特に他に指定がなければ、デフォルトでテキスト入力になります (XForms では string と呼びます)。

任意のコントロールに初期値を設定する方法については、後に解説する「初期値」の項を参照してください。

テキストエリア

メッセージ: <textarea name="message" rows="20" cols="80"></textarea>

は以下のように置き換えられます:

<textarea ref="message"><label>メッセージ:</label></textarea>

テキストエリアの高さや幅といったスタイルは、スタイルシートで指定します。例えば、以下をスタイルシートに記述します。

textarea[ref="message"] { font-family: sans-serif;
                          height: 20em; width: 80em }

この記述は HTML の動作を模倣しますが、別にサンセリフのフォントを指定する必要も、行数や文字数をこのように指定する必要もありません。長さで指定しても構いませんし、パーセントで指定したり、自由に指定して構いません。

textarea[ref="message"] { font-family: serif;
                          height: 2cm; width: 20% }

全てのテキストエリアを同じ大きさにしたいなら、以下のように指定します:

textarea { font-family: sans-serif;
           height: 20em; width: 80em }

文書にスタイルシートを指定する最も簡単な方法は、以下のような記述を文書の最初に追加することです:

<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>

ここで 'style.css' は、あなたのスタイルシート名です。

ラジオボタン

ラジオボタンはいくつかの選択肢の中から1つの値を選択します:

性別:
<input type="radio" name="sex" value="M"> 男性
<input type="radio" name="sex" value="F"> 女性

これは以下のように置き換えられます:

<select1 ref="sex">
   <label>性別:</label>
   <item>
      <label>男性</label><value>M</value>
   </item>
   <item>
      <label>女性</label><value>F</value>
   </item>
</select1>

これはラジオボタンとして表示しても、 (スクロール可能な) 選択領域として表示しても、あるいはメニューとして表示しても構わないことに留意してください。 <select1> に appearance="full" を指定することでこれをラジオボタンとして表示するようにヒントを与えることもできます (appearance="compact" を指定することで選択領域、 appearance="minimal" を指定することでメニューのヒントになります)。

値をあらかじめ選択する方法は「初期値」の項で解説します。

チェックボックス

チェックボックスはリストの中から0以上の選択肢を選択します。

フレーバー:
<input type="checkbox" name="flavors" value="v"> バニラ
<input type="checkbox" name="flavors" value="s"> ストロベリー
<input type="checkbox" name="flavors" value="c"> チョコレート

上記の記述は以下のように置き換えられます:

<select ref="flavors" appearance="full">
   <label>フレーバー:</label>
   <item>
      <label>バニラ</label><value>v</value>
   </item>
   <item>
      <label>ストロベリー</label><value>s</value>
   </item>
   <item>
      <label>チョコレート</label><value>c</value>
   </item>
</select>

チェックされた値をあらかじめ指定する方法は「初期値」の項で説明します。

メニュー

HTML では multiple 属性が指定されているかどうかに応じて、メニューは選択肢の中から1つ、あるいは0以上を選択します。 XForms では、選択肢から1つを選択する場合には <select1> を、 0以上を選択する場合は <select> を用います。

月:
<select multiple name="spring">
      <option value="Mar">3月</option>
      <option value="Apr">4月</option>
      <option value="May">5月</option>
</select>

これは以下のように置き換えられます:

<select ref="spring" appearance="minimal">
<label>月:</label>
<item><label>3月</label><value>Mar</value></item>
<item><label>4月</label><value>Apr</value></item>
<item><label>5月</label><value>May</value></item>
</select>

もし multiple 属性が HTML の select 要素に指定されていない場合は、代わりに select1 を用います。

値をあらかじめ選択する方法は「初期値」の項で解説します。

ファイル選択

<form method="post" enctype="multipart/form-data" ...>
 ...
ファイル: <input type="file" name="attachment">

は以下のように置き換えられます:

<submission method="form-data-post" .../>
...
<upload ref="attachment"><label>ファイル:</label></upload>

パスワード

パスワード: <input type="password" name="pw">

は以下のように置き換えられます:

<secret ref="pw"><label>パスワード:</label></secret>

リセット

10年に渡る HTML フォームの経験によりわかったことは、ほとんど誰もリセットボタンを使っておらず、にもかかわらず極めて多くの Web フォームがリセットボタンを含んでいるということです。問題は、[リセット] と書かれたリセットボタンはしばしば [OK] などと書かれた送信ボタンより大きく、その結果ユーザは意図せずに [OK] をクリックしようとしてリセットボタンをクリックしてしまい、せっかく入力した内容を失ってしまったりすることです。ゆえに、XForms でもリセットボタンを作成することは可能ですが、どうしても必要な場合以外使わないように意図的に作成しづらくしてあります:

<input type="reset">

これは以下のように置き換えられます:

<trigger>
   <label>全てのフィールドをクリア</label>
   <reset ev:event="DOMActivate"/>
</trigger>

ボタン

ボタンにはあらかじめ定義された動作はなく、適切なイベントが発生した場合に実行される動作を関連づけます。

以下のボタンは:

<input type="button" value="表示" onclick="show()">

次のように置き換えられます:

<trigger><label>表示</label>
   <h:script ev:event="DOMActivate" type="text/javascript">show()</h:script>
</trigger>

あるいは以下のようになります:

<trigger ev:event="DOMActivate" ev:handler="#show">
    <label>表示</label>
</trigger>

ここで、"#show" はこの動作を実装した要素 (例えば script 要素) を参照しています:

<script id="show" ...>...

XForm には、ボタンで実行できる数多くの組み込みアクションがあります。例としては、前述のリセットボタンが挙げられます。

なお、event 属性が接頭辞を持つということは、以下の XML 名前空間を冒頭で宣言しなければならないということです:

xmlns:ev="http://www.w3.org/2001/xml-events"

画像ボタン

<input type="image" src="..." ...>

は <label> 要素内に画像を置くことで置き換えられます:

<trigger...><label><h:img src="..." .../></label></trigger>

あるいはスタイルシートで指定することもできます:

<trigger id="activate" ...>

適用されるスタイルシートのルールは以下のようなものです:

trigger#activate {background-image: url(button.png);
                  background-repeat: none}

(<submit> についても同様です。)

選択肢のグループ化 (optgroup)

飲み物:
<select name="drink">
   <option selected value="none">なし</option>
   <optgroup label="ソフトドリンク">
      <option value="h2o">水</option>
      <option value="m">牛乳</option>
      <option value="oj">ジュース</option>
   </optgroup>
   <optgroup label="ワインとビール">
      <option value="rw">赤ワイン</option>
      <option value="ww">白ワイン</option>
      <option value="b">ビール</option>
   </optgroup>
</select>

は以下のように置き換えられます:

<select1 ref="drink">
   <label>飲み物:</label>
   <item><label>なし</label><value>none</value></item>
   <choices>
      <label>ソフトドリンク</label>
      <item><label>水</label><value>h2o</value></item>
      <item><label>牛乳</label><value>m</value></item>
      <item><label>ジュース</label><value>oj</value></item>
   </choices>
   <choices>
      <label>ワインとビール</label>
      <item><label>赤ワイン</label><value>rw</value></item>
      <item><label>白ワイン</label><value>ww</value></item>
      <item><label>ビール</label><value>b</value></item>
   </choices>
</select1>

コントロールのグループ化

<fieldset>
   <legend>個人情報</legend>
   姓: <input name="familyname" type="text">
   名: <input name="givenname" type="text">
   住所: <input name="address" type="text">
</fieldset>

は以下のように置き換えられます:

<group>
   <label>個人情報</label>
   <input ref="familyname"><label>姓:</label></input>
   <input ref="givenname"><label>名:</label></input>
   <input ref="address"><label>住所:</label></input>
</group>

<label> の一貫した使い方に注目してください。

出力コントロール*

XForms には output と range という、 HTML にはない2つのコントロールがあります。

output コントロールを使うと、以下のように値を文書内にテキストとして埋め込むことができます。

あなたの現在の総計は <output ref="sum"/> です。

あるいは以下のようにします:

<output ref="sum"><label>総計</label></output>

これによりユーザは送信前に送信される値を確認することができます。

以下のように値を計算することもできます:

全体積: <output value="height * width * depth"/>

(ここでの height, width および depth は他のコントロールで集められた値とします。)

レンジコントロール*

以下のコントロールは値に対する制約を指定することができます。

<range ref="volume" start="1" end="10" step="0.5"/>

ユーザエージェントはこれをスライダーなどの形で表示するかもしれません。

隠しコントロール

次の章で説明されるように、 XForms では隠しコントロールを使う必要はありません。

送信値

各コントロールの ref と名付けられた属性は、実際にはモデル内の instance 要素の子要素を参照しており、値は送信前に集められます。 instance 要素が存在しない場合には (例えば上記の検索の例)、暗黙に作成されます。

送信値を明示化する方法

システムに送信されるインスタンスを (自動的に) 作成させても全く差し支えありませんが、以下の検索の例のように、それでもやはりインスタンスを含めた方が良い場合もあります:

<model>
    <instance><data xmlns=""><q/></data></instance>
    <submission action="http://example.com/search"
                method="get" id="s"/>
</model>

この例から、送信される唯一のデータ値は "q" であることがすぐにわかります。最も明らかな利点は、このように何が送信されるかがわかるように明示化できるということですが、加えてこの場合システムは ref="q" と指定した場合には q がインスタンス内に実際に存在するかどうかをチェックできます。

ここでは理由は詳述しませんが、これらの要素が XHTML の要素でも XForms の要素でもないことをプロセッサに告げるために、インスタンスデータに xmlns="" を指定することは極めて重要です。

(ここでは <data> という要素を用いていますが、任意の要素を用いて構いません。)

初期値

チェックボックスやメニュー項目の初期状態を設定したりする場合も含めて、コントロールに初期値を設定するには、単にあらかじめ値を入力したインスタンスを設定するだけです。例えば検索の例では:

<instance><data xmlns=""><q>キーワード</q></data></instance>

とすることにより、テキストコントロールにキーワード という初期値が設定されます。

同様に、次のようなチェックボックスの項で挙げた例の場合:

<select ref="flavors" appearance="full">
   <label>フレーバー:</label>
   <item>
      <label>バニラ</label><value>v</value>
   </item>
   <item>
      <label>ストロベリー</label><value>s</value>
   </item>
   <item>
      <label>チョコレート</label><value>c</value>
   </item>
</select>

以下のようにしてバニラとストロベリーのチェックボックスをあらかじめ選択することができます:

<instance><data xmlns=""><flavors>v s</flavors></data></instance>

同様に、次のようなメニューの例の場合::

<select ref="spring" appearance="minimal">
<label>月:</label>
<item><label>3月</label><value>Mar</value></item>
<item><label>4月</label><value>Apr</value></item>
<item><label>5月</label><value>May</value></item>
</select>

以下のようにして 3月 と 4月 をあらかじめ選択することができます:

<instance><data xmlns=""><spring>Mar Apr</spring></data></instance>

optgroup の例の場合は:

<select1 ref="drink">
   <label>飲み物:</label>
   <item><label>なし</label><value>none</value></item>
   <choices>
      <label>ソフトドリンク</label>
      <item><label>水</label><value>h2o</value></item>
      <item><label>牛乳</label><value>m</value></item>
      <item><label>ジュース</label><value>oj</value></item>
   </choices>
   <choices>
      <label>ワインとビール</label>
      <item><label>赤ワイン</label><value>rw</value></item>
      <item><label>白ワイン</label><value>ww</value></item>
      <item><label>ビール</label><value>b</value></item>
   </choices>
</select1>

以下のようにして none という値をあらかじめ選択することができます:

<instance><data xmlns=""><drink>none</drink></data></instance>

隠し値

XForms が隠しコントロールを必要としない訳は、コントロールに関連づけられていないインスタンス中の値は、当然のごとくユーザには見えないからです。従って、もし results という隠し値を検索フォームに追加したければ、インスタンスを以下のように変更します:

<instance><data xmlns=""><q/><results>10</results></data></instance>

初期値を別の場所から得る方法*

初期インスタンスを文書内に指定する必要はなく、以下のように外部リソースから読み込むこともできます:

<instance src="http://example.org/forms/templates/t21.xml"/>

そして t21.xml という文書は例えば以下のようなデータを含みます。

<data><w>640</w><h>480</h><d>8</d></data>

(外部インスタンスには xmlns="" のような記述は必要ありませんが、別にあっても構いません。)

任意の XML 文書の「編集」*

外部のインスタンスを読み込めることは極めて強力です。これは、フォームコントロール上の ref 属性は単に HTML の name 属性のように ID を選択できるだけでなく、実際にはどんな XPath の式でも良いからです。 XPath を用いることにより、XML 文書中のどんな要素や属性でも選択できます。

従って XPath を覚えれば、どんな XML 文書でも (XHTML 文書でさえも) インスタンスとして取り込むことができ、それにコントロールを関連づけ、送信することができるのです。例えば XHTML 文書中の <title> 要素に関連づけるには、以下のようにします:

<input ref="h:html/h:head/h:title">...

(これは XHTML 名前空間中の html 要素内の head 要素内にある title 要素を参照します。) あるいは

<input ref="h:html/h:body/@class">...

とすることで body 要素上の class 属性を参照します。

例えば、ある店の開店時間は (天気に依存する、など) 非常にまちまちであり、 Web ページで開店しているかどうかをチェックできるようにしたい、とします。当該ページには body 中に段落が1つだけあるとします:

<p>当店は本日<strong>閉店</strong>です。</p>

店員にこれを更新するために HTML の書き方を教える代わりに、 XForms を使えば次のようにページを編集する簡単なフォームを作成できます:

<model>
   <instance      src="http://www.example.com/shop/status.xhtml"/>
   <submission action="http://www.example.com/shop/status.xhtml"
               method="put" id="change"/>
</model
...
<select1 ref="/h:html/h:body/h:p/h:strong">
<label>当店は現在:</label>
<item><label>営業中</label><value>open</value></item>
<item><label>閉店</label><value>closed</value></item>
</select1>
<submit submission="change"><label>了解</label></submit>

これが正しく動作するためには、変更される当該ページは正しいXHTML でなければならず (HTML では駄目で、XML 文書である XHTML である必要があります)、サーバが PUT メソッドをサポートしている必要がある (全てのサーバがサポートしている訳ではない) 点に注意してください。

送信

複数の送信*

HTML ではデータを単一のサーバに、単一の方法で送信することしかできません。

XForms ではデータを異なるサーバに、あるいは異なる方法で送信するために、異なる送信コントロールを head 中の異なる送信要素に関連づけたりできます。

例えば、検索の例をユーザが検索文字列を異なる検索エンジンに送信できるようにしてみましょう:

<model>
   <instance><data xmlns=""><q/></data></instance>
   <submission action="http://example.com/search"
               method="get" id="com"/>
   <submission action="http://example.org/search"
               method="get" id="org"/>
</model>

そして body 内で以下のように記述します:

<submit submission="org"><label>example.org を検索</label></submit>
<submit submission="com"><label>example.com を検索</label></submit>

送信メソッド

HTML と同様に、データを送信するには様々な方法があります。 HTML では、どのように送信するかは method と enctype という2つの属性で指定されます。 XForms では method のみで指定されます:

HTML と XForms の対応する送信メソッド
HTML	XForms
method="get"	method="get"
method="post" enctype="application/x-www-form-urlencoded"	method="urlencoded-post"
method="post" enctype="multipart/form-data"	method="form-data-post"

XForms ではいくつかの新しい送信メソッドがあります。最も興味深いのは、結果を XML 文書として送信 (post) する method="post" と、結果を XML 文書としてサーバに保存 (put) する method="put" です。面白い使い方として、以下のようにすると:

<submission action="file:results.xml" method="put"/>

file: スキームを使って、結果をローカルなファイルシステムに保存することができます。

前述のように各フォーム毎に複数の送信を行なうことができるため、大きなフォームでは、[ディスクに保存する] と [送信] の異なるボタンを設定することもできます。

送信後の処理 (Life after Submit)*

値が送信された後のデフォルトの処理は、 HTML と同様にサーバから返された結果で文書全体を置き換えることです。しかし XForms では他の選択肢もあり、 submission 要素の replace 属性で指定します。 replace="instance" を指定するとインスタンスのみを置き換え、 replace="none" を指定するとフォーム文書はそのままで置き換えません。

例えば銀行の住所変更フォームの場合、アカウント番号に基づいて名前と住所を自動的に埋めるボタンと、変更結果を送信するボタンとの2つのボタンを提供することができます:

<model>
    <instance><data xmlns="">
        <accountnumber/><name/><address/>
    </data></instance>
    <submission method="get" action="http://example.com/prefill"
                id="prefill" replace="instance"/>
    <submission method="get" action="http://example.com/change"
                id="change" replace="none"/>
</model>
...
<input ref="accountnumber"><label>アカウント番号</label></input>
<submit submission="prefill"><label>照会</label></submit>
<input ref="name"><label>名前</label></input>
<textarea ref="address"><label>住所</label></textarea>
<submit submission="change"><label>送信</label></submit>

[照会] ボタンはインスタンスをアカウント番号に該当する個人の詳細を含んだ新たなインスタンスで置き換え、ユーザはそれを変更できます。 [送信] ボタンは変更されたインスタンスを送り返しますが、更なる変更を加えたり、照会する新たなアカウント番号を入力できるように、ブラウザ内のフォームはそのまま残します。

コントロールの制御

HTML ではコントロールが選択不能 であったり読み出し専用 だと指定できますが、プロパティを変更する唯一の方法はスクリプトを使うことです。

XForms ではこれらのプロパティを簡単に制御することができますが、以下のように他のプロパティを指定することもできます:

値が必須であること (値はフォームが送信される前に提供されなければならない)
値が何らかの形で制約されていること (例えば誕生年は死亡年より前でなければならない)
値がある型に適合しなければならないこと (例えば整数でなければならない)、あるいは
値が他の値から計算されること (例えば総計は他のいくつかの値の合計であること)

XForms ではこういったプロパティを持つのは集められた値でありコントロールではありませんが、プロパティは値に関連づけられた全てのコントロールに現れることに注意してください。

これらのプロパティは <model> 内にある <bind> 要素を使います。bind を使うには、明示的に <instance> 要素を用いる必要があります。

選択不能なコントロール

コントロールを選択不能にするには、 relevant プロパティを使います。例えば、クレジットカード番号はカード払いを選択したときのみ必要になると指定するには、以下のように記述します:

<model>
   <instance><data xmlns="">
      <amount/><method/><cc/><expires/>
   </data></instance>
   <bind nodeset="cc" relevant="../method='credit'"/>
   <bind nodeset="expires" relevant="../method='credit'"/>
</model>

上記の例では、cc と expires というフィールドは method が credit という値を持つときのみ関連があり、 method の値が他の値であるときは選択不能となります。 bind 内では nodeset 内で参照されている事柄 (それは構造化された要素自体かもしれません) を対象にしているため、ここでは単に method ではなく "../method" と指定する必要があります。これは当該要素に対して「ディレクトリの変更」を行なうのに似ています。単に "method" と指定した場合、 cc あるいは expires の子要素を参照します。 /data/method のように絶対アドレス指定を行なうこともでき、この場合は ../method と同じ効果を持ちます。

選択不能なコントロールをどのようにユーザに提示するかはブラウザに任されています (そしてスタイルシートでどのように表示するかを指定できるようにしても構いません) が、典型的にはそれらは通常の方法でグレイアウト表示されるでしょう。

コントロールは例えば以下のように記述することができます (が、これらを選択不能にすることができるとはどこにも指定されていないことに注意してください: それはこれらが参照する値から継承されます):

<select1 ref="method"><label>支払い方法:</label>
   <item><label>現金</label><value>cash</value></item>
   <item><label>クレジットカード</label><value>credit</value></item>
</select1>
<input ref="cc"><label>カード番号:</label></input>
<input ref="expires"><label>有効期限:</label></input>

もし構造化されたインスタンスならば、以下のように簡略化できます:

<model>
   <instance><data xmlns="">
      <amount/><method/>
      <cc>
        <number/><expires/>
      </cc>
   </data></instance>
   <bind nodeset="cc" relevant="../method='credit'"/>
</model>

次にコントロールは 'cc' の子孫要素を参照します:

<input ref="cc/number"><label>カード番号:</label></input>
<input ref="cc/expires"><label>有効期限:</label></input>

もっとも、ref の文脈をリセットするためにグルーピングすることもできます:

<group ref="cc">
   <input ref="number"><label>カード番号:</label></input>
   <input ref="expires"><label>有効期限:</label></input>
</group>

読み出し専用のコントロール

relevant と同様に、値が読み出し専用となる条件を指定することができます。例えば:

<model>
   <instance><data xmlns="">
      <variant>basic</variant><color>黒</color>
   </data></instance>
   <bind nodeset="color" readonly="../variant='basic'"/>
</model>

この例は、color の初期値は 黒 であり、 variant の値が basic の場合は変更できないことを示しています。

必須のコントロール*

XForms の有益な新機能の1つは、フォームが送信される前にある値が提供されねばならないと指定できることです。最も簡単な例は、値が常に必須であると指定することです。例えば検索の例では以下のようにします:

<model>
   <instance><data xmlns=""><q/></data></instance>
   <bind nodeset="q" required="true()"/>
   <submission .../>
</model>

しかし readonly や relevant 属性の例のように、任意の XPath の式を指定して、値が条件付きで必須であると指定することもできます:

<bind nodeset="state" required="../country='USA'"/>

上記の例では、state の値は country の値が "USA" である場合に必須となります。

値が必須であるとどのようにユーザに知らせるかはブラウザに任されていますが、スタイルシートで指定することもできるでしょう。

Constraint プロパティ*

このプロパティを用いることにより、値に更なる制約を付加することができます。例えば、以下の記述は:

<bind nodeset="year" constraint=". &gt; 1970"/>

年が1970年より後となるよう制約します。 "." という XPath の指定は「この値」を意味します。 (">" は XML のルールにより > と書かねばなりませんが、すでにおなじみのことでしょう)。

Calculate プロパティ*

インスタンス中のある値は他の値から計算される、と指定することができます。例えば:

<bind ref="volume" calculate="../height * ../width * ../depth"/>

値がこのように計算される場合、自動的に readonly となります。

計算、文字列操作、日付の処理、'if' を用いた条件分岐など、様々な機能が提供されています。

型*

更なる有益な新機能は、値に型を指定できることです。ブラウザは値が要求される型に適合するかをチェックすることができます。

例えば、検索の例で実際には数値だけを求めている (例えばバグデータベースでバグ番号を検索したい場合) のなら、以下のような記述を追加するだけです:

<bind nodeset="q" type="xsd:integer"/>

この記述により、値が整数でない限り送信しないようにできます。

(この場合ルート要素に xmlns:xsd="http://www.w3.org/2001/XMLSchema" を追加する必要があります。)

もし誰かのホームページの URL を集めたいのなら、以下のように指定します:

<bind nodeset="homepage" type="xsd:anyURI"/>

いくつかのユーザエージェントは、値のデータ型がわかっている場合には特別な処理をすることに気付くかもしれません。例えば、値が日付であるとわかっている場合には、日付を文字列として入力しなくても、カレンダーを表示して選択できるようにしたりします。

XForms では、以下のように多くの有益な組み込みの型が用意されています:

xsd:string, xsd:normalizedString (空白文字列がスペース文字に置き換えられた文字列).
xsd:integer, xsd:nonPositiveInteger, xsd:negativeInteger, xsd:nonNegativeInteger, xsd:positiveInteger
xsd:boolean
xsd:decimal, xsd:double
xsd:date, xsd:time, xsd:dateTime
xsd:anyURI (単一の URI)
xforms:listItems (select で用いる、スペースで区切られた文字列のリスト)
xforms:listItem (スペースを含まない文字列)

(訳註: 詳細は仕様書の 5 Datatypes 参照。)

プロパティの結合

もし同一の値を参照するいくつかの bind があるのなら、それらを結合することができます:

<bind nodeset="q" type="xsd:integer" required="true()"/>

1文書中の複数のフォーム

1文書中で複数のフォームを用いるには各フォーム毎に1つのモデルが必要ですが、その場合各コントロールがどのフォームを参照しているかを指定する必要があります。これは各モデルの id 属性と、各コントロールの model 属性で指定します:

<model id="search">
   <instance><data xmlns=""><q/></data></instance>
   <submission id="s" .../>
</model>
<model id="login">
   <instance><data xmlns=""><user/><passwd/></data></instance>
   <submission id="l" .../>
</model>
...
<input model="search" ref="q"><label>検索キーワード:</label></input>
<submit submission="s"><label>検索</label></submit>
...
<input model="login" ref="user"><label>ユーザ名</label></input>
<secret model="login" ref="passwd"><label>パスワード</label></input>
<submit submission="l"><label>ログイン</label></submit>

`ref` の代わりに `bind` を用いる方法

もしモデル内に bind がある場合は、直接インスタンスの値へではなくコントロールからそれを参照することができます。これにより、インスタンスがどのように構造化されるかの詳細を、コントロールを変更することなく変更することができます。これは、どのモデルが関係しているかを指定する必要がない、ということも意味しています:

<model>
   <instance><data xmlns=""><q/></data></instance>
   <submission id="s" .../>
   <bind id="query" nodeset="q" required="true()"/>
</model>
...
<input bind="query"><label>照会</label></input>

(bind 属性は bind 要素の id への参照であり、XPath の記述ではありません。)

ここでは触れない機能

序文で触れたように、本文書は XForms の網羅的なチュートリアルではありません。ここでは触れられなかった主な機能は以下のようなものです:

イベントとアクション: イベントと組み込みのアクションを扱う方法 (訳註: 仕様書の 4 Processing Model、 10 XForms Actions などを参照)

スキーマ: ユーザ定義の型を指定する方法 (訳註: 仕様書の 6.2 Schema Constraints を参照)

p3ptype: プライバシーに関する値を指定する方法 (訳註: 仕様書の 6.1.7 The p3ptype Property を参照)

スイッチ: ウィザードのようにフォームを段階的に入力する方法 (訳註: 仕様書の 9.2 The XForms Switch Module を参照)

繰り返し: ショッピングカートのように項目を追加したり削除したりできるようにする方法 (訳註: 仕様書の 9.3 The XForms Repeat Module を参照)

HTML 作成者のための XForms 入門

序文

目次

簡単な検索フォーム

名前空間接頭辞

フォームコントロール

簡単なテキスト入力

テキストエリア

ラジオボタン

チェックボックス

メニュー

ファイル選択

パスワード

リセット

ボタン

画像ボタン

選択肢のグループ化 (optgroup)

コントロールのグループ化

出力コントロール*

レンジコントロール*

隠しコントロール

送信値

送信値を明示化する方法

初期値

隠し値

初期値を別の場所から得る方法*

任意の XML 文書の「編集」*

送信

複数の送信*

送信メソッド

送信後の処理 (Life after Submit)*

コントロールの制御

選択不能なコントロール

読み出し専用のコントロール

必須のコントロール*

Constraint プロパティ*

Calculate プロパティ*

型*

プロパティの結合

1文書中の複数のフォーム

ref の代わりに bind を用いる方法

ここでは触れない機能

`ref` の代わりに `bind` を用いる方法