• ベストアンサー

「送信」「クリア」ボタンを画像で表示したい

formタグを使ったお問合せフォームを作っているのですが、「送信する」ボタンと「クリアする」ボタンを画像で表示させる方法を教えてください。現在 <INPUT name="submit" TYPE="image" id="submit" SRC="xxx.jpg" alt="送信する" WIDTH="110" HEIGHT="25" BORDER="0"> <INPUT name="reset" TYPE="image" id="reset" src="xxx.jpg" alt="クリア" width="75" height="25" border="0"> というように記述しているのですが、クリアボタンを押しても「送信」されてしまいます。 type="image"は送信だけでしょうか、他にありましたら教えてくださいm(_ _)m

  • HTML
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

#2です。 すみません、新着のページに飛んでしまいますね。 ↓こちらのURLです。 URLが長いので、つなげて入力してみてください。 http://www.gac.jp/article/index.php? stats=question&command=msg&category=9&id=8715

mirothorp
質問者

お礼

有難うございました。 結果的には <button type="reset" style="width: 75px; height: 25px; border: none;"><img src="img/xxx.jpg"></button> でクリアボタンが出来ました。

mirothorp
質問者

補足

最終的にはこちらのページでの情報が役立ち、解決できました。有難うございました!

その他の回答 (3)

  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.4

<INPUT name="reset" TYPE="image" id="reset" src="xxx.jpg" alt="クリア" width="75" height="25" border="0"> を <img src="xxx.jpg" name="reset" width="75" height="25" border="0" onclick="document.forms[0].reset();"> に換えるだけでいけると思う。 フォームのインデックスは環境に合わせてください。

mirothorp
質問者

補足

上記の通り換えてみたのですが、何も起こらず「ページでエラーが発生しました」とエラー表示が出ていました。「フォームのインデックスは環境に合わせてください」という部分がよく理解出来てなくて、そのせいでしょう…まだまだ勉強不足ですみません。 アドバイス頂きほんとに有難うございましたm(_ _)m

回答No.2

検索してみたところ、以下のURLに同じ内容がありました。 実際に確認していませんが、ご参考に… http://www.gac.jp/article/index.php?stats=question&category=9&id=8715&command=msg&page=all Javascriptを利用するようですね。 ヒントになれば幸いです。

回答No.1

<INPUT name="reset" type="reset" value=" 表示文字列 " id="reset" style="background-image:url('xxx.jpg');"> ではどうでしょうか?TypeをImageとしますと送信になってしまうようです。 TypeをResetとするしかないようで・・・ただこれですと 画像の大きさ指定できないんですよね、、、すいません。 回答になってないですよね・・・次の方お願いします(--;

mirothorp
質問者

補足

回答有難うございます! 試してみたのですが、やっぱり画像の大きさが指定できず、グレーの枠付きになってしまいました。でも勉強になりました。有難うございますm(_ _)m

関連するQ&A

  • メールフォームでの送信確認から修正ボタンで戻る方法

    現在、メールフォームを作っています。 とりあえず完成し、動作は全く問題ありません。 ただ、「送信ボタン」と確認画面からの「修正する」ボタンを画像にしています。 「修正する」ボタンを画像にするとなぜか送信が完了してしまいます。 下記は「修正する」ボタンのソースです。 <input type="image" name="check0" value="修正する" src="images/form_btn_back.jpg" width="100" height="35" alt="修正する"> 念のため「送信ボタン」のソースも書いておきます。 <input name="submit" type="image" value="この内容で送信する" src="images/form_btn_send.jpg" alt="この内容で送信する"> 「修正する」ボタンのtypeをsubmitにすると前の入力画面に戻ります。 原因がわからないので詳しい方、ご教授をお願いいたします。

  • ”送信ボタン” ”クリアボタン” について

    困ってます。 ”送信 クリアボタン” <input type="submit" value="送信" name="B1"><input type="reset" value="リセット" name="B2"> これを2つの画像にした場合、送信アイコン、クリアアイコンにはどう記述すればOKでしょうか? 困ってま~~~~す。

    • ベストアンサー
    • CGI
  • ボタンに画像を使えません

    お世話になります。 セレクトボックスでリンクする(ボタン付き) http://www.tagindex.com/javascript/link/select2.html 上記のサイトの「input type="button"」のボタンでリンクすることはできたのですが、 <input type="image" onClick="jump()" src="画像.gif" alt="" width="201" height="46" border="0" onmouseover="this.src='画像_on.gif'" onmouseout="this.src='画像.gif'"> ↑のようにtypeをimageにして画像をボタンに使おうとしますと、 「?select=&x=92&y=33」とURLの末尾に追加されるだけでリンクができません。 上記サイトのjavascriptを「input type="image"」のボタンで使用するには どのようにすればよろしいでしょうか。 よろしくお願いいたします。

  • フォームのボタンをsubmitから画像にしたけど表示されない

    submitから独自の画像ボタンにしようとして 下記のように記述しましたがブラウザで 確認したら表示されませんでした。 <INPUT TYPE="image" src="***.gif" VALUE="submit" alt="検索" border="0"> 他に何か記述が必要なのでしょうか? よろしくお願い致します。

    • ベストアンサー
    • HTML
  • フォームのボタンを画像にする方法?

    フォームのクリアや送信ボタンを画像に置き換えたいのですがどうすれば良いのでしょうか? これを画像ボタンにしたいのですが... <input type="reset" value="クリア"> <input type="submit" value="送信" > お手数ですがお知らせ下さい。

  • メールフォームの送信ボタンをアイコンにする方法

    お世話になります。 ホームページビルダー11で作成している、HTML初心者です。 メールフォームを作成するために色々調べてやってみたのですが、 送信ボタンを<input type="submit">のデフォルト表示ではなく、 アイコンを使用したいのですが、なかなかできません・・・。; 他に、 <BUTTON type="submit"> <IMG src="***.jpg" alt="送 信"> </BUTTON> としたらデフォルトボタンの上にアイコンが乗っかるような表示に なってしまいました。;; あと、"submit"のほかに"reset"も作成したいです。 アイコンを使用して送信ボタン、リセットボタンを作るには、 どうしたらよいでしょうか? お手数ですが、ご教示お願いいたします。<(_ _)>

  • 「カートに入れる」ボタンを画像にしたい

    Pwebcart というフリーのスクリプトでショッピングカートを設置しています。 「カートに入れる」というボタンを画像に差し替えたいのですが、どのように記述したら良いのか教えてください。 "<input type=\"submit\" value=\"カートに入れる\">"; これを以下のように試しましたが失敗。(--;; ↓ "<input type=\"image\" src="images/xxx.gif" border="0">" 失敗例がお恥ずかしい限りですが、お分かりになる方、よろしければご教授ください。

    • ベストアンサー
    • PHP
  • 送信ボタンができない?

    こんにちは。Macに付属の「SimpleText」で、HTMLを記述してホームページを作成しようとしています。 <form>タグ内で、   <input type=submit alt=送信>   <input type=reset alt=リセット> としましたが、送信ボタンやリセットボタンができません。(IEで見ても、ボタン自体が現れません。) <form action="mailto:(メールアドレス)"> としているのですが、これがまずいのでしょうか? (CGIを使用しないといけないのでしょうか?) なお、OSは9で、OS8からのアップグレードです。(初代iMac使用) ご存知の方、ぜひご意見をお願いいたします!

    • 締切済み
    • Mac
  • ボタンの判定が出来ません?

    print "<P><INPUT TYPE=submit NAME=\"送信\" VALUE=\"送信\"> <INPUT TYPE=submit NAME=\"削除\" VALUE=\"削除\"> <INPUT TYPE=reset NAME=\"クリア\" VALUE=\"クリア\">\n"; 上記のようなコーディングで、ボタンを表示させてますが、 どちらのボタンを押しても、送信しか受け取れません。 どこで、何をどのようにコーディングすれば読みとれるのでしょうか?

    • ベストアンサー
    • Perl
  • 画像の切り替えボタンについて教えてください

    サムネイルをクリックするごとに、拡大画像がそれらの下に表示されるページを作っています。 拡大された画像をクリックすると、再びサムネイルだけの状態に戻ります。 そこで質問なのですが、拡大された状態の時に、次の画像に進むボタンと戻るボタンを表示させ、実際に切り替えることができ、 サムネイルだけの状態の時にはボタンが表示されないといったものを作る場合、どういった様にすればいいのでしょうか。 いろいろ試してはみたのですが、当方初心者ですのでなかなか動いてくれません。 以下は進む、戻るボタン無しのソースです。 ---------------------javascript------------------------ // resizeImg() function resizeImg(imgId,width,height) { var objStr,obj; if(document.images) { objStr = 'document.' + imgId; obj = eval(objStr); obj.width = width; obj.height = height; } } // imageSwap() function imageSwap(daImage, daSrc) { var objStr,obj; if(document.images) { if (typeof(daImage) == 'string') { objStr = 'document.' + daImage; obj = eval(objStr); obj.src = daSrc; } else if ((typeof(daImage) == 'object') && daImage && daImage.src) { daImage.src = daSrc; } } } ------------------------html--------------------------- <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test1.jpg')"> <img src="image/th-test1.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test2.jpg')"> <img src="image/th-test2.jpg" alt="" width="50" height="50" /></a> <a href="#" onclick="resizeImg('test1',300,300); imageSwap('test1','image/test3.jpg')"> <img src="image/th-test3.jpg" alt="" width="50" height="50" /></a><br /> <a href="#" onclick="resizeImg('test1',1,1); imageSwap('test1','image/kuuhaku.gif');"> <img name="test1" src="image/kuuhaku.gif" alt="" width="1" height="1" /></a> ---------------------------------------------------- よろしくお願いします。

専門家に質問してみよう