制作者の活動(PR)。

堀北真希ちゃんにうさ耳を着けた制作者のオリジナルキャラクタ。次ぎ
主な作品

堀北真希ちゃんのボシュロム社TVCM出演に因んだ、堀北真希うさぎ(うさ耳女子大生)のコンタクトの仮想CM動画

HDMLでの入力フォーム関連要素。

EZウェブの旧型機種（WAP 1.0端末)のネイティヴ言語であるHDMLでは、入力フォームをHTMLの<form>要素とは全く異なる方法で記述しなければなりません。

HDMLでの入力フォーム関連要素・目次。

HDMLでの入力フォームの概要。

HDMLでは、HTMLとは根本的に異なった方式で入力フォームを実現します。

HDMLでは、基本的に一つのファイル(デッキ)に、複数のページ(カード)を入れられます。

通常、<display>要素(表示カード)でコンテンツを表しますが、入力フォームの各項目は、特殊なカード(入力用カード)を用いて実現します。

基本的に、１入力用カードには１項目しか入力出来ません。

実際に利用出来る入力用カード。

入力用に使えるカードは、以下の二つです。

<entry>要素…文字列入力カード
任意の文字列を入力出来るカードです。
<choice>要素…選択入力カード
予め決めておいた項目から一つを選択できるカードです。

この二つのカードを組合わせて、入力フォームを実現させます。

入力用カードからデータを受取るには。

入力用カードからデータを受取るにはどうしたらいいでしょうか。

その答えは、変数を用いる事です。

変数はHTMLには無い概念ですが、HDMLでフォームを実現するには欠かせない概念です。

予め、入力用カードに入力された値を入れる変数を指定しておくと、その変数に入力された値が代入されます。

入力用カードのフォーマット。

<entry>要素…文字列入力カード。

<entry>要素は、任意の文字列を入力出来るカードです。

考えられるフォーマットは以下の通りです。

ここで、(メッセージ)は実際に表示させたいメッセージを記述します(例：名前を入力して下さい)。

また、<action>要素は<choice>要素でも出てくるので、<choice>要素の解説の後に纏めて解説致します。

<entry>要素の主な属性。

<entry>要素ではkey属性で入力された文字列を収める変数名を指定します。

変数名は英字で始まる英数字列です。

また、name属性でカードの名前を決めておきます。

この名前をURLに続けて記述する事で、この名前を持つカードへのアクセスが可能になります。

この他にも、いくつかの属性があります。

主なものを挙げておきましょう。

具体的な<entry>要素。

具体的には、以下のようになるでしょう。

通常の文字列入力。
<entry key="name" name="input1">
    <action type="accept" task="go" dest="#input2" label="次へ">
    <action type="soft1" task="go" dest="#top" label="戻る">
    お名前を入れて下さい。
    </entry>
パスワード入力。

<entry>要素にnoecho属性が付く事に注意して下さい。

<entry key="name" name="input2" noecho="true">
    <action type="accept" task="go" dest="#input3" label="次へ">
    <action type="soft1" task="go" dest="#input1" label="戻る">
    パスワードを入れて下さい。
    </entry>

<choice>要素…選択入力カード。

<choice>要素は、予め用意した選択肢から一つを選択するカードです。

考えられるフォーマットは以下の通りです。

ここで、(メッセージ)は実際に表示させたいメッセージを記述します(例：以下からお撰び下さい)。

また、<action>要素は<entry>要素でも出てきたので、この要素の解説の後に纏めて解説致します。

<choice>要素の主な属性。

<choice>要素ではkey属性で選択肢に対応するクエリ値を収める変数名を指定します。

変数名は英字で始まる英数字列です。

また、name属性でカードの名前を決めておきます。

この名前をURLに続けて記述する事で、この名前を持つカードへのアクセスが可能になります。

<ce>要素…選択肢。

各選択肢は<ce>要素を頭に付けます。

value属性で、当該選択肢が撰ばれた場合に変数に代入されるべきクエリ値を指定します。

例えば、以下の場合、一番目の選択肢が指定された場合、変数には「Apple」が代入され、二番目が指定されたら「Orange」が代入されます。

<action>要素。

<entry>要素及び<choice>要素開始タグ直後の<action>属性は、端末のソフトキーによる動作を指定します。

<entry>カード及び<choice>カードに入った場合、閲覧者は以下ように考えると予想出来ます。

この為、通常acceptキーが押下されたら次のステップへ進み、soft1キーが押されたら前のステップへ戻るようにしております。

<action>要素はカードの開始タグ直後にのみ記述出来る要素で、type属性で対応するソフトキー、task属性で処理方法(通常はtask="go"属性にする)、dest属性で移動先のURL、label属性で画面に表示させる文字列を指定します。

例えば、以下のように書けるでしょう。

この場合、acceptキーを押されたら、「next」カードに移動し、soft1キーが押されたら「top」カードに移動するようになります。

<action>要素のその他の用途。

CGIへのデータ送信。

<action>要素は、ソフトキーによる動作を指定しますが、またCGIにデータを送信するのにも用います。

データを送信する場合、dest属性には送信先CGIのURLを指定します。

GETメソッドを用いる場合。

この場合、dest属性で指定するURLの後ろにクエリで記述します。

具体的には、以下のようになります。

この様に、実際に<entry>要素及び<choice>要素で指定した変数名を「$(」「)」で挟む事で、変数に入れられたクエリ値がdest属性の値に反映されるようになります。

POSTメソッドを用いる場合。

この場合、method="post"属性とpostdata属性を加えます。

postdata属性は、実際にCGIにポストされるクエリを記述するものです。

具体的には、以下のようになります。

この様に、実際に<entry>要素及び<choice>要素で指定した変数名を「$(」「)」で挟む事で、変数に入れられたクエリ値がpostdata属性の値に反映されるようになります。

変数の設定。

もう一つ、<action>要素には変数に値を代入する機能もあります。

この為には<action>要素にvars属性を付けます。

vars属性の書式は以下の通りです。

この様に、複数の変数に値を入れたい場合は、代入式を「&」で繋ぎます。

尚、変数の値に日本語文字を入れる場合は、URLエンコードしておく必要があります。

<nodisplay>要素…変数の初期化などを行う非表示カード。

HDMLでは入力フォームのデータのやり取りに変数を用いますが、その変数を初期設定するには、<nodisplay>要素による非表示カードを使います。

書式は以下の通りです。

<action type="accept">要素のvars属性で変数に代入する事が出来ます。

尚、<nodisplay>カード内の<action type="accept">要素はacceptキーを押下しなくても自動的に実行されます。

実際の入力フォームの組み方。

実際に入力フォームを組む場合、以下のようにすればよいでしょう。

入力項目が一つしか無いフォームの場合。

この場合、入力用の<entry>要素及び<choice>要素から直接送信しても良いでしょう。

例えば、POSTメソッドなら以下のようにすれば良いでしょう。

<nodisplay name="enterPassword">
    <action type="accept" task="go" dest="#enterPwd2" vars="pwd=">
    </nodisplay>

<entry key="pwd" name="enterPwd2" noecho="true">
    <action type="accept" task="go" dest="http://www.uso800.ne.jp/cgi/certify.cgi" method="post" postdata="password=$(pwd)" label="認証">
    <action type="soft1" task="go" dest="prev.hdml" label="戻る">
    パスワードを入力して下さい。
    </entry>

この場合、先行する<nodisplay>要素でパスワードを収めておくpwd変数に空文字列を代入しておき、その上で後続の<entry>カードに移動します。

そして、<entry>カードで入力されると、acceptキーの押下で当該パスワードが送信される事になります。

入力項目が複数あるフォームの場合。

この場合、一番目の項目から順番に入力するようにして、最後の入力が終わったら送信すると形で良いでしょう。

以下に、HTMLの入力フォーム関連要素で紹介したフォームをHDMLで書き直してみました。

<nodisplay name="BBS">
    <action type="accept" task="go" dest="#form" vars="name=&mail=&sex=&place=&text=">
    </nodisplay>

<entry key="name" name="form">
    <action type="accept" task="go" dest="#form2" label="次へ">
    <action type="soft1" task="go" dest="prev.hdml" label="戻る">
    お名前を入力して下さい。
    </entry>

<entry key="mail" name="form2" emptyok="true">
    <action type="accept" task="go" dest="#form3" label="次へ">
    <action type="soft1" task="go" dest="#form" label="戻る">
    メールアドレスを入力して下さい(省略可)。
    </entry>

<choice key="sex" name="form3">
    <action type="accept" task="go" dest="#form4" label="次へ">
    <action type="soft1" task="go" dest="#form2" label="戻る">
    性別を撰んで下さい。
    <ce value="m">男性
    <ce value="f">女性
    </choice>

<choice key="place" name="form3">
    <action type="accept" task="go" dest="#form5" label="次へ">
    <action type="soft1" task="go" dest="#form3" label="戻る">
    お住まいの地域を撰んで下さい。
    <ce value="North">北海道・東北
    <ce value="East">関東・甲信越
    <ce value="Central">中部・北陸
    <ce value="West">関西・中四国
    <ce value="South">九州・琉球
    <ce value="Foreign">日本国外
    </choice>

<entry key="text" name="form5" emptyok="true">
    <action type="accept" task="go" dest="http://www.uso800.ne.jp/cgi/bbs.cgi" method="post" postdata="name=$(name);mail=$(mail);sex=$(sex);place_=$(place);text=$(text)" label="投稿">
    <action type="soft1" task="go" dest="#form4" label="戻る">
    最後に、本文を入力して下さい。
    </entry>

HDMLでは難しいフォーム。

HDMLでは、<entry>要素と<choice>要素しか利用出来ません。

これだけでも大抵の事は出来ますが、複数選択が可能な<input type="checkbox">要素や<select multiple="multiple">要素を再現するのはちょっと難しいです。

複数選択を出来ないようにするなど工夫すると良いでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com