モバイルCGI研究（EZweb編）HDMLによる入力フォームサンプル　[CGIぽん]

HDML と CGI を連携させるときに困るのが入力フォーム。特にチェックボックスやラジオボタンなどの機能はあらかじめ用意されていないので、 <CE> タグや ENTRY カード、 NODISPLAY カードなどを使って工夫する必要があります。ここではそれらの簡単な例を示しています。

できる限りシンプルに、拡張性の高いものを紹介しているつもりですが、他にもいろいろいい方法はあると思いますので、考えてみてください。また、各項目で独立して読めるように、ちょっと説明がくどくなっています。ご容赦下さい。

当然ですが、ここにあるサンプルの著作権を主張するつもりはありませんので(^^;)ご自由にカスタマイズして使ってください。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#name vars="name=&mail=&mess=">
  </NODISPLAY>

  <ENTRY name=name key=name>
    <ACTION type=accept task=go dest=#mail>
    名前入力
  </ENTRY>

  <ENTRY name=mail key=mail>
    <ACTION type=accept task=go dest=#mess>
    メール入力
  </ENTRY>

  <ENTRY name=mess key=mess>
    <ACTION type=accept task=go dest="xxxx.cgi" method=post postdata="name=$name&mail=$mail&mess=$mess&foo=bar">
    メッセージ入力
  </ENTRY>

</HDML>

名前入力          
おが_

ACCEPT
→

メール入力          
cgipon@spec_

ACCEPT
→

メッセージ入力      
テスト投稿_

このデッキは、各項目を決められた順番に入力し、最後に "name" と "mail" と "mess" と "foo" の各値を xxxx.cgi に渡すものです。

preset という名前の NODISPLAY カードでは、 $name と $mail と $mess の各変数の初期値を決めています。vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 name という名前のカードに飛びます。

name という名前の ENTRY カードでは、 "key=name" となっているので、入力された文字列は $name という変数に格納されます。 ACCEPT キーを押すと mail という名前のカードに飛びます。

mail という名前の ENTRY カードでは、 "key=mail" となっているので、入力された文字列は $mail という変数に格納されます。 ACCEPT キーを押すと mess という名前のカードに飛びます。

mess という名前の ENTRY カードでは、 "key=mess" となっているので、入力された文字列は $mess という変数に格納されます。 ACCEPT キーを押すと xxxx.cgi に POST メソッドで変数が渡されます。

CGIに渡される変数は "name" と "mail" と "mess" と "foo" で、これらにはそれぞれ、入力された $name と $mail と $mess の各値、および "bar" という文字列が入っています。この "foo=bar" というのは、 HTML で言うところの、 hidden パラメータ、 <INPUT type="hidden" name="foo" value="bar"> に相当します。

ENTRY カードで入力された値には改行コードが含まれる可能性が大いにありますので、CGI側の処理では注意してください。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="name=&mail=&mess=">
  </NODISPLAY>

  <CHOICE name=list>
    <CENTER>投稿フォーム
    <CE task=go dest=#name label="入力">名前<TAB>[$name]
    <CE task=go dest=#mail label="入力">メール<TAB>[$mail]
    <CE task=go dest=#mess label="入力">メッセージ<TAB>[$mess]
    <CE task=go dest="xxxx.cgi" method=post postdata="name=$name&mail=$mail&mess=$mess&foo=bar">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <ENTRY name=name key=name>
    <ACTION type=accept task=go dest=#list>
    名前入力
  </ENTRY>

  <ENTRY name=mail key=mail>
    <ACTION type=accept task=go dest=#list>
    メール入力
  </ENTRY>

  <ENTRY name=mess key=mess>
    <ACTION type=accept task=go dest=#list>
    メッセージ入力
  </ENTRY>

</HDML>

      投稿フォーム      
1名前       []
2 メール     []
3 メッセージ []
4 送信
5 リセット

1を選択
→

名前入力
おが_

ACCEPT
→

      投稿フォーム      
1名前       [おがちょ]
2 メール     []
3 メッセージ []
4 送信
5 リセット

↓2を選択

      投稿フォーム      
1 名前       [おがちょ]
2メール     [cgipon@s
3 メッセージ []
4 送信
5 リセット

ACCEPT
←

メール入力
cgipon@spec_

このデッキは、各項目を任意の順番に入力し、最後に "name" と "mail" と "mess" と "foo" の各値を xxxx.cgi に渡すものです。

preset という名前の NODISPLAY カードでは、 $name と $mail と $mess の各変数の初期値を決めています。vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードで "名前" を選択すると、 name という名前のカードに飛びます。

name という名前の ENTRY カードでは、 "key=name" となっているので、入力された文字列は $name という変数に格納されます。 ACCEPT キーを押すと list という名前のカードに飛びます。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "name" と "mail" と "mess" と "foo" で、これらにはそれぞれ、入力された $name と $mail と $mess の各値、および "bar" という文字列が入っています。この "foo=bar" というのは、 HTML で言うところの hidden パラメータ、 <INPUT type="hidden" name="foo" value="bar"> に相当します。

ENTRY カードで入力された値には改行コードが含まれる可能性が大いにありますので、CGI側の処理では注意してください。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="name=&mail=&mess=">
  </NODISPLAY>

  <CHOICE name=list>
    <CENTER>投稿フォーム
    <CE task=gosub dest=#in vars="def=$name&str=%96%bc%91O" receive=name label="入力">名前<TAB>[$name]
    <CE task=gosub dest=#in vars="def=$mail&str=%83%81%81%5b%83%8b" receive=mail label="入力">メール<TAB>[$mail]
    <CE task=gosub dest=#in vars="def=$mess&str=%83%81%83b%83Z%81%5b%83W" receive=mess label="入力">メッセージ<TAB>[$mess]
    <CE task=go dest="xxxx.cgi" method=post postdata="name=$name&mail=$mail&mess=$mess&foo=bar">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <ENTRY name=in key=input default=$def>
    <ACTION type=accept task=return retvals=$input>
    $(str)入力
  </ENTRY>

</HDML>

画面遷移はテキスト入力フォーム（リストタイプ）と同じです。

このデッキは、各項目を任意の順番に入力し、最後に "name" と "mail" と "mess" と "foo" の各値を xxxx.cgi に渡すものです。アクティビティを使用して、 ENTRY カードを 1 つで済ませています。

preset という名前の NODISPLAY カードでは、 $name と $mail と $mess の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードで "名前" を選択すると、 in という名前のカードに飛びます。このとき、 "task=gosub" となっているので、 in という名前の ENTRY カードをアクティビティとして利用していることになります。アクティビティの中ではアクティビティの外の変数を使えないので、この <CE> タグの vars オプションと receive オプションで変数の引き渡しと受け取りを指定しています。vars オプションの変数 $str の値 "%96%bc%91O" は "名前" という文字列を URL エンコードしたものです。また、アクティビティから受け取る値を格納する変数名を receive オプションで指定しています。

in という名前の ENTRY カードでは "key=input" となっているので、入力された文字列はアクティビティ内で $input という変数に格納されます。また、 "default=$def" となっているので、入力部分のデフォルト値は $def の値になります。この変数 $def には先ほどの <CE> タグで $name の値を入れています。また、変数 $str には "名前" という文字列が格納されているので、ディスプレイの表示は "名前入力" となります。（ "$(str)" という書き方は見慣れないかも知れませんが、変数名の始まりと終わりを ( ) で区切っているだけです。一般の文字と並べて書くときはこのように ( ) 付きで書くことをお薦めします。） <ACTION> タグに "task=return" と書いてあるので、ACCEPT キーを押すと呼びだし元のカード、すなわち list という名前の CHOICE カードに戻ります。このとき、 "retvals=$input" となっているので、呼びだし元に $input の値を返します。

list という名前の CHOICE カードに戻るときにはアクティビティ内の retvals で指定された値を receive で指定した変数に格納します。つまりこの時点で、 ENTRY カードに入力された文字列を変数 $name に格納したことになります。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "name" と "mail" と "mess" と "foo" で、これらにはそれぞれ、入力された $name と $mail と $mess の各値、および "bar" という文字列が入っています。この "foo=bar" というのは、 HTML で言うところの hidden パラメータ、 <INPUT type="hidden" name="foo" value="bar"> に相当します。

ENTRY カードで入力された値には改行コードが含まれる可能性が大いにありますので、CGI側の処理では注意してください。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="name=&mail=&mess=">
  </NODISPLAY>

  <CHOICE name=list key=item>
    <CENTER>投稿フォーム
    <CE task=go dest=#in vars="input=$name&str=%96%bc%91O" value=name label="入力">名前<TAB>[$name]
    <CE task=go dest=#in vars="input=$mail&str=%83%81%81%5b%83%8b" value=mail label="入力">メール<TAB>[$mail]
    <CE task=go dest=#in vars="input=$mess&str=%83%81%83b%83Z%81%5b%83W" value=mess label="入力">メッセージ<TAB>[$mess]
    <CE task=go dest="xxxx.cgi" method=post postdata="name=$name&mail=$mail&mess=$mess&foo=bar">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <ENTRY name=in key=input>
    <ACTION type=accept task=go dest=#list vars="$item=$input">
    $(str)入力
  </ENTRY>

</HDML>

画面遷移はテキスト入力フォーム（リストタイプ）と同じです。

このデッキは、各項目を任意の順番に入力し、最後に "name" と "mail" と "mess" と "foo" の各値を xxxx.cgi に渡すものです。変数を動的に生成して、 ENTRY カードを 1 つで済ませています。

preset という名前の NODISPLAY カードでは、 $name と $mail と $mess の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードでは "key=item" となっているので、選択された <CE> タグの value オプションの値が $item という変数に格納されます。 "名前" を選択すると in という名前のカードに飛びますが、このとき、変数 $item に "name" という値が格納されます。また、vars オプションで変数 $input と $str に値を代入しています。変数 $str の値 "%96%bc%91O" は "名前" という文字列を URL エンコードしたものです。

in という名前の ENTRY カードでは "key=input" となっているので、入力された文字列は $input という変数に格納されます。先ほどの <CE>タグで $input に $name の値を代入しているので、デフォルト値は $name の値になっています。また、変数 $str には "名前" という文字列が格納されているので、ディスプレイの表示は "名前入力" となります。（ "$(str)" という書き方は見慣れないかも知れませんが、変数名の始まりと終わりを ( ) で区切っているだけです。一般の文字と並べて書くときはこのように ( ) 付きで書くことをお薦めします。） ACCEPT キーを押すと list という名前のカードに飛びます。このとき、 vars オプションで変数名とその値を指定しています。ここで今変数 $item には "name" という値が入っているので、 "$item=$input" は "name=$input" と解釈され、結果として、 ENTRY カードで入力された値が $name という変数に格納されることになります。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "name" と "mail" と "mess" と "foo" で、これらにはそれぞれ、入力された $name と $mail と $mess の各値、および "bar" という文字列が入っています。この "foo=bar" というのは、 HTML で言うところの hidden パラメータ、 <INPUT type="hidden" name="foo" value="bar"> に相当します。

ENTRY カードで入力された値には改行コードが含まれる可能性が大いにありますので、CGI側の処理では注意してください。

HDML
<HDML version=3.0 markable=true ttl=0>

  <ENTRY key=desturl>
    <ACTION type=accept task=go dest=$(desturl:noesc)>
    URLを入力してください。
  </ENTRY>

</HDML>

このデッキは入力されたファイル名を直接リンク先に指定するものです。 CGI などを利用せずに実現できます。

ENTRY カードでは "key=desturl" となっているので、入力された文字列は変数 $desturl に格納されます。 ACCEPT キーを押すと、 dest で指定された URL へページが移動しますが、ここでは "dest=$(desturl:noesc)" と指定してあるので、 $desturl に格納された文字列、すなわち入力された文字列がそのままリンク先になります。

"$(desturl:noesc)" というのは "$desturl" の特別な書き方です。 ( ) は変数名の区切りに使われていて、 ":noesc" は変数の値を URL エンコードしない、という意味です。 dest オプションの値に $desturl をそのまま書いてしまうと、正しく動作しないことがあります。（例えば "http://specters.net/" が "http%3a%2f%2fspecters%2enet%2f" になってしまいます。）

URL の一部を入力してもらうことも可能なので、次のように、簡易認証としても利用できるでしょう。（パスワードに対応した名前のファイルをあらかじめ用意します。）

HDML
<HDML version=3.0 markable=true ttl=0>

  <ENTRY key=file>
    <ACTION type=accept task=go dest="./$(file:noesc).hdml">
    パスワードを入力してね。
  </ENTRY>

</HDML>

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#sex vars="sex=&blood=">
  </NODISPLAY>

  <CHOICE name=sex key=sex>
    性別は？
    <CE task=go dest=#blood value="男">男
    <CE task=go dest=#blood value="女">女
  </CHOICE>

  <CHOICE name=blood key=blood>
    血液型は？
    <CE task=go dest=#send value="A型">A型
    <CE task=go dest=#send value="B型">B型
    <CE task=go dest=#send value="O型">O型
    <CE task=go dest=#send value="AB型">AB型
  </CHOICE>

  <CHOICE name=send>
    $(sex)で$(blood)ですね。
    <CE task=go dest="xxxx.cgi" method=post postdata="sex=$sex&blood=$blood">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

</HDML>

性別は？              
1男
2 女

1を選択
→

血液型は？            
1 A型
2B型
3 O型
4 AB型

2を選択
→

男でB型ですね。       
1送信
2 リセット

このデッキは性別と血液型を順に選択してもらい、最後に確認画面を表示した後に、 "sex" と "blood" の各値を xxxx.cgi に渡すものです。性別と血液型はそれぞれのリストの中から 1 つだけ選ぶことができます。

preset という名前の NODISPLAY カードでは、 $sex と $blood の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 sex という名前のカードに飛びます。

sex という名前の CHOICE カードは "key=sex" となっているので、選択された <CE> タグの value オプションの値が $sex という変数に格納されます。項目を選択すると blood という名前のカードに飛びます。

blood という名前の CHOICE カードは "key=blood" となっているので、選択された <CE> タグの value オプションの値が $blood という変数に格納されます。項目を選択すると send という名前のカードに飛びます。

send という名前の CHOICE カードが表示されるときに、変数 $sex と $blood に格納されている値を表示しています。（ "$(sex)" や $(blood) という書き方は見慣れないかも知れませんが、変数名の始まりと終わりを ( ) で区切っているだけです。一般の文字と並べて書くときはこのように ( ) 付きで書くことをお薦めします。） "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

send という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "sex" と "blood" で、これらにはそれぞれ、選択された $sex と $blood の各値が入っています。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="sex=&blood=">
  </NODISPLAY>

  <CHOICE name=list>
    <LINE>性別と血液型を教えてください。
    <CE task=go dest=#sex>性別<TAB>[$sex]
    <CE task=go dest=#blood>血液型<TAB>[$blood]
    <CE task=go dest="xxxx.cgi" method=post postdata="sex=$sex&blood=$blood">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <CHOICE name=sex key=sex>
    性別は？
    <CE task=go dest=#list value="男">男
    <CE task=go dest=#list value="女">女
  </CHOICE>

  <CHOICE name=blood key=blood>
    血液型は？
    <CE task=go dest=#list value="A型">A型
    <CE task=go dest=#list value="B型">B型
    <CE task=go dest=#list value="O型">O型
    <CE task=go dest=#list value="AB型">AB型
  </CHOICE>

</HDML>

性別と血液型を入力してく
1性別       []
2 血液型     []
3 送信
4 リセット

1を選択
→

性別は？              
1男
2 女

1を選択
→

性別と血液型を入力してく
1 性別       [男]
2血液型     []
3 送信
4 リセット

↓2を選択

性別と血液型を入力してく
1 性別       [男]
2血液型     [O型]
3 送信
4 リセット

3を選択
←

血液型は？            
1 A型
2 B型
3O型
4 AB型

このデッキは、性別と血液型を任意の順番に選択入力し、最後に "sex" と "blood" の各値を xxxx.cgi に渡すものです。性別と血液型はそれぞれのリストの中から 1 つだけ選ぶことができます。

preset という名前の NODISPLAY カードでは、 $sex と $blood の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードで "性別" を選択すると sex という名前のカードに飛びます。

sex という名前の CHOICE カードは "key=sex" となっているので、選択された <CE> タグの value オプションの値が $sex という変数に格納されます。項目を選択すると list という名前のカードに飛びます。

list という名前の CHOICE カードで "血液型" を選択すると blood という名前のカードに飛びます。

blood という名前の CHOICE カードは "key=blood" となっているので、選択された <CE> タグの value オプションの値が $blood という変数に格納されます。項目を選択すると list という名前のカードに飛びます。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "sex" と "blood" で、これらにはそれぞれ、選択された $sex と $blood の各値が入っています。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="a=0&b=0&c=0">
  </NODISPLAY>

  <CHOICE name=list>
    商品の個数を選んでください
    <CE task=gosub dest=#select vars="str=A" receive=a>商品A<TAB>[$a個]
    <CE task=gosub dest=#select vars="str=B" receive=b>商品B<TAB>[$b個]
    <CE task=gosub dest=#select vars="str=C" receive=c>商品C<TAB>[$c個]
    <CE task=go dest=xxxx.cgi?A=$a&B=$b&C=$c>注文する
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <CHOICE name=select method=alpha>
    商品$(str)の注文数
    <CE task=return retvals=0>0個
    <CE task=return retvals=1>1個
    <CE task=return retvals=2>2個
    <CE task=return retvals=3>3個
    <CE task=return retvals=4>4個
  </CHOICE>

</HDML>

商品の個数を選んでください
1商品A      [0個]
2 商品B      [0個]
3 商品C      [0個]
4 注文する
5 リセット

1を選択
→

商品Aの注文数
 0個
 1個
2個
 3個
 4個

"2個"を選択
→

商品の個数を選んでください
1商品A      [2個]
2 商品B      [0個]
3 商品C      [0個]
4 注文する
5 リセット

↓2を選択

商品の個数を選んでください
1商品A      [2個]
2 商品B      [4個]
3 商品C      [0個]
4 注文する
5 リセット

"4個" を選択
←

商品Bの注文数
 0個
 1個
 2個
 3個
4個

このデッキは、商品の注文数を任意の順番で選択してもらい、最後に $a ～ $c の各値を xxxx.cgi に渡すものです。アクティビティを利用して選択肢のリストを CHOICE カード 1 つで済ませています。（選択肢が数字の場合は、 ENTRY カードで直接入力する方が簡単ですが、ここでは CHOICE カードの例として取り上げます。）

preset という名前の NODISPLAY カードでは、 $a ～ $c の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードで "商品A" を選択すると select という名前のカードに飛びます。このとき、 "task=gosub" となっているので、 select という名前の CHOICE カードをアクティビティとして利用していることになります。アクティビティの中ではアクティビティの外の変数を使えないので、この <CE> タグの vars オプションと receive オプションで変数の引き渡しと受け取りを指定しています。vars オプションでは変数 $str に A という値を格納しています。また、アクティビティから受け取る値を格納する変数名を receive オプションで指定しています。

select という名前の CHOICE カードでは、変数 $str に "A" が格納されているので、「商品Aの注文数」という表示が現れます。（ "$(str)" という書き方は見慣れないかも知れませんが、変数名の始まりと終わりを ( ) で区切っているだけです。一般の文字と並べて書くときはこのように ( ) 付きで書くことをお薦めします。）選択肢から選ぶと retvals オプションの値（ここでは数字）が呼びだし元に渡されます。

list という名前の CHOICE カードに戻るときにはアクティビティ内の retvals で指定された値を receive で指定した変数に格納します。つまり、この時点で変数 $a に選択された数字が格納されることになります。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "A" と "B" と "C" で、これらにはそれぞれ、選択された $a と $b と $c の各値が入っています。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="a=0&b=0&c=0">
  </NODISPLAY>

  <CHOICE name=list key=item>
    <CE task=go dest=#select vars="str=A" value=a>商品A:[$a個]
    <CE task=go dest=#select vars="str=B" value=b>商品B:[$b個]
    <CE task=go dest=#select vars="str=C" value=c>商品C:[$c個]
    <CE task=go dest=xxxx.cgi?A=$a&B=$b&C=$c>注文する
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <CHOICE name=select method=alpha>
    商品$(str)の注文数
    <CE task=go dest=#list vars="$item=0">0個
    <CE task=go dest=#list vars="$item=1">1個
    <CE task=go dest=#list vars="$item=2">2個
    <CE task=go dest=#list vars="$item=3">3個
    <CE task=go dest=#list vars="$item=4">4個
  </CHOICE>

</HDML>

画面遷移は単数選択（アクティビティによる CHOICE カードの節約）と同じです。

このデッキは、商品の注文数を任意の順番で選択してもらい、最後に $a ～ $c の各値を xxxx.cgi に渡すものです。変数を動的に生成して、選択肢のリストを CHOICE カード 1 つで済ませています。（選択肢が数字の場合は、 ENTRY カードで直接入力する方が簡単ですが、ここでは CHOICE カードの例として取り上げます。）

preset という名前の NODISPLAY カードでは、 $a ～ $c の各変数の初期値を決めています。 vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードではどの変数もクリアされています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードでは "key=item" となっているので、選択された <CE> タグの value オプションの値が $item という変数に格納されます。 "商品A" を選択すると select という名前のカードに飛びますが、このとき、変数 $item に "a" という値が格納されます。また、vars オプションで変数 $str に値を代入しています。

select という名前の CHOICE カードでは、変数 $str に "A" が格納されているので、「商品Aの注文数」という表示が現れます。（ "$(str)" という書き方は見慣れないかも知れませんが、変数名の始まりと終わりを ( ) で区切っているだけです。一般の文字と並べて書くときはこのように ( ) 付きで書くことをお薦めします。） <CE> タグを選択すると list という名前のカードに飛びます。このとき、 vars オプションで変数名とその値を指定しています。ここで今変数 $item には "a" という値が入っているので、 "$item=" は "a=" と解釈され、結果として、 CHOICE カードで選択された数字が変数 $a に格納されることになります。

list という名前の CHOICE カードで "リセット" を選択すると、 preset という名前のカードに飛びます。

preset という名前の NODISPLAY カードは各変数の値をクリアしています。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGI に渡される変数は "A" と "B" と "C" で、これらにはそれぞれ、選択された $a と $b と $c の各値が入っています。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#clear vars="rb=3">
  </NODISPLAY>

  <NODISPLAY name=clear>
    <ACTION type=accept task=go dest=#check vars="r1=%20&r2=%20&r3=%20&r4=%20&rb=$rb">
  </NODISPLAY>

  <NODISPLAY name=check>
    <ACTION type=accept task=go dest=#list vars="r$rb=*">
  </NODISPLAY>

  <CHOICE name=list key=rb>
    <CENTER>血液型は？
    <CE task=go dest=#clear value=1>($r1)A型
    <CE task=go dest=#clear value=2>($r2)B型
    <CE task=go dest=#clear value=3>($r3)O型
    <CE task=go dest=#clear value=4>($r4)AB型
    <CE task=go dest="xxxx.cgi" method=post postdata="rb=$rb">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

</HDML>

     血液型は？     
1 ( )A型
2 ( )B型
3(*)O型
4 ( )AB型
5 送信
6 リセット

1を選択
→

     血液型は？     
1(*)A型
2 ( )B型
3 ( )O型
4 ( )AB型
5 送信
6 リセット

2を選択
→

     血液型は？     
1 ( )A型
2(*)B型
3 ( )O型
4 ( )AB型
5 送信
6 リセット

↓2を選択

     血液型は？     
1 ( )A型
2 ( )B型
3(*)O型
4 ( )AB型
5 送信
6 リセット

6を選択
←

     血液型は？     
1 ( )A型
2(*)B型
3 ( )O型
4 ( )AB型
5 送信
6 リセット

このデッキは、ラジオボタンのように各項目の on/off を切り替え、最後に "rb" の値を xxxx.cgi に渡すものです。

preset という名前の NODISPLAY カードでは、変数 $rb の初期値を決めています。このカードでは3番目の項目がチェックされているように $rb に "3" を格納しています。このカードは表示されずに、 clear という名前のカードに飛びます。

clear という名前の NODISPLAY カードでは、各ラジオボタンの値（r1 など）を "%20" （半角スペースをURLエンコードしたもの）に設定しています。また、変数 "rb" に $rb の値（ここでは上で設定した "3" ）を設定しています。（vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。）このカードは表示されずに、 check という名前のカードに飛びます。

check という名前の NODISPLAY カードでは、$rb が "3" と解釈されるので、<ACTION> タグの vars オプションは "r3=*" という風になります。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードでは $r3 のみが "*" の値を持っているので、 "O型" だけがチェックされた状態になります。また、 "key=rb" となっているので、選択肢の <CE> タグの value オプションは $rb という変数に格納されます。

list という名前の CHOICE カードで "B型" を選択すると、 clear という名前のカードに飛びます。このとき、 clear という名前の NODISPLAY カードでは、各ラジオボタンの値（r1など）を "%20" （半角スペースを）に設定していったんクリアし、また、変数 "rb" に $rb の値（すなわち "2" ）を設定しています。このカードは表示されずに、 check という名前のカードに飛びます。

check という名前の NODISPLAY カードでは、$rb が "2" と解釈されるので、<ACTION> タグの vars オプションは "r2=*" という風になります。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードでは $r2 のみが "*" の値を持っているので、 "B型" だけがチェックされた状態になります。

list という名前の CHOICE カードで "リセット" を選択すると、preset という名前のカードに飛び、各値がリセットされます。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGIに渡される変数は "rb" これにはチェックされた項目の番号が格納されています。

選択肢を増やしたい場合は、初期値設定と、 <CE> タグの個数を増やしてください。

HDML
<HDML version=3.0 markable=true>

  <NODISPLAY name=preset>
    <ACTION type=accept task=go dest=#list vars="d1=check&d2=check&d3=check&d4=check&c1=%20&c2=%20&c3=%20&c4=%20">
  </NODISPLAY>

  <CHOICE name=list key=cb>
    <CENTER>買い物チェック
    <CE task=go dest=#$d1 value=1>[$c1]牛肉
    <CE task=go dest=#$d2 value=2>[$c2]レタス
    <CE task=go dest=#$d3 value=3>[$c3]なす
    <CE task=go dest=#$d4 value=4>[$c4]牛乳
    <CE task=go dest="xxxx.cgi" method=post postdata="c1=$c1&c2=$c2&c3=$c3&c4=$c4">送信
    <CE task=go dest=#preset>リセット
  </CHOICE>

  <NODISPLAY name=check>
    <ACTION type=accept task=prev vars="c$cb=*&d$cb=uncheck">
  </NODISPLAY>

  <NODISPLAY name=uncheck>
    <ACTION type=accept task=prev vars="c$cb=%20&d$cb=check">
  </NODISPLAY>

</HDML>

   買い物チェック   
1[ ]牛肉
2 [ ]レタス
3 [ ]なす
4 [ ]牛乳
5 送信
6 リセット

1を選択
→

   買い物チェック   
1[*]牛肉
2 [ ]レタス
3 [ ]なす
4 [ ]牛乳
5 送信
6 リセット

3を選択
→

   買い物チェック   
1 [*]牛肉
2 [ ]レタス
3[*]なす
4 [ ]牛乳
5 送信
6 リセット

↓1を選択

   買い物チェック   
1 [ ]牛肉
2 [ ]レタス
3 [ ]なす
4 [ ]牛乳
5 送信
6リセット

6を選択
←

   買い物チェック   
1[ ]牛肉
2 [ ]レタス
3 [*]なす
4 [ ]牛乳
5 送信
6 リセット

このデッキは、チェックボックスのように各項目の on/off を切り替え、最後に "c1" ～ "c4" の各値を xxxx.cgi に渡すものです。

preset という名前の NODISPLAY カードでは、 $d1 ～ $d4 と $c1 ～ $c4 の各変数の初期値を決めています。vars オプションの中身は、 "変数名=値" のペアが "&" で区切られて設定されています。このカードでは各チェックボックスの値（c1など）を "%20" （半角スペースをURLエンコードしたもの）に指定し、クリックされたときの行き先（d1など）を "check" に指定しています。このカードは表示されずに、 list という名前のカードに飛びます。

list という名前の CHOICE カードでは、 "key=cb" となっているので、選択肢の <CE> タグの value オプションは $cb という変数に格納されます。

list という名前の CHOICE カードで "牛肉" を選択すると、 check という名前のカードに飛びます。このとき、 check という名前の NODISPLAY カードでは、$cb が "1" と解釈されるので、<ACTION> タグの vars オプションは "c1=*&d1=uncheck" という風になります。これにより、 $c1 は "*" に、$d1 は "uncheck" に変更され、list と言う名前の CHOICE カードに戻ります。

list という名前の CHOICE カードでもう一度 "牛肉" を選択すると、今度は uncheck という名前のカードに飛びます。このとき、 uncheck という名前の NODISPLAY カードでは、$cb が "1" と解釈されるので、<ACTION> タグの vars オプションは "c1=%20&d1=check" という風になります。これにより、 $c1 は "%20" に、$d1 は "check" に変更され、list と言う名前の CHOICE カードに戻ります。

list という名前の CHOICE カードで "リセット" を選択すると、preset という名前のカードに飛び、各値がリセットされます。

list という名前の CHOICE カードで "送信" を選択すると、 xxxx.cgi に POST メソッドで変数が渡されます。

CGIに渡される変数は "c1" ～ "c4" で、これらにはそれぞれ、 "*" または "%20" の値が格納されています。複数の変数を同時に扱うことによって、 "1" または "0" の値を CGI に渡すことも可能ですが、 CGIで "*" → "1" , "%20" → "0" という処理をする方が簡単だと思います。

選択肢を増やしたい場合は、初期値設定と、 <CE> タグの個数を増やしてください。

公式サイト: EZweb ホームページを作ろう！
EZweb コンテンツを作ろう！
Openwave（旧Phone.com）
au ホームページ
 KDDI Group [ TU-KA ]
非公式サイト: Ｗ＠Ｐ解説ページ
 テイク・イット・EZweb（ケータイWatch）
WAP広場WAPでわっぷっぷ
CGIぽん: モバイルCGI研究（EZweb編）おおまかな話
 モバイルCGI研究（EZweb編）HDML失敗例

2002.09.14

HDMLによる入力フォームサンプル

目次

はじめに

テキスト入力フォーム（流れ作業タイプ）

テキスト入力フォーム（リストタイプ）

テキスト入力フォーム（アクティビティによる ENTRY カードの節約）

テキスト入力フォーム（変数生成による ENTRY カードの節約）

入力された URL でページ移動

単数選択（流れ作業タイプ）

単数選択（リストタイプ）

単数選択（アクティビティによる CHOICE カードの節約）

単数選択（変数生成による CHOICE カードの節約）

単数選択（ラジオボタン風）

複数選択（チェックボックス風）

関連リンク

このページの履歴