本文へジャンプ

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。プロフィールで選択した情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

  • 閉じる [x]

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


送信されたすべての情報は安全です。

  • 閉じる [x]

XForms の基本

次世代のフォームを作成するための必須事項を学ぶ

Nicholas Chase (nicholas@nicholaschase.com), President, Chase and Chase, Inc.
Nicholas Chase は、Lucent Technologies や Sun Microsystems、Oracle、the Tampa Bay Buccaneers などの会社で Web 開発に携わってきました。彼は高校の物理の先生であり、低レベル放射性廃棄物施設の管理者であり、オンライン SF 雑誌の編集者であり、マルチメディアのエンジニアであり、Oracle インストラクターであり、あるインタラクティブ・コミュニケーション会社の最高技術責任者でもあります。『XML Primer Plus』(Sams 刊) を含めて、何冊かの著作があります。

概要: XForms は、Web フォームを作ろうとする Web 作者や開発者にとって、数多くの新機能を提供しています。XForms の Web フォームは表現力豊かな対話型の動作を実現する一方、HTML でフォームを作る上での、おなじみの側面も相変わらず多く維持しています。この記事では、XForms のフォームを作成するための基本について、フォームの構造そのものや、基本的なコントロールまたはフィールド、そして最も一般的な送信オプションなどを含めて説明します。

日付:  2006年 10月 10日
レベル:  中級 この記事の原文:  英語
アクティビティー: 3359 ビュー
お気軽にご意見・ご感想をお寄せください: 


はじめに

Web フォームは登場してから長い時間が経っていますが、Web フォームを使っても大したことはできません。XForms は、高度な対話性や多くの送信オプションなど、現在のフォームよりもはるかに多くの機能を持っています。しかし、そうした華やかなものに入り込む前に、XForms フォームを作るための基本を知る必要があります。


始めるための準備

まず最初に必要なものは、XForms を表示する機能を持ったブラウザーです。この記事では、XForms エクステンションを備えた FireFox を使います。これは Mozilla.org から入手することができます。(このエクステンションには「not yet meant for end users (まだエンドユーザー向けではありません)」という警告文が付いていますが、この記事の執筆時点では非常に安定しているようです。) Microsoft® Internet Explorer を使いたい人は、ここから Formsplayer をダウンロードすることができます。Formsplayer をロードするためにはファイルの先頭に少し変更を加える必要があり、また FireFox 用のフォームを使うため、ファイルには .xhtml ではなく .htm を使う必要があります。それ以外は問題なく動作するはずです。この記事に含まれているサンプル・コードをよく調べ、違いを見てください。

この記事では、XML の一般的な概念には慣れているものという前提で説明を進めます。


基本的なフォームを作成する

ここで、ユーザーが好む作曲家についての情報を集めるために設計されたフォームの例を考えてみましょう。HTML フォームでは、単純にページ上の form 要素の中にフォーム・フィールドを含むだけです。XForms フォームも似ていますが、構造が少し異なっています。単純なフォームの例をリスト 1 に示します。


リスト 1. 基本的なフォーム
                

<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xforms="http://www.w3.org/2002/XForms">
<head>
<title>Describe a composer</title>

<xforms:model id="model_composers">

    <xforms:instance xmlns="">
        <composers>
           <composer>
               <name></name>
               <genre></genre>
               <accessibility></accessibility>
               <difficulty></difficulty>
               <totalscore></totalscore>
               <examples>
                  <example></example>
                  <example></example>
                  <example></example>
               </examples>
            </composer>
        </composers>
    </xforms:instance>

    <xforms:submission id="submit_model_composers"
      action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>

</xforms:model>

</head>
<body>
...

このフォームの最初の部分はモデルです。モデルは、フォームの中に含めるべきデータを定義し、ユーザーがそのデータを送信する際に何が起こるかを規定します。この場合は、データを保持するために、単純な XML 文書 (インスタンスと呼ばれます) が作られています。そして submission 要素は、データを送信する際には http://xformstest.org/cgi-bin/showinstance.sh に送るように指定しています。このあとすぐに説明しますが、この宛先は、送信されたデータを単純にエコー・バックします。次のステップは、実際のフォーム要素そのものを作ることです (リスト 2)。


リスト 2. フォームの要素
                

...
    </xforms:instance>
    <xforms:submission id="submit_model_composers"
      action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>
</xforms:model>

</head>
<body>

<xforms:input ref="/composers/composer/name">
    <xforms:label>Name: </xforms:label>
</xforms:input>
<br />
<xforms:input ref="/composers/composer/genre">
    <xforms:label>Genre: </xforms:label>
</xforms:input>
<br />
<xforms:input ref="/composers/composer/accessibility">
    <xforms:label>Accessibility: </xforms:label>
</xforms:input>
<br />
<xforms:input ref="/composers/composer/difficulty">
    <xforms:label>Difficulty: </xforms:label>
</xforms:input>
<br />
<xforms:input ref="/composers/composer/totalscore">
    <xforms:label>Totalscore: </xforms:label>
</xforms:input>
<br />
<xforms:repeat
    id="repeat_example_model_composers"
    nodeset="/composers/composer/examples/example">
    <xforms:input ref=".">
        <xforms:label>Example: </xforms:label>
    </xforms:input>
</xforms:repeat>

<xforms:submit submission="submit_model_composers">
    <xforms:label>Submit</xforms:label>
</xforms:submit>

</body>
</html>

最初のいくつかのフィールドは、ごく単純です。テキスト入力フィールドは input 要素を使って作られており、またインスタンス文書の中の、この「コントロール」に対応するノードを、ref 属性を使って指定しています。つまり、ユーザーが name コントロールの中に、例えば Mozart という名前を入力すると、その情報は自動的に /composers/composer/name 要素の内容となります。また各コントロールは label (ラベルという言葉どおりの役割を持ちます) も持っており、ブラウザー・ウィンドウの中にラベルを表示するため、ユーザーは自分が何を見ているのかを知ることができます。

リスト 2 の一番下には repeat 要素が追加されています。この要素は、特定のノード・グループ (この場合は example 要素) を選択し、各ノードの内容を 1 度づつ実行します。repeat 要素の内容には、もう 1 つ入力コントロールがありますが、この場合は ref 属性がノードセットの現在のノードを参照することに注意してください。

このフォームをブラウザーにロードすると、どこかで見たようなものが見えるはずです (図 1)。


図 1. 基本的なフォーム
基本的なフォーム

各フォーム・フィールドの直前に、うまくラベルが配置されていることに注意してください。ラベルの中には、必要な空白も含めるようにします。

では、実際にフォームの中にデータを入力すると何が起きるのかを見てみましょう。

基本的な送信

先ほど説明したように、ref 属性は、インスタンス文書の中のノードにコントロールをリンクします。この実際の動作は、フォームを埋め (図 2)、Submit ボタンを選択するとわかります。


図 2. フォームを埋める
フォームを埋める

次に、フォームを送信します。この場合は、送信されるデータには何も特別なことを規定していません。HTML フォームの場合、データは名前と値の対として入ってきますが、これは HTML フォームではありません。XForms フォームのデフォルトでは、実際の XML インスタンスを POST リクエストの内容として送信します。指定された宛先は、その情報を受け取り、単純にそれをエコー・バックします。この結果を図 3 に示します。


図 3. 結果
結果

これで非常に基本的なことは終わりましたが、先に進む前に、少し整理しておきましょう。

インスタンスを別のファイルに移す

この記事に関連する XForms のヒントのシリーズにあげられている多くの例を見ると、実際にはインスタンスが必ずしもフォームの一部である必要がないことがわかると思います。少なくとも、直接的にフォームの一部である必要はありません。XML インスタンスを別の文書に分離し、その文書をインスタンス要素から参照することもできるのです (リスト 3)。


リスト 3. データを分離する
                

...
<xforms:model id="model_composers">
    <xforms:instance src="composer.xml">
    </xforms:instance>
    <xforms:submission id="submit_model_composers"
      action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>
</xforms:model>
...

このように分離することによって、フォームはずっと扱いやすくなり、インスタンス・データも、必要に応じて容易に変更できるようになります。


他のコントロール・タイプ

非常に基本的なことはわかったので、フォームに追加できる、他のコントロール・タイプを少し見てみましょう。

Secret

HTML でよく使われるフィールドの 1 つに「パスワード」フィールドがあります。これは実際にはセキュアではありませんが、ユーザーが入力するものは隠されるため、他の人が後ろから覗きこんでも見ることはできません。もちろん、このフィールドはパスワード以外にも使うことができ、XForms では、これを secret コントロールと呼んでいます。例えば、与えられたヒントから作曲家を当てるようにしたい、とします (リスト 4)。


リスト 4. secret コントロール
                

...
<body>

<xforms:secret ref="/composers/composer/name" 
                                 model="model_composers">
       <xforms:label>Name: </xforms:label>
</xforms:secret>
<br />
<xforms:input ref="/composers/composer/genre" model="model_composers">
...

このフォームが描画されると、name フィールドへの入力が隠されていることがわかります (図 4)。


図 4. データを隠す
データを隠す

これ以外のコントロールは、表示に関するものではなく、機能に関するものです。

Range

HTML には対応するものがないものに、range コントロールがあります。このコントロールは「スライダー」として表示され、ユーザーは進めたり戻したりしながら値を選択できます。これを使うと、start 値や end 値、間隔の大きさなどをコントロールすることができます (リスト 5)。


リスト 5. range コントロール
                

...
<xforms:input ref="/composers/composer/genre">
    <xforms:label>Genre: </xforms:label>
</xforms:input>
<br /> <br />
<xforms:range start="-10" end="10" step="1" 
              ref="/composers/composer/accessibility">
   <xforms:label>Accessibility: <br /></xforms:label>
</xforms:range>
<br /> <br />
<xforms:range  start="-5.0" end="5.0" step="0.5" 
                 ref="/composers/composer/difficulty">
   <xforms:label>Difficulty: <br /></xforms:label>
</xforms:range>
<br /> <br />
<xforms:input ref="/composers/composer/totalscore"
   >
    <xforms:label>Totalscore: </xforms:label>
</xforms:input>
...

この例で示したように、range は対称的でなくてもよいことに注意してください。range の数字は、ステップのサイズとまったく同じように、任意に選ぶことができます。ページをリロードすると、スライダーが置かれていることがわかります (図 5)。


図 5. range コントロール
range コントロール

ユーザーが range を使って選択するデータは単純な数値であり、まるでユーザーが直接入力したかのようにインスタンス文書に追加されます。これは、フォームを送信してインスタンス文書を見ればテストすることができます。

Select

HTML には、いくつかの選択肢を列挙する機能も含まれています。HTML では、1 つ、あるいは複数を選択できるフィールドを作成できますが、それをどう表示するかを事前に決める必要があります。その例として、一連のチェックボックスやラジオ・ボタン、あるいはプルダウン・メニューなどを追加することができます。XForms では、ユーザーが選択可能なように単純に指定し、あとはレンダリング・エンジンに任せることができます (リスト 6)。


リスト 6. select コントロール
                

...
<xforms:input ref="/composers/composer/name">
    <xforms:label>Name: </xforms:label>
</xforms:input>
<br />
<xforms:input ref="/composers/composer/genre">
    <xforms:label>Genre: </xforms:label>
</xforms:input>
<xforms:select ref="/composers/composer/genre" appearance="full">
    <xforms:label>Genre: </xforms:label>
    <xforms:item>
        <xforms:label>Baroque</xforms:label>
        <xforms:value>B</xforms:value>
    </xforms:item>
    <xforms:item>
        <xforms:label>Classical</xforms:label>
        <xforms:value>C</xforms:value>
    </xforms:item>
    <xforms:item>
        <xforms:label>Neo-Classical</xforms:label>
        <xforms:value>NC</xforms:value>
    </xforms:item>
    <xforms:item>
        <xforms:label>Modern</xforms:label>
        <xforms:value>M</xforms:value>
    </xforms:item>
    <xforms:item>
        <xforms:label>Pop</xforms:label>
        <xforms:value>P</xforms:value>
    </xforms:item>
</xforms:select>
    
<xforms:range start="-10" end="10" step="1" 
              ref="/composers/composer/accessibility">
   <xforms:label>Accessibility: <br /></xforms:label>
</xforms:range>
...

この場合、いくつかの異なる項目が追加され、その中から選べるようになっています。そして各項目に対して label (ユーザーに見える部分) と value (データの一部として実際に送信される部分) が規定されています。フォームをリロードすると、この内容を確認することができます (図 6)。


図 6. 選択リスト
選択リスト

ここで、注意すべき点がいくつかあります。まず、 Genre (ジャンル) の入力ボックスと選択リストが、どちらもインスタンス文書の中の同じノードを参照しています。このため、チェックボックスの 1 つをチェックすると、そのボックスの値が genre 要素に追加され、入力ボックスに現れます。

2 番目に、チェックボックスを指定したわけではないのにチェックボックスが表示されていることに注意してください。指定されたのは、full という appearance です。ほとんどの場合、これは選択リスト用のチェックボックスになります。また、appearance を compact と指定することもできます (リスト 7)。


リスト 7. 選択リストの appearance を変更する
                

...
<xforms:input ref="/composers/composer/genre">
    <xforms:label>Genre: </xforms:label>
</xforms:input>
<xforms:select ref="/composers/composer/genre" appearance="compact">
    <xforms:label>Genre: </xforms:label>
    <xforms:item>
        <xforms:label>Baroque</xforms:label>
        <xforms:value>B</xforms:value>
...

こうすると、選択リストの外観が変わります (図 7)。


図 7. 選択リストを変更する
選択リスト

コントロールがもはや「block」要素としては描画されず、独自のライン上に自動的に配置されることに注意してください。機能的には、これは HTML の複数選択リストと同じように動作します。

XForms 仕様には「minimal」という appearance も用意されていますが、FireFoxでは compact と同じに見えます。

これらをどのように描画するかは、完全にブラウザー次第です。これは XForms の強みの 1 つです。つまり描画の方法を、機器が自由に決められるのです。例えば携帯電話は、選択リストをまったく別の方法で表示するかもしれません。これはデータと表示とを分離する利点の 1 つです。

これらはどれも結構なことですが、ユーザーが複数選択できないようしたい場合にはどうするのでしょう。例えば、チェックボックスではなくラジオ・ボタンにしたい場合にはどうするのでしょう。これは、select コントロールの代わりに select1 コントロールを使うことで実現することができます。


リスト 8. select1 コントロール
                

...
<xforms:input ref="/composers/composer/genre">
    <xforms:label>Genre: </xforms:label>
</xforms:input>
<xforms:select1 ref="/composers/composer/genre" appearance="full">
    <xforms:label>Genre: </xforms:label>
    <xforms:item>
        <xforms:label>Baroque</xforms:label>
        <xforms:value>B</xforms:value>
    </xforms:item>
...
</xforms:select1>

<xforms:range start="-10" end="10" step="1" 
ref="/composers/composer/accessibility">
    <xforms:label>Accessibility: <br /></xforms:label>
</xforms:range>
...

データは同じですが、フォームを描画すると、その違いがわかります (図 8)。


図 8. select1 コントロール
select1 コントロール

XForms 仕様には、この他にも file upload コントロールなども含まれていますが、頻繁に使われるのは、上にあげたようなコントロールです。


コントロールの値を設定する

フォームで一般的な、もう 1 つの機能として、値の設定があります。値は、通常はフォームが最初にロードされた時に設定されますが、場合によるとフォームを使う中で値が設定されることもあります。これをXForms フォームで実現するにはどうするのかを見てみましょう。

初期値を使う

ここまでに学んだことから、フォーム・コントロールに情報を追加すると、その情報がどのようにしてインスタンスに追加されるかがわかりました。しかし実際には、これは双方向で行われます。つまりインスタンスに情報を追加すると、その情報はフォームのコントロールにも追加されるのです (リスト 9)。


リスト 9. インスタンスの中の情報
                

...
<xforms:model id="model_composers">

<xforms:instance xmlns="">
<composers>
   <composer>
      <name>Wolfgang Amadeus Mozart</name>
      <genre>C</genre>
      <accessibility>9</accessibility>
      <difficulty>9</difficulty>
      <totalscore>18</totalscore>
      <examples>
         <example>A little night music</example>
         <example>Twinkle, twinkle, little star</example>
         <example>Don Giovanni</example>
      </examples>
   </composer>
</composers>
</xforms:instance>

<xforms:submission id="submit_model_composers"
     action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>

</xforms:model>
...

ここには、これまでフォームに含まれていた情報とは少し異なる情報があることがわかります。フォームをロードすると、この情報をページ上で見ることができます (図 9)。


図9. インスタンスからのデータ
インスタンスからのデータ

つまり、インスタンスに入力されるものはすべてコントロールに反映され、その逆も成り立ちます。しかし XForms には、この関係を作るためのオプションが、もう 1 つあるのです。

値をバインドする

ここまでは、インスタンス内の特定のノードを参照する機能だけを見てきました。しかし XForms では、特定のノード・セットに明示的に「バインド」できるのです。例えば、特定のノードを参照するための ID を作ることができます (リスト 10)。


リスト 10. バインディングを作る
                

<?xml version="1.0" encoding="ASCII"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xforms="http://www.w3.org/2002/XForms">
<head>
<title>Describe a composer</title>

<xforms:model id="model_composers">
    <xforms:instance xmlns="">
...
    </xforms:instance>
    <xforms:submission id="submit_model_composers"
      action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>
        <xforms:bind id="total" nodeset="/composers/composer/totalscore"/>

</xforms:model>

</head>
<body>

<xforms:input ref="/composers/composer/name">
    <xforms:label>Name: </xforms:label>
</xforms:input>
...
<xforms:range  start="-10
.0" end="
10.0" step="0.5" 
                   ref="/composers/composer/difficulty">
   <xforms:label>Difficulty: <br /></xforms:label>
</xforms:range>

<br /> <br />

<xforms:input bind="total">
    <xforms:label>Totalscore: </xforms:label>
</xforms:input>

<br />
<xforms:repeat
...

Totalscore コントロールは、特定のノードを参照するのではなく、ID 値で規定される特定のバインディングを参照することに注意してください。フォームはバインディングそのものを、モデルの中に定義します。こうすることによって、フォームをロードしたとしても、どこで Totalscore の値を取得すればよいのか XForms にはわかるのです (図 10)。


図 10. バインド値を使う
バインド値を使う

この機能は、フォームを抽象化する上で便利です。例えば大きなフォームの場合、それぞれのデータに対してバインディングを作成しておけば、フォーム全体を変更しなくてもインスタンスの構造を変更することができます。単純に各バインディングのノード・セットを変更するだけで済むのです。

計算済みの値を使う

しかしバインディングの機能で最も便利なのは、なんと言っても計算済みの値を作れることでしょう。例えば、accessibility の値と difficulty の値を自動的に加算して Totalscore を作成するような状況を実現することができます (リスト 11)。


リスト 11. 計算済みの値を作る
                

...
</xforms:instance>
    <xforms:submission id="submit_model_composers"
      action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>
        
    <xforms:bind id="total" nodeset="/composers/composer/totalscore" 
       calculate="/composers/composer/accessibility + 
                                  /composers/composer/difficulty"/>

</xforms:model>
...

フォームをロードし、accessibility または difficulty のいずれかの値を変更すると、Totalscore の値が自動的に変更されることがわかります (図 11)。


図 11. 値を加算する
値を加算する

フォームを送信する

XForms フォームを送信する場合、通常はインスタンス全体をサーバーに送るのだということを既に見てきました。しかし、必ずそうする必要があるわけではありません。


フォームの一部を送信する

XForms 送信の 1 つのバリエーションとして、インスタンスのごく一部のみを送信することができます。例えば、example 要素のみを送信するようにフォームに命令することができます (リスト 12)。


リスト 12. example のみを送信する
                

...
            </examples>
         </composer>
      </composers>

   </xforms:instance>
    
   <xforms:submission id="submit_model_composers" 
                         ref="/composers/composer/examples"
                         action="http://localhost/XForms.php"
                         method="post"/>
                         
   <xforms:bind id="total" nodeset="/composers/composer/totalscore" 
        calculate="/composers/composer/accessibility + 
                              /composers/composer/difficulty" />
</xforms:model>
...

フォームを送信すると、ref 属性で指定されたインスタンス部分のみが送信されることがわかります (図 12)。


図 12. インタンスの一部のみを送信する
インタンスの一部のみを送信する

もう 1 つのバリエーションとして、ページ全体を置き換えずにインスタンスを送信する方法があります。


インスタンスの一部を置き換える

通常の HTML フォームと比べて XForms が持つ大きな利点が、XML で送信でき、またデータを XML として受信できることです。この XML はインスタンスに追加することができ、また、上で見てきたようにページ上の既存のコントロールに追加することもできます。ただしブラウザーのセキュリティーを調整しない限り、そのフォームを最初にダウンロードしたドメインと同じドメイン名からのレスポンスしか受け付けられないことに注意してください。例えば、http://www.nicholaschase.com/composers.xhtml というページをダウンロードし、このフォームを使ってインスタンスにデータを追加するための戻り送信を行う場合、その送信には http://www.nicholaschase で始まる URL を含めた方が無難です。これは、単純にローカルでフォームをロードすることはできない、ということを意味します。この記事のサンプル・フォームには、単純にデータを返す PHP スクリプトが含まれています。次のセクションでは、このスクリプトを使って、今述べたテストを行います。

このフォームを使って、ページではなくインスタンスを置き換えるには、送信に属性を追加するだけです (リスト 13)。


リスト 13. インスタンスを置き換える
                

...
    </xforms:instance>
    
           <xforms:submission id="submit_model_composers" 
                         ref="/composers/composer/examples"
                         replace="instance"
                         action="http://localhost/XForms.php"
                         method="post"/>
                         
    <xforms:bind id="total" nodeset="/composers/composer/totalscore" 
        calculate="/composers/composer/accessibility + 
                                    /composers/composer/difficulty" />
</xforms:model>

</head>
<body>
...
<br />
<xforms:repeat
    id="repeat_example_model_composers"
    nodeset="/composers/composer/examples/example">
    <xforms:input ref=".">
        <xforms:label>Example: </xforms:label>
    </xforms:input>
</xforms:repeat>

<xforms:repeat
    id="repeat_example_model_composers"
    nodeset="/examples/example">
    <xforms:input ref=".">
        <xforms:label>Submitted Example: </xforms:label>
    </xforms:input>
</xforms:repeat>

<xforms:submit submission="submit_model_composers">
    <xforms:label>Submit</xforms:label>
</xforms:submit>

</body>
</html>

ここで、文書の中に /examples/example ノードがある場合のみ現れる、2 番目の repeat 要素が追加されていることに注意してください。これによって、これらの要素は文書を最初にロードした時には現れず、送信を行った後に現れます。


図 13. 送信されたインスタンス
送信されたインスタンス

まとめに入る前に、もう 1 つ、知っておくべきことがあります。


基本に戻る: 従来の Web フォーム

ここまで、XForms と HTML フォームとの違いを数多く見てきましたが、XForms フォームを使って、古いスタイルのスクリプトに送信したい場合にはどうするのでしょう。幸い、従来の名前と値のスタイルでデータを送信するよう XForms に命令するのは簡単なのです (リスト 14)。


リスト 14. 従来のデータを送信する
                

...
<xforms:model id="model_composers">
  <xforms:instance id="instance_model_composers" src="composer.xml"/>
                       
  <xforms:submission id="submit_model_composers" 
                         action="http://localhost/XForms.php"
                         method="get"
                         encoding="application/x-www-form-urlencoded"/>
                         
    <xforms:bind id="total" nodeset="/composers/composer/totalscore" 
        calculate="/composers/composer/accessibility + 
                                      /composers/composer/difficulty" />
</xforms:model>
...

POST メソッドではなく、GET メソッドを再利用していることに注意してください。これによって XForms は、リクエストの中ではなく URL 自体にデータを置くのだと理解するのです。また、エンコーディング属性は XForms に対して、名前と値の対を作るように命令しています。このようにすると、フォームを送信してもページ上には何も情報がありません。エラーを防ぐための単純な出力ステートメントが追加されているだけですが、この情報は今や URL の中にあります (図 14)。


図 14. GET リクエストを送信する
GET リクエストを送信する

実際のデータを見ると、確かにすべてのデータはありますが、「フラットな」形式になっています。これは、オリジナルの XML の階層構造を複製する機構がないためです (リスト 15)。


リスト 15. URL リクエスト
                

http://localhost/XForms.php?name=Wolfgang+Amadeus+Mozart;genre=C;
accessibility=9;difficulty=9;totalscore=18;example=A+little+night
+music;example=Twinkle%2C+twinkle%2C+little+star;example=Don+Giovanni

名前と値の対が、対ごとにセミコロン (;) で区切られていることに注意してください。この区切りは、 separator 属性を使えばアンパーサンド (&) に変更することができます。


まとめ

ここまで来れば、皆さんは単純な XForms フォームも、やや複雑な XForms フォームも作れるはずです。XForms フォームはデータの受信にも保存にも XML の「インスタンス」構造に依存していますが、おなじみの HTML フォームの機能の多くをエミュレートすることができます。XForms フォームは高度な対話性を備え、またデータと表示が分離されているため、複数のデバイスに対して同じフォームを使うことができます。そうした機能を活用して、より便利なフォームを作るために何が必要か、この記事で十分理解できたと思います。



ダウンロード

内容ファイル名サイズダウンロード形式
Sample codexformsbasicsfiles.zip3KBHTTP

ダウンロード形式について


参考文献

学ぶために

  • W3C の XFormsのホームページを訪れてください。

  • XForms.org: The Nexus for Intelligent Web Apps には、XForms の宝庫として、様々な情報やリンクが用意されています。

  • alphaWorks の記事、「Develop forms using the Visual XForms Designer」を読み、この記事で説明したことを Visual XForms Designer を使って行うための参考にしてください。

  • XForms と似ていますが競合する、Web Forms 2.0 の仕様を見てください。

  • XForms 入門」(devleoperWorks、2002年9月) は、この重要な技術の概要をうまくまとめています。

  • John Boyer が XForms に関して書いているブログ、Web Forms 2.0 and the future of XML content on the web を読んでください。

  • SVGとXForms: 入門」(developerWorks、2003年11月) は、この 2 つの技術の概要を紹介し、両者の間にシナジー効果の可能性があることをハイライトしています。

  • O'Reilly Media から出版されている、Micah Dubinko 著の『XForms Essentials』を読んでください。

  • XForms に関して調べるための出発点として、XML.com の Ten Favorite XForms Engines を読んでください。

  • W3C の XForms に関するインタラクティブでクロス・プラットフォームのチュートリアルを利用するために、XForms institute を訪ねてください。

  • XForms の起源と目的の歴史的な概要を知るために、SGML の歴史 (英語) についての簡潔な説明を見てください。

  • XML に関する基礎を学ぶために、チュートリアル、「Introduction to XML」(developerWorks、2002 年 8 月) を利用してください。

  • developerWorks の XML ゾーンでは、XML に関するすべてを学ぶことができます。

  • このシリーズは、XForms を使い始めるためのガイドとして最適です。

製品や技術を入手するために

議論するために

著者について

Nicholas Chase

Nicholas Chase は、Lucent Technologies や Sun Microsystems、Oracle、the Tampa Bay Buccaneers などの会社で Web 開発に携わってきました。彼は高校の物理の先生であり、低レベル放射性廃棄物施設の管理者であり、オンライン SF 雑誌の編集者であり、マルチメディアのエンジニアであり、Oracle インストラクターであり、あるインタラクティブ・コミュニケーション会社の最高技術責任者でもあります。『XML Primer Plus』(Sams 刊) を含めて、何冊かの著作があります。

不正使用の報告のヘルプ

不正使用の報告

ありがとうございます。 このエントリーは、モデレーターの注目フラグが設定されました。


不正使用の報告のヘルプ

不正使用の報告

不正使用の報告の送信に失敗しました。


developerWorks: サイン・イン


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。 プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。 お客様の姓名(非表示設定にしていない限り)とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

表示名をお選びください

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

(半角英数字で3文字以上31文字以下にする必要があります)


「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


この記事を評価する

コメント

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML
ArticleID=243022
ArticleTitle=XForms の基本
publish-date=10102006
author1-email=nicholas@nicholaschase.com
author1-email-cc=dwxed@us.ibm.com