HTML5上でボタンの大きさを変更する方法とは？
- HTML5上でFormのsubmitボタンを設置する際に、ボタン上に表示する文字とvalue属性の文字を分ける必要があります。
- 通常の<input type="submit">ではvalue属性に表示する文字を入れる必要がありますが、<button>タグを使用することでこの問題を解決することができます。
- しかし、<button>タグを使用すると通常のサイズよりも小さくなってしまうため、ボタンの大きさを変更する方法が必要です。
- ベストアンサー
submitボタン上の文字とvalue=の数字
CSS3 + HTML5 でゲームを作っています。 Formのsubmitボタンを設置する必要があるのですが、ボタン上に表示する文字とvalue=の文字を分ける必要があります。 <input type="submit" name="point" value="送信する"> 上記では本来であれば数値を入れたいvalue=に、「ボタン上に表示する文字」を入れなければならないため使えません。 <button type="submit" name="point" value="10050">購入する</button> であれば、valueに数値を置き、ボタン上に文字を置けるため当方のニーズに叶うのですが、HTML5上で見るとボタンの大きさが<input type="submit>の3分の1くらいになってしまいます。 従い<button type="submit" name="point" value="10050">購入する</button> のボタンの大きさを変更する方法がわかればいいと思いますが、この方法でなくても構いません。 HTML5上で、当方のニーズに合うボタンを作るためにはどうしたらいいでしょうか?
- tajix14
- お礼率72% (175/242)
- HTML
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ボタンのstyle属性に"width:100px"などと指定するのはダメなんでしょうか？
関連するQ&A
- <form>タグに２つのボタン
<form>タグで２つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか？ できればHTMLで、できなければJavaScriptでできますでしょうか？ ・button1を押したときは フィールド「CASE」に1を入れて送信、 HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは フィールド「CASE」に2を入れて送信、 HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。
- ベストアンサー
- HTML
- 2つのsubmitボタンがあるときに
最初に書いたボタンが優先され 単にリターンキーを押したときに 最初のsubmitボタンが反応します。 後のsubmitボタンが反応するようにするにはどうしたらいいのでしょうか？ つまり下記のＰＨＰをブラウザに表示させているときにリターンキーを押したときには submit2 is pushed. と表示させるにはどうしたらいいのでしょうか？ <form method="post" action="<?=$PHP_SELF?>"> <input type="text"/><br/> <input type="checkbox"/><br/> <input type="radio" name="radio"/><br/> <input type="submit" name="submit" value="submit1" tabindex=-1/><br/> <input type="submit" name="submit" value="submit2" tabindex=1/><br/> </form> <?php if(isset($_POST['submit'])) { echo$_POST['submit'].' is pushed.'; } ?>
- ベストアンサー
- PHP
- このsubmitがうまくいかないんです。
echo '<button type="submit" name="bknk" value="back">先月</button>'; echo '<button type="submit" name="bknk" value="now">当月</button>'; echo '<button type="submit" name="bknk" value="next">次月</button><BR>'; １つのフォームに、submitボタンを１つ設けて、 押したsubmitボタンによって、 処理を分けるというのが趣旨で、 この部分は、ボタンを配置している箇所です。 (1) この式で、どれか１個を押した時、 ３つのsubmit全てがデータ送信されてしまい、 ３つの処理が走ってしまいます。 １つの処理だけを行いたい。 (2) さらに、送信される値は value ではなく、 ボタンの表示名の漢字部分が送信されています。 そのままボタンを押すと、漢字が送信され、以降の処理でエラーになります。 漢字部分を、value の値にすると(1)の様に動作します。 フォーム内にsubmitが複数存在してはいけないのでしょうか。 私のHTML本には複数submitを設置した時に、 どのボタンが押されたか判別する為に name と value を使えば良いとされているのですが。 なにか、根本的なところに間違いなどありませんか？ どなたかご指摘お願いします。
- 締切済み
- PHP
- 2度押し防止ボタン
HTML5 + CSS3 でスマートフォンゲームを作っています。 回線が混雑している状況でボタンを2度押ししても1回しかカウントされないボタンを作りたいと考えています。 【基本的な知見】 下記であれば要望に沿ったボタンになります。(ボタンはCSS3の標準ボタンを使用) <form action="form.cgi" method="post"> <input type="hidden" name="point" value="1" /> <SCRIPT TYPE="text/javascript"> <!-- //submitの2度押し防止 function disableButton(){ document.form1.button1.disabled = true; submitForm(); } function submitForm(){ document.form1.submit(); } // --> </SCRIPT> <input type="button" value="購 入" onClick="disableButton()" name="button1"> </form> 【やりたいこと】 「ボタンに数量を表示したいことと、ボタン上の数値表記とCGIに渡すvalueが異なることがある」ため、CSS3の標準ボタンを止め下記のオリジナルCSSのボタンを使用します。 <button class="button8" type="submit" name="point" value="1050" onClick="disableButton()"><div>50ポイント</div></button> このオリジナルCSSのボタンを使用した場合の2度押し防止のjavascriptはどのように改造すればいいか教えてください。 上記に示したjavascriptの 「document.form1.button1.disabled = true;」のbutton1をpointに変更したところ、数値をCGIに渡せませんでした。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- submitボタンにvalue属性の値でないラベルを表示したい
submitボタンを複数設置し，全てのラベルに「これを修正する」と表示したいのですが， 下記のように押下されたsubmitボタン別に，POSTする値をそれぞれ1，2，3と分けたいです． （page.phpは，$_POST["PageNumber"]として1か2か3を受け取る） ですが，value属性の値がボタンのラベルとしてボタン表面に記されてしまい，困っています． 何とかならないでしょうか？ <form method="post" action="page.php"> <input type="submit" name="PageNumber" value="1"></td></tr> <input type="submit" name="PageNumber" value="2"></td></tr> <input type="submit" name="PageNumber" value="3"></td></tr> </form>
- ベストアンサー
- HTML
- 複数ボタンのvalueを送れない
ひとつのフォームで複数のボタンを使う方法を探していたら 次のような方法があるとのことでした。 <form method="post" name="MyForm"> <INPUT TYPE="BUTTON" VALUE="aaa" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> <INPUT TYPE="BUTTON" VALUE="bbb" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> </form> これで、ボタンによってVALUEを渡せるのかと思いきや、 飛んでいきませんでした・・・ 複数ボタンを用意して、ボタンによってその VALUE値を渡す方法がありませんでしょうか？
- ベストアンサー
- CGI
- 複数ボタンを制御出来る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
- submitボタンの表示が変
submitボタンのvalue内で改行すると、safariでは表示が変になってしまいます（ボタンの上下に文字列がはみ出してしまいます）。 ボタンを画像にしてしまう以外に、何か解決策はありますでしょうか？ 例： <input name="submit" type="submit" value="検索する Search" />
- ベストアンサー
- HTML
- formタグのvalue="" に代入される文字列をsubmitボタン
formタグのvalue="" に代入される文字列をsubmitボタンが押されたときに Javascriptでlocation.hrefで現在のURLを判定して 条件分岐してformタグのvalue="" に "A" や "B" といった 文字列を代入したいと考えてます。 現在下記のタグを書いているのですが、submitボタンが押されたときに パラメータにvalueの値が代入されず、困ってます。。。 タグの記述に間違いがあると思うのですが、ご指摘いただけないでしょうか？ ■現在のタグ １．Javascript側 <script> <!-- function check() { if(location.href.startsWith('http://www.AAA.com/AAA/')){ document.exp.categoryII.value = "A"; }else if(location.href.startsWith('http://www.AAA.com/BBB/')){ document.exp.categoryII.value = "B"; } return true; } // --> </script> ２．formタグ側 <form onsubmit="return check()" name="exp" action=""> <input name="gen" value="6" type="hidden" /> <input name="categoryII" value="" type="hidden" /> <input name="button" value="検索" type="submit" /> </form> よろしくお願い致します。
- ベストアンサー
- JavaScript
- Submitしたボタンを知る方法は?
<form onsubmit="function()"> <button type="submit" id="button1" name="cmd" value="1">1番を選ぶ</button> <button type="submit" id="button2" name="cmd" value="2">2番を選ぶ</button> </form> とした場合に、function()内で、押したボタンを知るにはどこを見ればよいでしょうか? ちなみに、このあと適当なcgiにpostし、name,valueはそちらで処理する予定ですので、この2つの要素については大幅な変更は出来ません。
- 締切済み
- JavaScript
お礼
<style type="text/css"> <!-- button#submit_button { width: 150px; height: 50px; } --> </style> <button type="submit" id="submit_button" name="point" value="10050">購入する</button> ではダメみたいです。 どこが悪いかご教授頂けますでしょうか?
補足
<style type="text/css"> <!-- button#submit_button { width: 150px; height: 50px; } --> </style> <button type="submit" id="submit_button" name="point" value="10050">購入する</button>