リセット機能な画像ボタンって存在するのですか?
[上に]
[前に]
[次に]
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">
<!--
button {
border:none; /*枠を消す*/
background-color:#ffffff; /*ページの背景色と合わせて誤魔化す*/
}
-->
</style>
<button>は今のところネスケが未対応だけど、次版では対応するでしょう。しないとね。
[上に]
[前に]
[次に]