name属性のあるフォームボタンを画像化する方法
- フォームボタンを画像化する方法について説明します。
- 送信ボタンを画像にする方法は簡単ですが、訂正ボタンは注意が必要です。
- 訂正ボタンを画像にする場合、name属性をうまく扱う必要があります。
- ベストアンサー
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"と書いてあるのですが、 このようなボタンを画像にする場合、どのようにすればよろしのでしょうか? アドバイスよろしくお願いします。
- editbooth
- お礼率75% (52/69)
- HTML
- 回答数3
- ありがとう数25
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
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;/* ←歌劇対策 */ } こんな感じで
その他の回答 (2)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
valueではなくaltを指定する方が良いです。 <input type="image" src="./img/retry.gif" name="retry" alt="訂正"> > しかし訂正ボタンを同じようにしたところ、訂正ボタンを押しても送信ボタンと同じアクションになってしまいます。 CGI側でretryのデータが処理されてないのは、type="image"を使用したときはretry=valueではなく、 retry.x=(クリックした場所のx位置) retry.y=(クリックした場所のy位置) という2つが送信されますから retryボタンは押されなかったと判断されているためだと思います。 retryというデータではなくretry.xが送信されたかどうかで判断するようにCGIスクリプトを書き換えてみて下さい。
お礼
ご回答ありがとうございました。 >CGI側でretryのデータが処理されてないのは、type="image"を使用したときは・・・ CGIスクリプトで教えていただいたようにretry.xが送信されたかどうかで判断するように書き換えようと思ったのですが、わからないことがあり断念しました。 今回は他の方法を教えていただきましたので、そちらで対応することにしました。 ありがとうございました。
- zeff
- ベストアンサー率69% (137/198)
<button type="submit" value="送信"><img src="./img/send.gif"></button> <button type="submit" name="retry" value="訂正"><img src="./img/retry.gif"></button> で出来ませんでしょうか。
お礼
ご回答ありがとうございました。 教えて頂いたようにbuttonでも正常に動作しました。 今回はスタイルシートで設定することにしました。 ありがとうございました。
関連するQ&A
- フォームのボタンをSUBMITから画像にしたいのですが…
フォームを使って値を渡すのに <INPUT TYPE=SUBMIT NAME=WORD VALUE='*****'> とボタンを作成し、VALUEの値 (中身を確認、とか送信実行とか) で動作を分岐し、実行していました。 このボタンを画像にしたいのですが、 値を渡すのはGETじゃないと無理でしょうか? (今まではPOSTで送信) ボタンを画像にするとなると <A HREF='**.cgi'><IMG SRC='**'></A> となるので、 <A HREF='**.cgi?key=****'><IMG SRC='**'></A> のように、する必要があるのかなぁ?と思いまして… せっかくPOSTで受け取るようにCGIを作成したので、 できればPOSTのままで使用できればと思うのですが。 (無理ならGETに変更するしかないですけど) VALUEの値はボタンでは送信できないので、 <INPUT TYPE=HIDDEN NAME=WORD VALUE='****'> として渡そうと思ってます。 他に何かよい方法あるでしょうか? ※Perl使用です。
- ベストアンサー
- Perl
- 1つのフォームで複数のnameに対応させるには?
■前提 ・1つのフォーム ・複数ボタン ・複数の送信先へテキストを送り、キーワード検索させたい ■現状 <form name="testform" method="get"> <input type="text" name="hoge" /> <input type="image" src="ボタン画像1" onClick="javascript: testform.action ='送信先1';submit();" /> <input type="image" src="ボタン画像2" onClick="javascript: testform.action ='送信先2';submit();" /> </form> ■問題 このやり方だと、 受け取る側も、すべてname="testform"に対応していないとうまくいきません。 ■知りたいこと name="piyo"にしか対応していない送信先もある場合には、 どう書けばよいのでしょうか? testformのvalue値をpiyoのvalue値に代入するには、 どうすればよいでしょうか? やりたいことは、 複数送信先に応じて、 <input type="text" name="の値を変えたい、です
- ベストアンサー
- JavaScript
- お問い合わせフォーム。確認画面でつまずいてます。
phpでフォームを作成しています。フォーム確認画面で思うように動作しません。 確認画面の「修正する」ボタンを「input type="submit"」から「input type="image"」に変更し、画像ボタンとしたいです。 ソースを下記のように書き換えると、前画面に戻らず、そのまま送信してしまいます。 <input type="hidden" name="status" value="send">'."\n".'<input type="submit" value="送信する"> <input type="submit" name="edit" value="修正するぞおお"> ↓ <input type="hidden" name="status" value="send">'."\n".'<input type="image" name="send" src="../images/send_btn.gif" value="送信する"> <input type="image" name="edit" src="../images/reset_btn.gif" value="修正するぞおお'"> 「修正する」ボタンを画像に変更するには、他に追記する必要があるのでしょうか? 正しい動作は、「修正する」ボタンを押すと、入力項目を残した状態のフォームへ戻ります。 その動作もphpのどこに記載されているのか、今いち分かっておりません・・・。 「魔法のメールフォーム MagicalForm」http://magical-form.com/ を利用しています。 初心者で申し訳ないのですが、どうぞよろしくお願いいたします。
- 締切済み
- PHP
- input の画像について
<input name="return" type="submit" value=" 戻る "> というボタンを画像にしたい場合、 <input type="image" src="img/modorubtn.gif" name="return" alt="戻る"> で良いのでしょうか? これで、動作しない場合は、どのような原因が考えられるでしょうか? よろしくお願いします。
- ベストアンサー
- HTML
- フォームで同じ複数のnameで違うvalueの送信
始めまして、現在一個のフォーム内で複数の同じnameで、違うvalueを送信しようと苦戦しております、、普通にタグを書くだけでは 一個のnameで違うvalueの送信は、最後のvalueしか送信できないです、 phpは使用できません。javaは、、殆ど素人なので、あまり分かりません、、formを一個一個区切るのも、レイアウト上できません、、 どうすればいいのでしょうか?・・・以下タグです。 昨日から、ここから先に進めません。。 先輩方助けてください、本当によろしくお願いします。 <form action="http://hoge.net/hoge/hogecheck.php" method="post"> <input type="hidden" name="site" value="hoge"> <input name="id" type="text" id="idform" maxlength="10" /> <input type="hidden" name="kin" value="3000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="5000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="10000"> <input type="image" src="buybtn.gif" /> <input type="hidden" name="kin" value="20000"> <input type="image" src="buybtn.gif" /> </form>
- ベストアンサー
- Java
- どのボタンが押されたかの判定
フォームに複数のSubmitボタンがある場合、飛び先のhtmlファイル ではnameとvalueを使えばどのボタンが押されたか判定できますが、 イメージボタンの場合、valueに設定しておいた文字列が取得できま せん。(valueにはイメージが入っている?) <input type="image" name="DayButton" value="Prev" src="images/prev.gif"> <input type="image" name="DayButton" value="Next" src="images/next.gif"> どのようにすればどのボタンが押されたか判定できますか?
- ベストアンサー
- HTML
- フォームのボタンを画像にする方法?
フォームのクリアや送信ボタンを画像に置き換えたいのですがどうすれば良いのでしょうか? これを画像ボタンにしたいのですが... <input type="reset" value="クリア"> <input type="submit" value="送信" > お手数ですがお知らせ下さい。
- ベストアンサー
- ブログ
- 携帯向けページのフォームでsubmitボタンを画像にすることはできますか
よろしくお願いします。 <input type="image" src="img.gif"> とすると、type="text" と解釈されてしまいます。 携帯では、submitボタンを画像にすることはできないのでしょうか。 ご存知の方、おみえでしたらご教示ください。
- 締切済み
- HTML
- フォームのボタンをsubmitから画像にしたけど表示されない
submitから独自の画像ボタンにしようとして 下記のように記述しましたがブラウザで 確認したら表示されませんでした。 <INPUT TYPE="image" src="***.gif" VALUE="submit" alt="検索" border="0"> 他に何か記述が必要なのでしょうか? よろしくお願い致します。
- ベストアンサー
- HTML
- メールフォームでの送信確認から修正ボタンで戻る方法
現在、メールフォームを作っています。 とりあえず完成し、動作は全く問題ありません。 ただ、「送信ボタン」と確認画面からの「修正する」ボタンを画像にしています。 「修正する」ボタンを画像にするとなぜか送信が完了してしまいます。 下記は「修正する」ボタンのソースです。 <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にすると前の入力画面に戻ります。 原因がわからないので詳しい方、ご教授をお願いいたします。
- 締切済み
- HTML
お礼
的確なアドバイスありがとうございました。 教えて頂いたようにスタイルシートで設定し無事解決致しました。 type="image"ではvalueプロパティが使えないようですね。 勉強になりました。