submit button

[Yasushi Shinjo]

新城＠筑波大学情報です。こんにちは。

In article <MeGdncKsEvc...@giganews.com>
e...@ceres.dti.ne.jp writes:
> 猪谷と申します。
> <form action="/cgi-bin/test.cgi" method="get">
> <input type="text" name="some_text" />
> <ul>
> <li><button type="submit" name="action" value="1234">Entry1</button></li>

<botton> なんてタグは、HTML の規格にありましたっけ？
使った事がないなあ。

> <input type="submit" name="action" value="1234" />

こちらが、普通ですよね。

> と記述してやると、MSIE でも期待の動作(押されたボタンに該当する value
> の値が action として伝わる)をしてくれるのですが、この場合ブラウザでは
> submit ボタンのラベルとして value の値が表示されることになってしまいま
> す。この値はユーザが見ても意味不明であるため、できるだけユーザの目に直
> 接触れることが無いようにしたいのです。

最近、私は次のようにしました。

(1) value には、ユーザにとって意味があるものにする。
(2) 送られてきた文字列から内部に必要な value を復元する。

復元は、そんなには難しくありません。文字コードを正規化して、
連想配列一発です。Ruby だとこんな感じ。

Rstate = [ "unseen", "dupdeleted", "ok", "reposting", "prof", "reposted" ]
RstateMnemonic = { "unseen"=>"採点中", "dupdeleted"=>"重複", "ok"=>"ＯＫ",
"reposting"=>"再提出", "prof"=>"教官採点中", "reposted"=>"再提出済み" }

def decode_rstate_mnemonic( nm )
return nil if( nm == nil )
nm = Kconv::toeuc(nm)
Rstate.each {|rs|
if( RstateMnemonic[rs] == nm )
return( rs )
end
}
return( "unknown" )
end

あら、ループしている。逆方向の連想配列しかないので、全部の要
素でループして探していますね。予め作っておけばいいんだけれど、
２つあると両方の整合性を取るのが面倒なので、片方しか作ってい
ませんね。

あと見栄えを調整するなら、スタイルシートを使うといいかと思い
ます。

<li> <input type="submit" name="action" value="1234" CLASS="entry1"/>
<li> <input type="submit" name="action" value="abcd" CLASS="entry2"/>
<li> <input type="submit" name="action" value="foobar" CLASS="entry3"/>

あるいは、

<li CLASS="entry1"> <input type="submit" name="action" value="1234"/>
<li CLASS="entry2"> <input type="submit" name="action" value="abcd"/>
<li CLASS="entry3"> <input type="submit" name="action" value="foobar"/>

で、ヘッダのどこかに、 input.entry1 { イメージは、これ;} と
かli.entry1 { イメージはこれ; }とか書きます。実は、スタイル
シートはまだ勉強している所で使ったことはないのですど、人に奨
めています。うまくいったら教えて下さい。

と、質問に答えるふりをして、質問してしまう。fj の基本ですよね。

> この様に、一つのフォームで複数の submit ボタン(ボタンのラベルはその
> formでの値と関係ないものが使いたい)を配置し、どの submit が押されたの
> か知りたいという場合、MSIE でもきちんと動作させるにはどのように form
> を書けばよいのでしょうか。

「１つのフォームで」という条件がなければ、form を分割して、
本当のパラメタは、hidden で渡す手はありますよね。

<LI> <form action="/cgi-bin/test.cgi" method="get">
<input type="hidden" name="action" value="1234">
<input type="submit" value="Entry1">
</form>
<LI> <form action="/cgi-bin/test.cgi" method="get">
<input type="hidden" name="action" value="abcd">
<input type="submit" value="Entry2">
</form>
<LI> <form action="/cgi-bin/test.cgi" method="get">
<input type="hidden" name="action" value="foobar">
<input type="submit" value="Entry3">
</form>

一応、ニュースグループとしては、発信側の話は、
fj.net.www.authoring ということになっているので、続きは
Followup-To: fj.net.www.authoring にします。ブラウザの設定で
直るという話でなくて、サーバ側の工夫でなんとかするということ
になるかと思います。

＼＼　新城　靖　（しんじょう　やすし）　＼＼
＼＼　筑波大学　電子・情報　　　　　　　＼＼

[mitsugu oyama]

　おおやまです。

Yasushi Shinjoさんの<YAS.03Au...@kirk.is.tsukuba.ac.jp>から
> <botton> なんてタグは、HTML の規格にありましたっけ？
　HTML4.01には botton 要素なんて定義されていません。Geckoは
標準に準拠しているので、botton タグ(?) を解釈しているとは思
えませんが。なにかの間違いでは?

--
mitsugu oyama
http://www.asahi-net.or.jp/~cu5m-ooym/

[ku...@gssm.otsuka.tsukuba.ac.jp]

久野です。

y...@is.tsukuba.ac.jpさん:

> > <li><button type="submit" name="action" value="1234">Entry1</button></li>
>
> <botton> なんてタグは、HTML の規格にありましたっけ？
> 使った事がないなあ。

<botton>はないけど<button>...</button>はありますよ。

HTML 4.01 Strict DTDから抜粋。 久野
---

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
<!ELEMENT BUTTON - -
(%flow;)* -(A|%formctrl;|FORM|FIELDSET)
-- push button -->
<!ATTLIST BUTTON
%attrs; -- %coreattrs, %i18n, %events --
name CDATA #IMPLIED
value CDATA #IMPLIED -- sent to server when submitted --
type (button|submit|reset) submit -- for use as form button --
disabled (disabled) #IMPLIED -- unavailable in this context --
tabindex NUMBER #IMPLIED -- position in tabbing order --
accesskey %Character; #IMPLIED -- accessibility key character --
onfocus %Script; #IMPLIED -- the element got the focus --
onblur %Script; #IMPLIED -- the element lost the focus --
%reserved; -- reserved for possible future use --
>

[mitsugu oyama]

おおやまです。

わたしの<3f3a4309$0$8436$44c9...@news3.asahi-net.or.jp>から
> 　HTML4.01には botton 要素なんて定義されていません。Geckoは
　おもいっきりDTDに書かれていました。button 要素は、HTML
4.01 に含まれています。ここに間違いを訂正させていただきま
す。
　つまり Gecko の動作が正しいということになります。

[Eiichiro ITANI]

猪谷です。フォローありがとうございます。

y...@is.tsukuba.ac.jp (Yasushi Shinjo) writes:

> In article <MeGdncKsEvc...@giganews.com>
> e...@ceres.dti.ne.jp writes:

>> <li><button type="submit" name="action" value="1234">Entry1</button></li>
>
> <botton> なんてタグは、HTML の規格にありましたっけ？
> 使った事がないなあ。

すでにいくつかフォローがついてありますように、HTMLの規格としてあるので
す、はい。

>> と記述してやると、MSIE でも期待の動作(押されたボタンに該当する value
>> の値が action として伝わる)をしてくれるのですが、この場合ブラウザでは
>> submit ボタンのラベルとして value の値が表示されることになってしまいま
>> す。この値はユーザが見ても意味不明であるため、できるだけユーザの目に直
>> 接触れることが無いようにしたいのです。

このフォームが動的に生成されるようになっておりまして(DBのレコードの一
部を表示する)、value のところにレコードのプライマリキーの値を埋め込む
ようにしていたわけです。

<li> entry_n のレコード値A
<button name="view1" value="entry_nの主キー">ビュー1を表示</button>
<button name="view2" value="entry_nの主キー">ビュー2を表示</button>
<button name="modify"
value="entry_nの主キー">該当レコードの修正</button>
</li>

HTMLの要点だけ抜き出すと、こんな感じでしょうか。テーブルからいくつかの
要素をリストで表示して、リストの各エントリ毎にアクションのためのボタン
を配置、飛び先では押されたボタンに該当するアクションを実行するという感
じです。

こういう用途だと button が一番しっくり来るわけですが、少なくともMSIEで
は理解不能な挙動になってしまって全く使い物になりません。また w3m/0.4.1
だと button が解釈されないようで、これも問題なのですが。
# lynx、konqueror、dillo だと多少表示面での問題はあるにせよ、動作はし
# てくれます。

> 最近、私は次のようにしました。
>
> (1) value には、ユーザにとって意味があるものにする。
> (2) 送られてきた文字列から内部に必要な value を復元する。
>
> 復元は、そんなには難しくありません。文字コードを正規化して、
> 連想配列一発です。Ruby だとこんな感じ。

私の場合、主キー値はかなり長くなる場合があるので、ボタンのラベルに

「ビュー1を表示 123kdadie128412112132」

てなものが表示されるとなんだなぁ、というのと、飛び先でなるべく簡単にア
クションを判定したいなぁ、というのもあります(飛び先のページでは連想配
列や、文字列の分割をきれいに記述しにくい言語を使っているもので)。

ちなみに

<input type="image" action="submit" name="action" value="1234" />

この書き方の場合、value の値をサーバに渡すべきかどうか、というのはHTML
4.01 の規格を見る限りとくに指示はないようで、type="image" を使うのもあ
まりよろしくないらしい。konqueror(3.1.3)、w3m(0.4.1)、MSIE(6.0) は
value を渡してくれないようです。よってこの目的では使えない。
# lynx では type="image" alt="text" で指定した text を表示してくれない…
# なぜ?

> あと見栄えを調整するなら、スタイルシートを使うといいかと思い
> ます。

が、動かないのではどうしようもないので、<input type="submit">の見た目
を強制的に変更する方法を試してみました。

---x8------x8------x8------x8------x8------x8---

<style type="text/css">
#subm1 {
background-image: URL(entry1.png);
width: 60px; height: 20px;
font-size: 0px;
}
</style>

…略…

<li><input id="subm1" type="submit" name="action" value="1234" /></li>

---x8------x8------x8------x8------x8------x8---

ううーーん、font-size: 0px あたりが非常に美しくない、無理やりだ、とい
う感じはあるものの、一応スタイルシート対応ブラウザでの見てくれを上書き
してしまうことはできますね。

背景画像だけ表示して、text は表示しない、なんて指定ができると良いんで
すが、visibility を hidden にすると submit ボタン自体表示されなくなる
ので、これはダメでした。

ともあれ、一つの手として覚えておきます。
# ただ、スタイルシートの書き方、ブラウザの対応状況などによってえらいこ
# とになってしまいそうな感じがぎゅんぎゅんします (^^;)

> と、質問に答えるふりをして、質問してしまう。fj の基本ですよね。

良い伝統だと思います、はい (^^)

> 「１つのフォームで」という条件がなければ、form を分割して、
> 本当のパラメタは、hidden で渡す手はありますよね。

先日作成したページではこの方法でも問題なかったので、ボタンの数だけ
<form></form> を配置するというあまり美しくない方法を採用しました。

が、

入力1 [____] 入力2 [_____] … 入力n [_____]

・ item_i [action_1] [action_2]
・ item_j [action_1] [action_2] [action_3]
・ item_k [action_1] [action_2]
…

なんていうフォームだと、ちと大変なことになってしまいます。

なんとか素直に <button> 使えないものかなぁ、と思うんですが、やはりMSIE
からの利用を考えた場合には <button> は全くダメ、という結論しか出ないの
でしょうか。

こうやればよいのではなど、もしなにかアイデアありましたら、よろしくお願
いします。

> 一応、ニュースグループとしては、発信側の話は、
> fj.net.www.authoring ということになっているので、続きは
> Followup-To: fj.net.www.authoring にします。ブラウザの設定で
> 直るという話でなくて、サーバ側の工夫でなんとかするということ
> になるかと思います。

ありがとうございます。Followup-To: f.n.w.authoring の指示に従います。

--
O
o ●-● 猪谷 英一郎 == Eiichiro Itani
-ゝ e...@ceres.dti.ne.jp

[OGAWA KenIchi]

小川と申します。

e...@ceres.dti.ne.jpさんの記事<MeGdncKsEvc...@giganews.com>から引用します：

> <form action="/cgi-bin/test.cgi" method="get">
> <input type="text" name="some_text" />
> <ul>

> <li><button type="submit" name="action" value="1234">Entry1</button></li>

> <li><button type="submit" name="action" value="abcd">Entry2</button></li>
> <li><button type="submit" name="action" value="foobar">Entry3</button></li>
> </ul>
> </form>

上の代わりに

<form action="/cgi-bin/test.cgi" method="get">
<input type="text" name="some_text" />
<ul>

<li><input type="submit" name="1234" value="Entry1" /></li>
<li><input type="submit" name="abcd" value="Entry2" /></li>
<li><input type="submit" name="foobar" value="Entry3" /></li>
</ul>
</form>

のように書くのでは駄目ですか？
--
小川建一 mailto:ken...@ice.email.ne.jp
++

[Hirohisa Kuwata]

桑田％元あきはばら です。

かなり遅いフォローとなりましたが、お役に立てればと思い、ポスト
してみます。

# しかし、久々だなぁ、NetNews:)

Eiichiro ITANI <e...@ceres.dti.ne.jp> wrote in message
<O9-dnf7DOfH...@giganews.com>...

>こうやればよいのではなど、もしなにかアイデアありましたら、よろしくお願
>いします。

ちょっと的外れかもしれませんが、以前私が1つのformに複数のbutton
を使用し、押下されたbuttonによって次のページに渡したい値を変更する
場合はこうしました。手元にソースがないのでうろ覚えですが……。

# そもそも<form></form>の中にはsubmitは1つしか使えないのでは
なかったでしたっけ？ 私の勘違いかもしれませんが……。

1. input type="button" として、buttonを複数配置。nameは全て違う
値を設定します。buttonが押されたら、JavaScriptのfunctionに飛
ばす（全button同じfunctionに飛ばし、引数には設定したい値を
セット）。
2. submitボタンはなし。
3. hiddenを1つ用意する。
4. formのactionには飛び先のcgi等を設定。

こうすると、いずれかのbuttonを押した時点でJavaScriptのfunctionに
飛ぶので、そのfunctionでは渡された値をhiddenの値に設定します。"ど
のbuttonが押されたか" も次のcgiに渡したい場合は、もう1つhiddenを用
意してそこにbuttonのnameなりvalueなりを設定します。
その後、function内でsubmitしてあげれば値は綺麗に渡るかと。

サンプルソースが欲しい場合は言って下されば。

ではでは。

--
Hirohisa Kuwata
"The Velvet Fields" http://village.infoweb.ne.jp/~umajets/
mailto:uma...@nifty.com (private)

[OGAWA KenIchi]

小川と申します。

Hirohisa Kuwataさんの記事<bib388$8d$1...@news521.nifty.com>から引用します：

> # そもそも<form></form>の中にはsubmitは1つしか使えないのでは
> なかったでしたっけ？ 私の勘違いかもしれませんが……。

HTML 4.01 Specification
http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.2.1

内の submit buttons の説明に

　　A form may contain more than one submit button.

とあるので、1つしか使えないということはないと思います。

> 1. input type="button" として、buttonを複数配置。nameは全て違う
> 値を設定します。

> 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"ど
> のbuttonが押されたか" も次のcgiに渡したい場合は、もう1つhiddenを用
> 意してそこにbuttonのnameなりvalueなりを設定します。

（<button>ではなく）<input>を使うとIEでも押されたボタンの情報だけが
サーバへ渡されるようなので、"どのbuttonが押されたか" という情報を
hiddenに持たせる必要はないのではないでしょうか。

[Eiichiro ITANI]

猪谷です。
諸々遅くて申し訳ないです。

引用文前後させています。

Hirohisa Kuwata <uma...@nifty.com> writes:

> # そもそも<form></form>の中にはsubmitは1つしか使えないのでは
> なかったでしたっけ？ 私の勘違いかもしれませんが……。

その辺りも自信がないので HTML 規格的にはどうなのかな、と思っていたので
すが、ちと私のつたない調査能力ではわかりかねました。

とはいえ、結構な数の UA で複数の<button type="submit">が動作すること、
問題の MSIE でも button のかわりに <input type="submit"> を複数配置し
た場合「正常に」機能するようなので、一つしかダメ、という制約はとくに設
けられていないんじゃないかと勝手に思い込んだりしています。

> Eiichiro ITANI <e...@ceres.dti.ne.jp> wrote in message
> <O9-dnf7DOfH...@giganews.com>...
>
>>こうやればよいのではなど、もしなにかアイデアありましたら、よろしくお願
>>いします。

> 1. input type="button" として、buttonを複数配置。nameは全て違う

> 値を設定します。buttonが押されたら、JavaScriptのfunctionに飛
> ばす（全button同じfunctionに飛ばし、引数には設定したい値を
> セット）。
> 2. submitボタンはなし。
> 3. hiddenを1つ用意する。
> 4. formのactionには飛び先のcgi等を設定。

なるほど。それも手ですね。

> サンプルソースが欲しい場合は言って下されば。

そういうことを行っているページを見た気がします。JavaScript の勉強も兼
ねて、おいおい勉強してみようと思いますので、お気持ちだけでありがたく。

OGAWA KenIchi <ken...@ice.email.ne.jp> writes:

> <form action="/cgi-bin/test.cgi" method="get">
> <input type="text" name="some_text" />
> <ul>
> <li><input type="submit" name="1234" value="Entry1" /></li>
> <li><input type="submit" name="abcd" value="Entry2" /></li>
> <li><input type="submit" name="foobar" value="Entry3" /></li>
> </ul>
> </form>
>
> のように書くのでは駄目ですか？

CGI側で、変数名の空間を走査しなければならないのがなんかイヤだなぁ、と
も思ったんですが、考えてみればこのための処理はそんな大層なことになるわ
けでもないですね。

ボタンが送り出すべき値と、同一フォーム内で用いられるsubmit以外の要素に
用いる変数名がかち合わないように設計してやりさえすればよいわけですね。
# はじめは何となく「やだなぁ」で却下だったんですが、これを読んで改めて
# 考えてみるとそんなに嫌うべき理由もないことに思い至りました。

どちらも参考になりました。
ありがとうございます。