HTMLのBUTTONタグでVALUEを取得できない問題について

このQ&Aのポイント
  • HTMLのBUTTONタグを使用してボタンを定義する際、VALUE属性で指定した値を取得できない問題が発生しています。
  • BUTTONタグのVALUE属性は、プログラムから参照する値を指定するためのものであり、<input>タグのVALUE属性とは異なる仕組みです。
  • インターネットエクスプローラーでは、BUTTONタグ内部の<div>が表示されてしまい、値が表示されないという問題が起こっています。
回答を見る
  • ベストアンサー

HTML の BUTTON タグの VALUE で指定した値を取得できません

BUTTON タグは、NAME で変数名、VALUE でその値を指定してプログラムから参照できることになっていますね。 「value属性を使用すると、ボタンがクリックされたときに、<form>タグのaction属性で指定されたプログラムに渡す値を指定することができます。 <input>でボタンを定義する際のvalue属性は、ボタンに表示されるラベルを変更するものでしたが、<button>タグのvalue属性は、ラジオボタンやチェックボックスのvalue属性と同様、プログラムが参照する値を指定するものですので、間違わないように気をつけてください。 」 引用元:http://w-d-l.net/html__tags__body__form__button/ これを参考に、HTML で次のように書きました。 <button type="submit" name = "Number" value="1" style="..."><div style="...">表示内容</div></button> それを PHP プログラムで参照して出力しました。 print $_POST["Number"]; インターネットエクスプローラー(バージョン6 SP3)では、<div>~</div>が表示されてしまいます。 Firefox では値(1)が表示されています。 (これが正しい振る舞いと思います。) ブラウザにより振る舞いが異なっているので、とても困っています。 これは、インターネットエクスプローラー特有の症状でしょうか? また、回避策があればぜひ教えてください。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>ブラウザにより振る舞いが異なっているので、とても困っています。 >これは、インターネットエクスプローラー特有の症状でしょうか? そうみたいですね >また、回避策があればぜひ教えてください。 ありません。IEをつかわないかbuttonタグをつかわないかです。 <input type="submit" value="hoge" name="fuga">で処理すれば 処理は一定になります

otadune
質問者

お礼

回答ありがとうございます。 IE が必須の環境で、多少変わったレイアウトを button タグで実現する予定でしたが、見切ることができました。。

関連するQ&A

  • <form>中の<button>タグのvalue値

    いつもお世話になっています。 以下のformでボタンを押してポストした時、受信側でvalueの値が取得できず、ボタン名が取得されます。 <form method="post" action="送信URL">   <button type="submit" name="hoge" value="ボタンの値">ボタン名</button> </form> 正しくvalueを取得する方法をご教示ください。 よろしくお願いします。

  • buttonのVALUEが渡される条件

    form内にINPUTタグでbuttonを複数設定するのですが、 buttonのVALUEがパラメタで渡される場合と渡されない場合があり、 悩んでいます。 一番いいのはどんな状況でもbuttonのVALUEが渡されない状態にしたいのですが、buttonのVALUEが渡される条件を教えていただけたらと思います。 今のソースでは、位置により渡される場合とそうでない場合に別れます。 下記ソースの場合ですと、8行目の「btn_a」のVALUE「ボタンA」がパラメタで渡されます。 しかし、18行目の「INPUT TYPE="text"…」以降に設定すると渡されないのです。 この違いはなんでしょうか。 説明不足でしたら補足致します。 ご教授頂けると助かります。 1<FORM ACTION="xxxxxxx" METHOD="POST" NAME="form_1" onSubmit="return false"> 2 3-- 外側のテーブル 4<TABLE> 5 <TR> 6 <TD> 7 <div align="right"> 8 <INPUT TYPE="button" NAME="btn_a" VALUE="ボタンA" onClick="a_click();"> 9 </div> 10 </TD> 11 </TR> 12 <TR> 13 <TD> 14 -- 内側のテーブル 15 <TABLE> 16 <TR> 17 <TD>項目あ</TD> 18 <TD><INPUT TYPE="text" NAME="t_name" SIZE="80" MAXLENGTH="80"></TD> 19 </TR> 20 21 (中略) 22 </TABLE> 23 </TD> 24 </TR> 25</TABLE>

  • buttonタグの長さを揃えたい

    buttonタグの長さが、ばらばらになるので長さを統一したいのですが、 IEだと、width=30% などの記述をすると揃うのですが、 netscape(4.75)だとうまくいきません。 例えば、buttonのvalueに「あああ」とするのと「いいいいい」とする 2つのボタンがあったとします。 何も指定しなければ、長さはばらばらになります。 そこでwidth="30%"と指定をしてみたのですが、IEでしかききませんでした。 空白文字を間に入れると言うことは、したくないので、 困っています。 何か、良い案があればご教示いただけるとありがたいです。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • value文のないInputタグ

    Inputタグの内容を送信したいのですが、 例えば、フォームF1のテキストエリアT1に、 document.F1.T1.value = "テスト"; として、JavaScript側から値(value)を指定します。 この場合、 <form method="post" name="F1"> <input type="text" name="T1"> </form> とするだけで、ブラウザに、「テスト」と表示させられますよね。 しかし、Inputタグの中に「value」の値が無いため、 他のURLに、テキストエリア「T1」の内容を送信することができません。 このようにJavaScript側から値(value)を指定したInputタグの値を送信する方法について教えてください。

  • Javascriptでのbuttonのname属性、もしくはid属性を取得

    押されたボタンのname属性、もしくはid属性を取得し、処理を分けるプログラムを考えています。 <form>タグ自体にid属性は存在しますが、name属性はありません。 その状況で、押されたボタンのid、もしくはnameを取得するにはどうしたらいいでしょうか?

  • HTMLの<form>タグ内の値について

    フォーム上にクリックボタンを2つ表示してそれぞれ違う処理を実行したいと考えて います。HTML<form>タグを2つ作成して1つ目に処理1のプログラム、2つ目の <form>タグに処理2の処理を実行したいと考えています。 <form>処理1</form><form>処理2</form> 処理1にPHPを埋め込みクリッカブルボタンをプログラムで書き込みます。 <?php for($ctr=0;$ctr<MAX;$ctr++){ ?> <input type="radio" name="area" value=<?=$area[$ctr][0]?> onClick="area.value = <?=$area[$ctr][0]?>"><b><?=$area[$iCnt][1] <?php } ?> ※情報が格納されたPHPの連想配列の情報を元にクリッカブルボタンを作成し、  チェックされた情報を保持したいと考えています。 上記の場合、保持したデータを上記の処理1では利用できますが、 処理2の方ではareaにアクセスしてもデータがありません。 これはformが異なるためデータを読むことができないのでしょうか? 別フォーム内で取得したデータを別フォームで参照することはできないのでしょうか? もしかしたら私の質問が意味不明かもしれませんが ご存知の方がいらっしゃいましたら宜しくお願いいたします。

  • inputタグのnameとvalue属性について教えてください。

    inputタグのnameとvalue属性について教えてください。 <label><input type="radio" name="性別" value="男" />男</label> <label><input type="radio" name="性別" value="女" />女</label> という風にformの内容は「name:valueで1セット」として送信されると思っていました しかしxhtml1.1ではname属性が廃止されたと思います。 xhtmlではvalueだけでデータを送信するのでしょうか? それとも、form内のname属性は例外でしょうか?

  • HTMLタグの生成について

    HTMLタグの生成について、質問させて頂きます。 ボタンをタップすると、テキストボックスに「<a>」タグを表示する事は できたのですが、複数回押下した際には既にテキストボックスにある <a>タグの後に<a>を追加させたいのですが、上書きされてしまうようでうまくいきません。 参考サイトまたは、お分かりの方がいたらご教授お願い致します。 下記がサンプルソースになります。 よろしくお願い致します。 <script language="JavaScript"> <!-- function my61() { document.form6.text62.value='<a href=#>';} //--> </script> <form name="form6"> <input type="text" name="text61" size="20">   <input type="button" value="CLICK!" onClick="my61();"> </form>

  • firefoxでvalue取得に失敗する。

    firefoxでvalue取得に失敗する。 2回パスワードを入れさせるテキストボックスで、 下記のようなhtml,JavaScriptを書いております。 【sample.html】 <html><body> <form action="login.php" name="form1" method="post"> パスワード: <INPUT type="password" name="password" value"> <br> パスワード再入力: <INPUT type="password" name="password2" value=""> <br> <BUTTON type="button" name="btn1" id="btn1" onclick="clickbtn();">更新</button> </form> </body></html> 【sample.js】 function clickbtn() {  alert(form1.password.value);  alert(form1.password2.value);   if(form1.password.value != form1.password2.value){   alert("パスワードが違います");   return 1;   } } ボタンを押した時、IEでは意図通りにpasswordとpassword2に書かれた内容を 表示してくれるのですが、FireFoxではエラーがでます。 エラーコンソールの内容は「form1.password undefined」です。 パスワード用テキストボックスタグに id=password を追加、 パスワード再入力用のテキストボックスタグ id=password2 を追加する事で 意図した動作をfirefoxでも得る事が出来ましたが、 これはJavaScriptは、firefoxではタグをnameではなくidで区別すると解釈して良いのでしょうか? また、id値を追記する事で動きはしたのですが、エラーコンソールに 「グローバルスコープでIDまたはname属性値により要素を参照しています。  変わりにW3C標準のdocument.getElementByID()を使用してください。」 という警告が出まして、「id値追記するだけでよいのか?」と悩んでいます。 alert(document.getElementByID(”form1.password”)); という記述をしても警告が消えないので、警告文の通りにするのが正しいとも思えません。 firefoxへの対応を皆様がどのようにされているのか、教えていただきたく質問いたします。 宜しくお願いします。

  • paramタグのvalue値を取得する方法

    はじめまして。JavaAppletにかんするHTMLで <applet name="myApplet"> <param name="myParam" value="ABCDE" /> </applet> としたとき、Javascriptによって、このparamタグの値「ABCDE」だけを文字列として取得するには、どのように記述すればよいのでしょうか。(特にIE 7やFireFox 3で動作するように) フォームの扱いと同様に、 text = document.myApplet.myParam.value; のように書いてみましたがうまくいきません。ご存じの方がいらっしゃれば、教えてください。 条件としては、paramタグにid属性を加えたり、JavaAppletそのもののソースコードを書き換えたりする必要がない方法でお願いします。(appletタグにid属性をつけるのはOK)

専門家に質問してみよう