フォームの送信ボタンを画像にしたい

質問

<div style="float:left; margin-left:5px; margin-top:4px;">
<form id="form1" name="form1" method="post" action="test">
<input type="hidden" name="sample" value="test">
<span onclick="submit()" id="sample2" style="cursor:pointer;">
<img src="img.jpg" alt="sample"></span>
</form>
</div>

html内に上記のように記述し、
フォームの送信ボタンを作成いたしました。

IEでは問題なく動作したのですが、
ファイヤーフォックスでは動作しませんでした。

調べたところ、documentを省略せずに記述すると動作するとなっていたので、下記のように書き換えました。

<div style="float:left; margin-left:5px; margin-top:4px;">
<form id="form1" name="form1" method="post" action="test">
<input type="hidden" name="sample" value="test">
<span onclick="document.form1.submit()" id="sample2" style="cursor:pointer;">
<img src="img.jpg" alt="sample"></span>
</form>
</div>

そうすると今度はIEでもファイヤーフォックスでも動作しなくなりました。

どこか記述が間違っているのかもわからず、悩んでいます。
解決策や修正箇所等教えていただきたく思います。

ちなみに、やりたいことは
「フォームの送信ボタンをテキストリンク、もしくは画像リンクのように見せたい」
ということだけです。

よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

単純にtype="image"ではだめなの？

<form>
<input type="hidden" name="sample" value="test">
<input type="image" src="1.jpg">
</form>

どうしてもjavascriptでというならこう？

<form id="form1">
<input type="hidden" name="sample" value="test">
<img src="1.jpg" onclick="document.getElementById('form1').submit()">
</form>

お礼

ありがとうございました。
思いのほか簡単にできてびっくりです＾＾；

回答No.4

steel_gray

#3です。
記述ミス・・・
×同じくtype="img"で。
○同じくtype="image"で。

ついでに、文字の大きさもまわりのテキストに合わせるならスタイルに
font-size:100%;
を追加。

回答No.3

steel_gray

＞フォームの送信ボタンをテキストリンク、もしくは画像リンクのように見せたい
submitのボタン的なスタイルを止めたいという事ならCSSで。
<style type="text/css">
.submit_botton {
border:none;/*枠線なし*/
background-color:transparent;/*背景透明*/
text-decoration:underline;/*下線*/
}
</style>

<input type="submit" value="送信" class="submit_botton">

画像にするなら#1さんと同じくtype="img"で。

お礼

ありがとうございました。
cssでもできるのですね。

今回はtype=imageで行いました。

回答No.2

神崎 渉瑠（@taloo）

一部のブラウザはsubmitボタンがないformは送信できないようになってるので、
<input type="image">を使わないのであれば、

<input type="submit" value="送信" style="display:none;">

というのを書いておくといいかもしれません。

未検証です。

お礼

ありがとうございました。
この方法だとボタン自体が消えてしまったので
別の方法にしました。