- ベストアンサー
ハイパーリンクをインプットボタンで作るには
- HTML初心者のため、ハイパーリンクをインプットボタンでリンクさせる方法を知りたい
- 現在の実装では新しいウィンドウが開かれてしまうため、適切なリンクができない
- どのような方法を使えば、ハイパーリンクをインプットボタンで作成できるか知りたい
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
<input type="button" class="button" value="修正する" onClick='location.href="/input.php?action=rewrite"'> じゃだめなの。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>たしかにリンクできるのですがボタンの形状がサブミットボタンと違い困っています。 単にデザインのためでしたら、formでないものをformというのもおかしい。 SEO的に問題があるでしょう。 また、それがどのように表示されるかはブラウザ依存ですから、こちらから指定することはできません。 どうしてもなら、スタイルシートで3種類のボタンを、なにもなし/hover/activeで切り替えればよいです。 それなら画像やスタイルシートを読まないテキストブラウザや検索エンジンでもリンクだとわかる。
お礼
回答有難うございます。
- metametamu
- ベストアンサー率51% (153/295)
私も2さんの回答どおり、inputに置き換え無い方がいいと思いますよ。 丸いということはsafariとかでしょうか?ブラウザによってボタンの形はそれぞれ違うので、inputを使ったからといって全ての環境で丸ボタンになるわけではありませんよ。 今回のケースでは画像を使ってimg要素にリンクをしましょう。画像は、safariのボタンを画面キャプチャとかから取得して編集すれば結構簡単に作れると思います。 <a href="input.php?action=rewrite"><img src="button.jpg" alt="修正する" /></a>
お礼
回答有難うございます。 ブラウザはIE8です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<input type="button">も<input type="submit">も同じ外観なので <form action="送信先"><input type="submit"></form>で良いでしょう。 ただ、HTMLの要素的にはリンクでありながらプレゼンテーション(見栄え)だけをボタンにしたいのでしたら、スタイルシートを使ってデザインするほうが多くの面で良いでしょう。 <html> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <head> <style type="text/css"> a.button{ border:outset 3px gray; padding:2px; background-color:rgb(180,180,180); text-decoration:none; } a.button:active{border-style:inset;} </style> </head> <body> <p><a class="button" href="input.php?action=rewrite">修正する</a></p> </body>
お礼
回答有難うございます。 たしかにリンクできるのですがボタンの形状がサブミットボタンと違い困っています。 色々、CSSをいじってみたのですがサブミットボタンは丸みがあるのですがORUKA1951さんのボタンは角ばっています。 当方、CSSも未熟なため形状の変更の仕方がわかりません。
- favordate
- ベストアンサー率50% (2/4)
<form action="input.php?action=rewrite" method="post"><input type="submit" value="修正する"></form> でよろしいでしょうか??onClickはjavascriptのものなので、入力formでphpやhtmlと同時に使うことはあまりありません。やはり、<form>タグの中に、処理するphpのアドレスを記述するのがよいかとは思います。 簡素な回答で申し訳ありません。
お礼
回答有難うございます。 試してみましたがリンクしませんでした。
お礼
回答有難うございます。 無事できました。