input type buttonのタグについて

2023/08/03 17:21

このQ&Aのポイント

input type buttonのタグを使用してボタンの色を変える方法を教えてください。
input type buttonのタグを使用して四角の型にボタンを変える方法を教えてください。
input type buttonのタグを使用してボタンに記号や絵を追加する方法を教えてください。

ベストアンサー

Input Type Buttonのタグについて

2007/02/24 15:17

◎input type=button の色を変えるには <INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト"> この中の↑どこに色を追加したらよいのでしょうか？ ◎input type=button の型をhttp://okwave.jp/　のページ上の {例}『 ? 質問する』『！質問、回答を見る』『(ハートマーク)お礼を見る』のような四角の型にするにはこの中の↓どの部分を変更又はどの部分に何を追加したらよいのでしょうか？ <INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト"> ◎どうしたら『 ? 質問する』『！質問、回答を見る』『(ハートマーク）お礼を見る』のように？、！、ハートマークなどの記号や絵をinput type button に文字を書き込む時、ボタン内の文字の前に記号や絵をつけられるのでしょうか？ ◎やっとボタンを作ることができたのですが、クリックしても画面が変わらないのはURLを設定していないからだと思うのですがこの中の↓どこへ設定したら画面を変えることができますか？ <INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト"> 上手に説明できませんが、ご存知の方がおられましたら教えて下さいいろいろ調べてやってみたのですが、１つ１つの部分、部分説明があっても全部を１つのタグとしてつなげることができません。急ぎでかなり困っております、宜しくお願い致します。沢山の質問ですみません。

asdflkj
お礼率83% (15/18)

その他([技術者向] コンピューター)
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

EndoW
ベストアンサー率50% (1/2)

2007/02/24 15:54 回答No.1

◎input type=button の色を変えるには・・・・ <INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> このようにするとcolorでフォント色、background-colorで背景色、border-colorで枠の色が設定できます。細かい設定をするなら、スタイルシートというものを使うと便利ですよ！ ◎input type=button の型をhttp://okwave.jp/　のページ上の・・・ ◎どうしたら『 ? 質問する』『！質問、回答を見る』・・・ページを見てみると、このボタンはinput type=buttonで作っているわけではなく、スタイルシート+gifファイル（画像）でボタンのように見せているようです。なので、inputタグだけでなく、別途画像を用意しないと、このようなボタンは作れないと思います・・・ ◎やっとボタンを作ることができたのですが、・・・・ <INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='～～～'"> のように書くとリンク先が指定され、画面遷移するはずです。リンク先の指定は、onClick="location.href='～～～'"の～～～の部分に行ってください。（例）ボタンを押したとき、教えてgooトップページに飛ばしたい場合は、 <INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='http://oshiete.goo.ne.jp/'"> で飛ぶと思います。

質問者

お礼 2007/02/24 18:24

ご回答ありがとうございます、早々にお返事を下さり有難うございますすぐに試してみました。初めて飛ばすことができました＼(^◇^)／ <INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='～～～'"> これ↑で出来ました、ここ数日間かなり苦戦しておりましたので、とても嬉しいです、有難うございます。すぐに回答を拝見させて頂いたのですが、教えて頂きましたので結果をご報告させて頂きたいと思いお礼が遅くなりました、すみません、今まで色々と試しておりました、スタイルシートも初めて知りました、色々と調べてみましたがまださっぱり分かりませんが、スタイルシートを知っただけでも勉強になりました。本当に有難うございますm(_ _)m

質問者

補足 2007/02/24 18:25

◎なぜか色が変わりませんでした。 <INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> これ↑とこれ↓サンプルカラーで何度か試してみましたが、やはり色が変わりませんでした。<INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;">　どこがいけないのでしょうか？ ◎やはりgif画像が関係していたのですね。。。スタイルシートについてのサイトを調べていますが、説明分のほとんどがその部分だけの作り方で、全てのタグを１つにつなげることが、かなり難しいです。自分で描いたイラスト？又は何かをGif画像にして『スタイルシート+gifファイル（画像）』にした場合 [例]『 ? 質問する』『！質問、回答を見る』このような可愛いものができるんですよね？ <INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='?http://oshiete.goo.ne.jp/'">? この中にスタイルシートとgif画像をつなげるのでしょうか？もしご迷惑でなければ教えて下さい。飛ばすことができただけでも、本当に助かりました、有難うございます。よろしくお願い致します。

関連するQ&A

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@@@@@@@'"> お手数をお掛け致しますが宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
Input Type Buttonの色の変え方
<INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> これ↑とこれ↓サンプルカラーで何度か試してみましたが、色が変わりませんでした。 <INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;">　どこが違うのでしょうか？お手数をお掛け致しますが、宜しくお願い致します。
- 締切済み
- その他（インターネット・Webサービス）
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
javascriptでinput属性の入力
複数のボタンがあります。それぞれのボタンによって、value値を変えたいと考えています。通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>
- ベストアンサー
- JavaScript
Form で、input type="button"　を利用するとＰＯＳＴされない？
宜しくお願いします。 PHP5.0 MySql Smarty にて開発中です。 <form action="aaa.php" name="m_deleate" method="post"> 内に、　<input type="hidden" name="del" value="{{$member_id.v}}" /> 　<input type="button" onClick="●●●();" value="削除" /> として、javascript を呼び出して確認ダイアログを表示後、 aaa.php　にPOSTさせると言うページを作成しました。ボタンを押せば上手くPOSTされます。しかしあるページだけPOSTが成功せず、ソースも同じなのに、 hiidenのvalueの値がPOSTされないケースがでてきました。原因を絞り込む為に、かなり細切れにして探りましたが、 typeを、button　にするのではなく、submit　にすれば当然のごとく上手くいってしまいます。しかし、type="submit"では、javascriptを絡めることができないので、 type="botton"　にこだわっております。といいますか、問題のページ以外は、この方法で上手くいっています。 aaa.php　内では、 //削除処理判定 if(isset($_POST["del"])){ として、お決まりのif判定を行っています。どなたか、 <input type="button"・・・を使用する際の注意点や問題点をお聞かせ下さいませ。直感的なご回答でもかまいません。かなりはまっております。何卒宜しくお願いいたします。
- 締切済み
- PHP
input button の文字の色を２色使いたい
下記ボタンで="成績考課の検索は"、"まで”を青色 2008/0401-2009/0301を赤色にしたいのですが。　　　　　　　どうしたらいいでしょうか。 <input type="button" name="ボタン１" value="成績考課の検索は2008/0401-2009/0301まで">
- ベストアンサー
- HTML
onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？教えてください！現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
<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
超初心者です。buttonをselectに変えるには？
<SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>～<select> に変えたいと思っています。自分の頭ではいろいろやってもうまくいきませんでした。どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
<input> のbuttonで関数を実行したい
<input> 要素のbuttonを押すと※の処理が実行されるようにするには、どの部分を直すべきかご指摘いただけませんか。よろしくお願いします。 -aaa.html <html> <!DOCTYPE> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> -bbb.js document.getElementById("ccc").onclick = function buttonClick(){※}
- ベストアンサー
- JavaScript