HTML複数のボタンで値を変える方法
- ボタンをクリックすると、異なる値を送信する方法について学びます。
- シンプルなHTMLで300個のボタンを配置する方法を探しています。
- 既存のHTMLコードよりも簡潔で効率的なソリューションを教えてください。
- ベストアンサー
HTML 複数のボタンで送信する値を変える
この様なhtmlFORMで <form action=xxx.cgi> ----------------------------- No| 選 択 ----------------------------- 1| SubmitButton value=実行 2| SubmitButton value=実行 3| SubmitButton value=実行 ----------------------------- </form> で、1の行のButton実行をクリックすると http://xxx/xxx.cgi?NO=1が返され、2の行のButton実行をクリックすると http://xxx/xxx.cgi?NO=2が返される様にするにはどんなHTMLを記述すれば良いのでしょう？ 下記の様なHTMLも考えましたが、なにせ300程ボタンを配置したいので（CGIでWebページを作成する関係もあって）、もっとシンプルに出来ないのかな？という事です。 <form action="./xxx.cgi"> <table> <tr><td>1</td><td><type=submit value='実行'><type=hidden name=NO value=1></td> </table> </form> <br> <form action="./xxx.cgi"> <table> <tr><td>2</td><td><type=submit value='実行'><type=hidden name=NO value=2></td> </table> </form> っと、これは辛い・・・
- souta_n
- お礼率85% (391/456)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
フォームコントロール(inputも)name属性を持ちますよ。そしてresetを除くフォームコントロールのnameの値とvale値はサーバーに送信されます。 すなわち、text password checkbox radio submit file hidden button よって <input type="submit" name="SW1" value="1で決定"> <input type="submit" name="SW2" value="2で決定"> <input type="submit" name="SW3" value="3で決定"> とか・・・ ★17.4 INPUT要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#h-17.4 ) また、BUTTON要素を使っても良いでしょう。そのほうが内容をもてるので使いやすいかも ★17.5 BUTTON要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#h-17.5 ) わからないときは仕様書を読む癖をつけましょう。それでわからないときに、この様な掲示板を利用すると中途半端な回答や不正確な回答で終わることもありませんし、何より身につきます。
関連するQ&A
- テキストから要素を抜き出してフォームで送信したい。
<body> <form action="xxx.cgi" method="post"> <input type="hidden" name="n" value="v"> <table> <tr id="hoge_a"> <td>AAA</td> </tr> <tr id="hoge_b"> <td>BBB</td> </tr> </table> <input type="submit" name="submit"> </form> </body> というＨＴＭＬの中で、ＡＡＡを抜き出してフォームと一緒にpostでサブミットしたいのですが、javascriptで出来ますでしょうか。 よろしくおねがいします。
- 締切済み
- JavaScript
- form要素とtable要素
元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。
- ベストアンサー
- HTML
- 「戻るボタン」 ： ボタンを使わずに、・・・
HTMLでは、戻るボタンは、 <FORM> <INPUT TYPE="button" VALUE="戻る" onClick="history.back </FORM> ですが、この動作で、 戻るボタンではなく、 <table><tr><td>戻る</td></tr></table> をクリックするようにしたいのですが、・・・ 可能でしょうか。 可能でしたら、htmlをお願いします。
- ベストアンサー
- HTML
- HTMLとPHPのデータのやり取りで問題発生
HTMLサイドで<form> のsubmit ボタンで、あるデータをPHPスクリプトに送った後、PHPサイドの画面(特に何も表示はしないので真っ白）になったまま、HTMLの画面に戻ってくれません。 PHPサイドではHTML側から送ったデータに基づいて、単純な２進２ビットのデータファイルを作るだけで,この部分はちゃんと働いています。HTMLページは表示されたまま、PHPにはバックグラウンドで仕事をしてもらいたいのですが、やり方がよくわかりません。 お知恵を貸していただける方、よろしく教えてください。お願いします。 自分が使っているテストプログラムを載せておきます。 HTMLサイド <table border="1"> <tr> <td> <form method="get" action="attenuate.php"> <input type="submit" value="1:1"> <input type="hidden" value="01" name="select"> </form> </td> <td> <form method="get" action="attenuate.php"> <input type="submit" value="2:1"> <input type="hidden" value="10" name="select"> </form> </td> <td> <form method="get" action="attenuate.php"> <input type="submit" value="5:1"> <input type="hidden" value="11" name="select"> </form> </td> <td> <form method="get" action="attenuate.php"> <input type="submit" value="Amplify"> <input type="hidden" value="00" name="select"> </form> </td> </tr> </table> PHPサイド file: attenuate.php <html> <head></head> <body> <?php $fp=fopen("attenuation.txt","w"); switch($_GET['select']) { case '00': fwrite($fp,"00");break; case '00': fwrite($fp,"01");break; case '00': fwrite($fp,"10");break; case '00': fwrite($fp,"11");break; } fclose($fp); ?> </body> </html>
- ベストアンサー
- PHP
- 複数ボタンを制御出来る2度押し防止ボタン
HTML5+CSS3でゲームを作っています。 フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。 【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。 ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript"> <!-- function sendform(){ submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- Yes/No型を使ってアップロード
はじめまして。 下記にhtmlを書かせていただいてますが、このhtmlの『アップロード』のボタンを押すと 1. データベース『mdb』のYes/No型にチェックが入る 2. Yes/No型にチェックが入ったものはアップロードされる ようにすることはできるでしょうか？また、何か参考になるサイト様などがあれば 教えていただきたいのです。 おわかりになる方、よろしくお願いします。 下記のような↓フォームです。 ---------------------- <table> <TR> <TD> <INPUT type='hidden' NAME='UPDATE_ID' VALUE='1'> <center><INPUT TYPE='submit' VALUE=' アップロード '><br><center> <p></p> </TD> <TD>登録ファイル1</TD></FORM> <FORM ACTION='' METHOD='POST'> <TR> <TD> <INPUT type='hidden' NAME='UPDATE_ID' VALUE='2'> <center><INPUT TYPE='submit' VALUE=' アップロード '><br><center> <p></p> </TD> <TD>登録ファイル2</TD></FORM> <FORM ACTION='' METHOD='POST'> <INPUT type='hidden' NAME='UPDATE_ID' VALUE='3'> <TR> <TR> </FORM> <TR> </table>
- 締切済み
- Microsoft ASP
- submitではなくbuttonで送信
事情があり、submitではなくbuttonでフォームのデータを送信したいのですが、以下のように書くとbuttonでは4567が送信されません。 <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="submit" name="bbb" value="4567"> </form> ↓ <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="button" name="bbb" value="4567" onclick="submit();" > </form> submitと同じように、bbbのデータ4567も送信するにはどのように書けばよいのでしょうか？ 宜しくお願いします。
- ベストアンサー
- JavaScript
- ボタン別でフォームの送信先を変えたい
同じ場所に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
- html css 検索ボタン 検索窓 余白
検索ボタン、検索窓のＨＴＭL，ＣＳＳについての質問をさせていただきます。 どこかから引っ張ってきた検索ボタン・検索窓のＨＴＭLを自分のサイトに埋め込んでみたら、bottomにけっこう広い邪魔な余白ができてしまいます。 padding,margin,valign...など、持ってる知識をふりしぼりましたが改善されません。その記述内容は以下の通りです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table> <tr><td> <div> <form action="http://search-web.○○○○○.○○/cgi-bin/search" name="form" id="form" onsubmit=" return f_submit(); "> <input name="site" value="○○○○○.○○" type="hidden"> <input name="query" value="○○○○○" maxlength="300" type="text" class="cw"> <input value="検索" class="button" type="submit"> </form> </div> </td></tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上記内容を書かない場合は高さ・余白の調節ができるのですが、書き込むと何もできず、下部に余白がかなりできてしまいます。 heightで高さを指定しても改善されません。 １．何か原因があるのか教えてください。 ２．また、良い記述内容、改善策を教えてください。 ３．全てのブラウザで同じように表示できる記述内容があれば教えてください。 初歩的な質問かもしれませんが、困ってますのでどうぞよろしくお願いします。
- 締切済み
- HTML
- IEでFORMタグを入れると空白ができる
IEだけなのですがFORMタグを入れるとTABLEとTABLEの間に空白ができます。 自分なりに切り分けをしたみたところ下記のような結果になりました。 １、XHTML1.0をHTML4.0に変更すると正常に表示 ２、Firefoxで開くと正常に表示 ３、FORMタグを外すと正常に表示 ４、このhtmlファイルをローカル(自身のPC上)で表示すると正常に表示 (Webサーバにアップロードすると現象が現れる) ソースは以下の通りです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <table border="0" width="800"><tr> <td><font color="#000080"><b>サブメニュー</b></font></td> <td width="20"></td> <td align="right"> <input type="button" value="戻る" onclick=window.open("http://www.xxxx.xxx/xxx.html","_top")> </td></tr></table> ※この間に空白ができます※ <table border="1" cellspacing="0" cellpadding="5" width="800"> <tr><th nowrap class="l" width="270">商品A</th> <th nowrap class="l" width="100">商品A</th> <th nowrap class="l" width="270">商品名B</th> <th nowrap class="l" width="100">商品B</th> <p></tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> </table> </p> </html> 実際にはもっと長い表になるのですが<tr></tr>を増やせば増やすほど空白が大きくなります。 どうすれば解消できるでしょうか ご存知の方がいらっしゃいましたらご教授願います。 いろいろなサイトを拝見して試してみましたが解決できないのでよろしくお願いします。
- ベストアンサー
- HTML
