リセット機能な画像ボタンって存在するのですか？

nuts [E-Mail] 2000/03/30(木) 10:09:38
<input type = image src=～>って機能的にはsubmit処理ですよね？それでは機能的にreset処理が可能な画像ボタンをつくりたいんですが、どのような方法がありますか？

H&A 2000/03/30(木) 10:31:44
JavaScript を使う方法ですが…

<input type=image src="foo.jpg" onClick="this.form.reset(); return false;">

というのはどうでしょうか。
JavaScript が無効になっている／使用できない状態だと submit されてしまうのが問題ですが…

<img src="" onClick="document.フォーム名.reset();"> を使う方法も考えたのですが、「とほほの WWW 入門」の「HTML サポート状況一覧」(http://www.tohoho-web.com/wwwtags.htm) によると Internet Explorer 4.0 以降でしかサポートされていないようです。

H&A 2000/03/30(木) 10:37:52
あれ、Netscape Communicator 4.5 ではクリックしても submit してしまう…
と思っていたら、先の「HTML サポート状況一覧」では <input type=image> の onClick 属性については何も記述がありませんでしたね。

残念ながら、<input type=image onClick=""> も <img onClick=""> も Internet Explorer 4.0 以降限定のようです。

たかぴー 2000/03/30(木) 10:55:35
なら、
<A HREF="#" onClick="this.form.reset(); return false;"><IMG SRC="foo.jpg" BORDER="0"></A>
でいいのでは

shin' 2000/03/30(木) 10:58:39
><A HREF="#" onClick="this.form.reset(); return false;"><IMG SRC="foo.jpg" BORDER="0"></A>
>でいいのでは

これできたら、
<a href="javascript:return this.form.reset();">
にしてほしいです！！
hrefとonClickを同時に書くとブラウザによっては
落ちることがあります。
#書いても同様。

H&A 2000/03/30(木) 11:01:26
それもそうですね。
失礼いたしました。

たかぴー 2000/03/30(木) 11:05:19
> これできたら、
> <a href="javascript:return this.form.reset();">
> にしてほしいです！！

やっぱりその方法のほうがいいですよね
とほほ氏のサンプルって#になってるので、なんらかの理由があるのかと思い#にしてみました。
別に JavaScript: で呼び出してもOKなんですよね（確認）

なまはげ 2000/03/30(木) 12:33:34
> <a href="javascript:return this.form.reset();">

これ、HTML4.0xでは文法違反なんですよ。
そういうことに無頓着な人ならいいんですが。

shin' 2000/03/30(木) 17:27:41
>これ、HTML4.0xでは文法違反なんですよ。

なるほど。
これで、この記述のサイトが多い理由が
わかりました。

安全性をとるか正しいソースか。
このへんはプログラマ（Webデザイナ）の
判断ですかね。

H&A 2000/03/30(木) 17:46:14
本題から外れてしまうのですが…

> > <a href="javascript:return this.form.reset();">
> これ、HTML4.0xでは文法違反なんですよ。

HTML 4.01 Strict DTD (http://www.w3.org/TR/html4/strict.dtd) と RFC2396 (URI) を読んでみたのですが、"URI 中に空白が入っている" 以外の文法エラーが発見できませんでした。

もし他の文法違反個所をご存知でしたら、ご教授いただけないでしょうか。

コウノトリ 2000/03/30(木) 18:20:33
javascript: だとコロンが付いてるからスキームと見なされますよね？
HTML4.01では定義されていないスキームなんじゃないですか？

H&A 2000/03/30(木) 18:30:50
> javascript: だとコロンが付いてるからスキームと見なされますよね？

ああ、なるほど。
文法違反ではなく、「"javascript" というスキームは IANA に登録されたものではない」という意味ですね。
IANA の "URL Schemes" (http://www.isi.edu/in-notes/iana/assignments/url-schemes) をみてみましたが、確かにそのとおりでした。

> HTML4.01では定義されていないスキームなんじゃないですか？

あれ、HTML 4.01 でスキームの定義ってしてましたっけ？

コウノトリ 2000/03/30(木) 19:51:38
>あれ、HTML 4.01 でスキームの定義ってしてましたっけ？
仕様書には詳しくないのですが、Another HTML-lintで試したら、やはり怒られました。

H&A 2000/03/30(木) 20:12:42
> 仕様書には詳しくないのですが、Another HTML-lintで試したら、やはり怒られました。

確かに、WAI 技術文書 (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#scripts-gt) には「JavaScript が動作しない環境の人がリンクをたどれないので、スキームには "javascript" を使ってはなりません」と書いてありますね。
しかし、今回の例では <A> はダミーなので構わないのでは。

…本題から外れすぎてしまいました。
関係ない話を長々としてしまってすみません＞nuts さん

H&A 2000/03/30(木) 20:18:57
現在のところ、「リセット機能な画像ボタン」の実現法としては

1) <input type=image src="foo.jpg" onClick="this.form.reset(); return false;"> とする。(from H&A、IE4 以降限定)

2) <A HREF="#" onClick="this.form.reset(); return false;"><IMG SRC="foo.jpg" BORDER="0"></A> とする。(fron たかびーさん)

3) <a href="javascript:return this.form.reset();"><IMG SRC="foo.jpg" BORDER="0"></a> とする。（from shin' さん）

があるわけですね。2) と 3) はアンカータグの記述方法が異なるだけですので、実質的には 2 種類ですか。

tetti 2000/04/02(日) 10:16:41
HTML 4.0では素直に
<button type="reset"><img src="./reset.gif" alt="リセット" width="50" height="20"></button>
で、出来ますよね。

この場合、画像がボタンになるんじゃなくて、普通のボタンの中に画像が入る感じです。
画像自体をボタンにすることは、考えてないみたい。
いちお、スタイルシートで誤魔化すとかできますが。↓
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">

</style>

<button>は今のところネスケが未対応だけど、次版では対応するでしょう。しないとね。

[上に] [前に] [次に]