ハイパーリンクをインプットボタンで作るには

このQ&Aのポイント
  • HTML初心者のため、ハイパーリンクをインプットボタンでリンクさせる方法を知りたい
  • 現在の実装では新しいウィンドウが開かれてしまうため、適切なリンクができない
  • どのような方法を使えば、ハイパーリンクをインプットボタンで作成できるか知りたい
回答を見る
  • ベストアンサー

ハイパーリンクをインプットボタンで作るには

HTML初心者です。 <a href="input.php?action=rewrite">修正する</a> 上記のハイパーリンクをインプットボタンでリンクさせたいのですが <input type="button" class="button" value="修正する" onClick='window.open("input.php?action=rewrite")'> だと新しいウィンドウが開いてしまいますし <input type="button" class="button" value="修正する" onClick=("input.php?action=rewrite")> だとリンクできません。 どのようにすれば良いのでしょうか? よろしくお願いします。

  • HTML
  • 回答数5
  • ありがとう数6

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

<input type="button" class="button" value="修正する" onClick='location.href="/input.php?action=rewrite"'> じゃだめなの。

shorinji36
質問者

お礼

回答有難うございます。 無事できました。

その他の回答 (4)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

>たしかにリンクできるのですがボタンの形状がサブミットボタンと違い困っています。 単にデザインのためでしたら、formでないものをformというのもおかしい。 SEO的に問題があるでしょう。 また、それがどのように表示されるかはブラウザ依存ですから、こちらから指定することはできません。  どうしてもなら、スタイルシートで3種類のボタンを、なにもなし/hover/activeで切り替えればよいです。  それなら画像やスタイルシートを読まないテキストブラウザや検索エンジンでもリンクだとわかる。

shorinji36
質問者

お礼

回答有難うございます。

回答No.4

私も2さんの回答どおり、inputに置き換え無い方がいいと思いますよ。 丸いということはsafariとかでしょうか?ブラウザによってボタンの形はそれぞれ違うので、inputを使ったからといって全ての環境で丸ボタンになるわけではありませんよ。 今回のケースでは画像を使ってimg要素にリンクをしましょう。画像は、safariのボタンを画面キャプチャとかから取得して編集すれば結構簡単に作れると思います。 <a href="input.php?action=rewrite"><img src="button.jpg" alt="修正する" /></a>

shorinji36
質問者

お礼

回答有難うございます。 ブラウザはIE8です。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

<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>

shorinji36
質問者

お礼

回答有難うございます。 たしかにリンクできるのですがボタンの形状がサブミットボタンと違い困っています。 色々、CSSをいじってみたのですがサブミットボタンは丸みがあるのですがORUKA1951さんのボタンは角ばっています。 当方、CSSも未熟なため形状の変更の仕方がわかりません。

回答No.1

<form action="input.php?action=rewrite" method="post"><input type="submit" value="修正する"></form> でよろしいでしょうか??onClickはjavascriptのものなので、入力formでphpやhtmlと同時に使うことはあまりありません。やはり、<form>タグの中に、処理するphpのアドレスを記述するのがよいかとは思います。 簡素な回答で申し訳ありません。

shorinji36
質問者

お礼

回答有難うございます。 試してみましたがリンクしませんでした。

関連するQ&A

  • HPボタンの長さが異なる。

    下のボタンが マックの「IE4.5」「IE5.0」「ネスケ4.7」だとちゃんと奇麗に中央に表示されますが、 Windows「IE4.5」「IE5.0」はボタンの長さが異なり ガタガタになります。 windowsでも奇麗に並べるにはどうしたらいいのでしょうか? よろしくご指導お願いいたします。 テストでアップしてあるURLですのでご確認してください。 http://watn.jp/test/ <HTML> <HEAD> <TITLE>++++</TITLE> </HEAD> <!------------------- 中身-------------------> <center> 下のボタンがマックの「IE4.5」「IE5.0」「ネスケ4.7」だと<br> ちゃんと中央に表示されますが、Windows「IE4.5」「IE5.0」は<br> ボタンの長さが異なりガタガタになります。 <FORM> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇   " onClick="window.location.href='kituke.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇  " onClick="window.location.href='sadou.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇◇ " onClick="window.location.href='buyou.html'"><br> <INPUT TYPE="button" VALUE=" ●●・・◇◇◇   " onClick="window.location.href='ivent.html'"><br> <INPUT TYPE="button" VALUE="   ・・◇◇◇◇  " onClick="window.location.href='tenjikai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇       " onClick="window.location.href='butai.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇      " onClick="window.location.href='honten.html'"><br> <INPUT TYPE="button" VALUE=" ◇◇◇◇◇     " onClick="window.location.href='yono.html'"><br> </FORM> </center> </BODY> </HTML>

  • ボタンで、リンクを、別ウィンドウで開く

    質問させていただきます。 ボタンで、リンクを、別ウィンドウで開くには どういうソースを書いたら良いのでしょうか? <FORM> <INPUT TYPE="button" VALUE="リンク" onClick="window.location.href='index.html'"> </FORM> だと、同一ウィンドウ内に開いてしまいますし・・・。 どうか教えてください。よろしくお願いいたします!

  • 「ボタン」の幅の長さ

    「ボタン」の幅の長さを揃えたいのですが、 「★幅の設定」 の仕方を教えてください。よろしくお願いいたします。 <INPUT type="button" value="簡単" onclick="javascript:window.location.href='http://'">

  • PHPの囲みかた

    以下のPHPが動かない、画面が真っ白になってしまうのですがなぜでしょうか? また<?php ?>でPHPは囲みますが、一画面で何回も囲んでも構わないでしょうか? <input name="button" type="button" onclick="location.href='/abc.php'" value="abc"> <?php  print ('<input type="button" value="aaa" onClick="location.href='/aaa.php'">'); ?> <input type="button" value="bbb" onClick="location.href='/bbb.php'">

    • 締切済み
    • PHP
  • リンクの追加

    下記のソースでとじるボタンをクリックするとリンク先をしていしたい。 たとえばYahooにとばしたい。http://www.yahoo.co.jp/ 修正する場所を教えてください。 "<input type=""button"" value=""印 刷"" onclick=""window.print()"">  <input type=""button"" value=""とじる"" onclick=""link()"">" & _

  • Input Type Buttonのサイズ変更

    *Input type buttonのフォントサイズを大きくする場合 どこ↓につなげたらいいのでしょうか? <INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE= "お問い合わせ"onClick="location.href='http@@@@@@@'"> *Input type button の型を四角に変更する場合や サイズを大きくする場合はこのタグ↓のどこに入れたら いいのでしょうか? <INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE= "お問い合わせ"onClick="location.href='http@@@@@@@'"> お手数をお掛け致しますが宜しくお願い致します。

  • ボタンの長さを変えたい(至急)

    <INPUT TYPE=BUTTON VALUE="最新100回グラフ" onClick="location.href='../grf/100.htm'"> <INPUT TYPE=BUTTON VALUE="最新50回グラフ" onClick="location.href='../grf/50.htm'"> このようなボタンの長さを揃えたいです。 スペースで調節するしかないのでしょうか?

    • ベストアンサー
    • HTML
  • formの送信ボタンクリック後、別ウインドウ表示

    お世話になります。 現在下記の指定でPDFを表示しています。 <INPUT type="submit" name="submit" value="送信" onClick="form.action='tcpdf/pdf.php';return true" class="button_order"> これをクリック後、別ウインドウでPDFを表示したいのですが、 onClick="form.action='tcpdf/pdf.php';return true"の部分を onClick="form.action='tcpdf/pdf_sample.php';target='_blank'"とかにしても うまくいきせん。 ボタンはもう一つあるので、 <INPUT type="submit" name="submit" value="戻る" onClick="form.action='201504_1_2.php';return true" class="button_re-selection"> 出来れば、送信ボタンのみの設定を別ウインドウ表示にしたいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • location時に複数のclassを適用させたい

    次のようなフォームの部品があります。 <form name="formname" class="searchform">     <input type="text" name="query" class="searchbox">//     <input type="button" value="検索" class="button" onclick="search()" /> </form> http://www.com/index.phpにテキスト入力フィールドとボタンがあります。 テキストエリアに[任意の文字列]を入れてボタンを押すと、 <li class=list><a class=link href="http://www.com/search.php?que=[任意の文字列]">リンク</a></li> というリンクをクリックしたときと同じ動作を引き起こすようにしたいです。 form action="~"をつけてGETメソッドで送信するのではなく、あくまでもテキストボックスの値を受け取って、 それをクエリとしたhrefをlocateしたいのです。 <script type="text/javascript"> function searches(){ var str1=document.formname.query.value; href = "http://www.com/search.php?que="+str1; location.href = href; } </script> と自分でも書きましたが、これでは <a href="http://www.com/search.php?que=[任意の文字列]">リンク</a> をクリックしたときと同等になってしまいます。 liのclassとaのclassが適用されません。 この2つのclassは、別のjavascriptと連動しているため、どうしても <li class=list><a class=link href="http://www.com/search.php?que=[任意の文字列]">リンク</a></li> をクリックしたときと同様の動作を引き起こしたいのです。 上のフォームのbuttonをクリックすることで、このような動作を起こす方法を教えてください。 よろしくお願いします。

  • ボタン別でフォームの送信先を変えたい

    同じ場所に3つある今のフォームを1つにまとめたいのですが、 「ラジオボタン」でやるのではなく「submitボタン」によって送信先の振り分けはできないのでしょうか? CGIなどを使って一旦クッションを置くのは問題ないです。何か参考になるサイトさんとかありましたら教えてください。 <form action="1.php" method="get" class="form" target="a" name="1"> <input type="hidden" name="s" value=90 /> <input type="hidden" name="t" value="e" /> <input type="text" name="moji" value="" size="8" /> <input type="submit" name="button" value="検索" /> </form> <form action="http://e.php" method="get" name="2" target="a"> <input type="hidden" name="test" value=et /> <input type="text" name="77" value="" size="8" /> <input type="submit" value="検索2" class="button" /> </form> <form action="http://8.cgi" method="get" target="a"> <input type="text" size="8" name="q" value="" /> <input type="submit" value="検索3" class="button" /> <input type="hidden" name="sut" value="JJ" /> </form>

    • ベストアンサー
    • CGI