name属性のあるフォームボタンを画像化について

質問

name属性のあるフォームボタンを画像化について

どのように質問したらよいのか分からず、説明が足りないようでしたらばご了承ください。

以下のフォームボタンがあるのですが、これらを画像にしたいと思っています。
<input type="submit" value="送信" />
<input type="submit" name="retry" value="訂正" />

送信ボタンは以下のように画像にしました。
<input type="image" src="./img/send.gif" value="送信">
しかし訂正ボタンを同じようにしたところ、訂正ボタンを押しても送信ボタンと同じアクションになってしまいます。
<input type="image" src="./img/retry.gif" name="retry" value="訂正">

デフォルトの訂正ボタンにはname="retry"と書いてあるのですが、
このようなボタンを画像にする場合、どのようにすればよろしのでしょうか？

アドバイスよろしくお願いします。

回答No.1

藤田 朋郎（@hujitomo） · ベストアンサー

type="image" では value プロパティが使えなかったような？
クリックした座標を value として送信する仕様だったはず。
いままで通り type="submit" で記述し、スタイルシートで画像に置換するのが手っ取り早いと思いますよ。

<input type="submit" class="retry" name="retry" value="訂正" />

input.retry {
background:url(./img/retry.gif) no-repeat;
width:使用する画像の幅px;
height:使用する画像の高さpx;
border:none;
text-indent:-9999px;
font-size:0px;/* ←歌劇対策 */
}

こんな感じで

お礼

的確なアドバイスありがとうございました。
教えて頂いたようにスタイルシートで設定し無事解決致しました。
type="image"ではvalueプロパティが使えないようですね。
勉強になりました。

回答No.3

神崎 渉瑠（@taloo）

valueではなくaltを指定する方が良いです。
<input type="image" src="./img/retry.gif" name="retry" alt="訂正">

> しかし訂正ボタンを同じようにしたところ、訂正ボタンを押しても送信ボタンと同じアクションになってしまいます。

CGI側でretryのデータが処理されてないのは、type="image"を使用したときはretry=valueではなく、
retry.x=（クリックした場所のx位置）
retry.y=（クリックした場所のy位置）
という２つが送信されますから
retryボタンは押されなかったと判断されているためだと思います。

retryというデータではなくretry.xが送信されたかどうかで判断するようにCGIスクリプトを書き換えてみて下さい。

お礼

ご回答ありがとうございました。
＞CGI側でretryのデータが処理されてないのは、type="image"を使用したときは・・・
CGIスクリプトで教えていただいたようにretry.xが送信されたかどうかで判断するように書き換えようと思ったのですが、わからないことがあり断念しました。
今回は他の方法を教えていただきましたので、そちらで対応することにしました。
ありがとうございました。

回答No.2

zeff

<button type="submit" value="送信"><img src="./img/send.gif"></button>
<button type="submit" name="retry" value="訂正"><img src="./img/retry.gif"></button>

で出来ませんでしょうか。

お礼

ご回答ありがとうございました。
教えて頂いたようにbuttonでも正常に動作しました。
今回はスタイルシートで設定することにしました。
ありがとうございました。