- ベストアンサー
テキストボックスを横並びで表示
テキストボックスを２つ作り横並びに表示したいのですがどうしても縦ならびに表示されてしまいます。 display:inlineをCSSで入れても変化がありません。 <input style="display: inline;" type="text" name="post_1" value="<?=$_SESSION["post_1"]?>">-<input style="display: inline;" type="text" name="post_2" value="?=$_SESSION["post_2"]?>"> 他に関係する要素はあるのでしょうか？
- sublate
- お礼率26% (12/46)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
横並びに表示するだけであれば最初のinputタグのスタイルに float: left; を追加する手があります。
その他の回答 (1)
- salonpath
- ベストアンサー率48% (194/399)
親ブロックのwidthが足りてないとかかな？
関連するQ&A
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- テキストボックスが、縦長になる
このokwaveの質問テキストボックスのようなテキストボックスを作りたいです。 パソコンだけの利用です。スマホ対応は不要です。以下のようなcgiを書きました。 textarea{ のwidtを増やしたり、col=を増やしたりしていますが、横幅が狭いままで、縦長のテキストボックスになります。 どうすればよろしいでしょうか？ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> textarea { width 1000ptx; height 40em; } </style> </head> <form action="insert_data.cgi" method="post"> <input type="hidden" name="mode" value="display_data"> Data text<br> <textarea name="data_text" value="" col="1000" rows="50"></textarea> <input type="submit" value="SUBMIT" style="font-size:x-large;" /> </form>
- ベストアンサー
- CGI
- ２個のFormを横並びにしたい
HTML(5)で以下のソースに対して <form> <input type="text" id="1"> <input type="text" id="2"> </form> <form> <input type="text" id="3"> <input type="text" id="4"> </form> CSS form {display:inline} input {display:block} と書いた場合に、縦二列、横二列の表示が得られると期待したのですが 全て縦に並んでしまいました。 期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。 1 3 2 4 何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでしょうか。 なぜこうなってしまうのか仕組みも知りたいので理由を加えて教えていただけると助かります。 簡易的なサンプルコードを記載いたします。 <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <form> <input type="text" id="1"> <input type="text" id="2"> </form> <form> <input type="text" id="3"> <input type="text" id="4"> </form> </body> </html> css form{display:inline;} input{display:block;} 関係あるかわかりませんがchrome21とFirefox14を使っています。 よろしくお願いします。
- ベストアンサー
- CSS
- サーバサイドで取得した内容をテキストボックスに値を表示する
クライアント側で入力したキーにより、サーバサイドでデータベース検索を行い、その結果をテキストボックスに表示させたいのですが、 <INPUT TYPE="TEXT" NAME="ANSER" VALUE= "<% = .Fields("ANSER").Value %>"> SESSION("ANSER") = .Fields("ANSER").Value <INPUT TYPE="TEXT" NAME="ANSER" VALUE= "<% = SESSION("ANSER") %>"> <INPUT TYPE="TEXT" NAME="ANSER" %> <script LANGUAGE="VBScript"> myForm.ANSER.value = <% = SESSION("strchiku") %> </SCRIPT> などとやってもうまくいきません。 変数だとうまくセットされないようです。 ちなみに、ASPで、FORM をSUBMITすると自分自身を呼び出すようになってます。 <HTML> <% データベース検索処理 %> <FORM> <INPUT> </FORM> </HTML> どなたかお知恵をお貸しくださいませんか。
- 締切済み
- Microsoft ASP
- テキストボックスの初期値について
テキストボックスに初期値を入れたいときは <input name="text1" type="text" value="初期値"> というように、valueで指定すると思うのですが、 初期値に【"】半角のダブルクオートを含めたい場合は どのように記述するのですか？ <input name="text1" type="text" value=""初期値""> のように記述すると空白が表示されてしまいます。 よろしくお願いします。
- ベストアンサー
- HTML
- submit()の動作について。
<style type="text/css"> .p1{display=none;} </style> <script language="JavaScript"> function BtnNone(){ document.btn1.style.display = "none"; document.msg1.style.display = "inline"; document.frm1.submit(); } </script> </head> <form name="frm1" method="post" action="send.cgi"> <div id="btn1"> <input type="text" name="a"> <input type="submit" name="submit" value="SEND" onClick="BtnNone()"> <input type="submit" name="submit" value="BACK"> </div> <p class="p1" id="msg1">送信中</p> </form> ------------------------- 主旨が変わったので新しく質問します。 こういうソースで"SEND"をクリックするとボタンが消えて「送信中」のメッセージが表れるのですが、secd.cgiがsubmitされません。 どこが間違っているのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストボックスの中に順番に○がついていくような・・・
こんにちは。 jspで画像にあるような画面を表示できるようにと課題が出まして、四苦八苦しております。 内容は９個のテキストボックスがあり、OKボタンを押すごとに次のページに遷移し、１つずつ○が順に表示されていくというものです。 さらに、全てのボックスが埋まっている時にOKボタンを押すと全て空になり、また最初に戻ります。 自分で書いてみたコードはこんな感じです。 <%@page language="java" %> <%@page contentType="text/html;charset=Shift_JIS" %> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <HTML><HEAD><TITLE>課題１</TITLE> </HEAD><BODY> <FORM ACTION="kadai2.jsp" METHOD="post"> <BR> No.1:<INPUT TYPE="text" name="box1" VALUE="○"><BR> No.2:<INPUT TYPE="text" name="box2"><BR> No.3:<INPUT TYPE="text" name="box3"><BR> No.4:<INPUT TYPE="text" name="box4"><BR> No.5:<INPUT TYPE="text" name="box5"><BR> No.6:<INPUT TYPE="text" name="box6"><BR> No.7:<INPUT TYPE="text" name="box7"><BR> No.8:<INPUT TYPE="text" name="box8"><BR> No.9:<INPUT TYPE="text" name="box9"><BR> <INPUT TYPE="submit" VALUE="ok"> </FORM> </BODY></HTML> 上記と同様で、○を１つずつ増やしたファイルを９個作れば表示はできますが、それではHTMLで済んでしまいます。 １～９のボックスの部分をjava(配列)で書けますが、○を１個ずつ増やしていく方法が分かりません。 １つのファイルで自分を呼び出すという方法っぽいですが・・・ sessionでもrequestでも何でも大丈夫です。 ご教示お願いします。
- ベストアンサー
- Java
- 複数のラジオボタン項目でのテキスト入力欄の有効化
調べながら手探りでソースを書いてみましたが、うまく動きません。 javascript初心者ですので、ものすごく初歩的な勘違いがあったり、または根本から全く間違っているかもしれません。 以下のソースのように、ラジオボタンで選択してもらう項目が３つある場合、それぞれ「なし」を選択した場合だけテキスト入力欄を非表示にしたいのですがうまく動きません。 ラジオボタンで選択する項目が１つずつだとうまくいくのですが、３つの場合どこを修正したらいいのでしょうか？ よろしくお願いします。 【HTML】 <script type="text/javascript" src="sample.js" charset="UTF-8"></script> <ul> <li><input type="radio" name="AAA" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="AAA" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="AAA" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="AAA" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="AAA-text" style="display:none;"> <input type="text" name="XXX" size="15" > </p> <ul> <li><input type="radio" name="BBB" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="BBB" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="BBB" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="BBB" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="BBB-text" style="display:none;"> <input type="text" name="YYY" size="15" > </p> <ul> <li><input type="radio" name="CCC" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li> <li><input type="radio" name="CCC" id="by_week" value="１週間ごと" onClick="changeDisplay()"/>１週間ごと</li> <li><input type="radio" name="CCC" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li> <li><input type="radio" name="CCC" id="by_year" value="１年ごと" onClick="changeDisplay()"/>１年ごと</li> </ul> <p id="CCC-text" style="display:none;"> <input type="text" name="ZZZ" size="15" > </p> 【sample.js】 function changeDisplay() { if ( document.mailform["AAA"][0].checked ) { document . mailform["XXX"] . disabled = true; document . getElementById('AAA-text') . style . display = "none"; } else { document . mailform["XXX"] . disabled = false; document . getElementById('AAA-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["BBB"][0].checked ) { document . mailform["YYY"] . disabled = true; document . getElementById('BBB-text') . style . display = "none"; } else { document . mailform["YYY"] . disabled = false; document . getElementById('BBB-text') . style . display = "inline"; } } window.onload = changeDisplay; //---------------------------------------------------------------------------- function changeDisplay() { if ( document.mailform["CCC"][0].checked ) { document . mailform["ZZZ"] . disabled = true; document . getElementById('CCC-text') . style . display = "none"; } else { document . mailform["ZZZ"] . disabled = false; document . getElementById('CCC-text') . style . display = "inline"; } } window.onload = changeDisplay;
- ベストアンサー
- JavaScript
- 降順ソートができません。
テキストボックスを画面左側に10個作成します。 テキストボックスを画面右側に10個作成し、 降順ソートボタンを作成します。 左側10個に入力された数値データを降順ソートして 右側の10個のテキストボックスに表示してください。 <?php //配列 $naNumber[0] = $_POST[naNumber0]; $naNumber[1] = $_POST[naNumber1]; $naNumber[2] = $_POST[naNumber2]; $naNumber[3] = $_POST[naNumber3]; $naNumber[4] = $_POST[naNumber4]; $naNumber[5] = $_POST[naNumber5]; $naNumber[6] = $_POST[naNumber6]; $naNumber[7] = $_POST[naNumber7]; $naNumber[8] = $_POST[naNumber8]; $naNumber[9] = $_POST[naNumber9]; //読込 echo ("<form name = naNumberList method = POST action = ./php05.php>"); echo ("<table boder = 1><tr><td>"); //入力用テキストボックスの作成 //テキストボックス名・形式(右寄せ)・配列 echo ("<input type = text name = naNumber0 style = text-align:right; value = $naNumber[0]><br> <input type = text name = naNumber1 style = text-align:right; value = $naNumber[1]><br> <input type = text name = naNumber2 style = text-align:right; value = $naNumber[2]><br> <input type = text name = naNumber3 style = text-align:right; value = $naNumber[3]><br> <input type = text name = naNumber4 style = text-align:right; value = $naNumber[4]><br> <input type = text name = naNumber5 style = text-align:right; value = $naNumber[5]><br> <input type = text name = naNumber6 style = text-align:right; value = $naNumber[6]><br> <input type = text name = naNumber7 style = text-align:right; value = $naNumber[7]><br> <input type = text name = naNumber8 style = text-align:right; value = $naNumber[8]><br> <input type = text name = naNumber9 style = text-align:right; value = $naNumber[9]> </td>"); //降順にソート rsort($naNumber); //降順ソート表示用テキストボックス //テキストボックス名・形式(右寄せ)・読込専用・配列 echo ("<td><input type = text name = naNumber0 style = text-align:right; readonly value = $naNumber[0]><br> <input type = text name = naNumber1 style = text-align:right; readonly value = $naNumber[1]><br> <input type = text name = naNumber2 style = text-align:right; readonly value = $naNumber[2]><br> <input type = text name = naNumber3 style = text-align:right; readonly value = $naNumber[3]><br> <input type = text name = naNumber4 style = text-align:right; readonly value = $naNumber[4]><br> <input type = text name = naNumber5 style = text-align:right; readonly value = $naNumber[5]><br> <input type = text name = naNumber6 style = text-align:right; readonly value = $naNumber[6]><br> <input type = text name = naNumber7 style = text-align:right; readonly value = $naNumber[7]><br> <input type = text name = naNumber8 style = text-align:right; readonly value = $naNumber[8]><br> <input type = text name = naNumber9 style = text-align:right; readonly value = $naNumber[9]> </td></tr>"); //降順ソートボタン作成 echo ("<tr><td colspan = 3 align = left> <input type = button value = '降順ソート'> </td></tr> </table> </form>"); ?> 上記のソースで、テキストボックス表示・降順ソートボタン表示までできました。 しかし、降順ソートができません。。 降順ソートの書き方をいろいろ変えてみたのですが。 どなたかご存知であれば教えてください！お願いいたします。
- ベストアンサー
- PHP
- テキストボックスの表示
よろしくお願いします。 早速ですが、テキストボックスにおいて、入力した値を POSTしても残すようにしていたのですが、突然できなくなりました。 何が原因と思われますか？ php.iniの内容とか関係してきますでしょうか？？ formのactionはPHP_SELFにして、 <input type=text name=hoge value=$hoge> にして -------------------------------------------------- $hoge=$_REQUEST["hoge"]; 以下処理を走らせてます。 今までは問題なかったのですが・・・・ よろしくお願いします
- ベストアンサー
- PHP
お礼
恥ずかしながら指摘のミスでした。 ありがとうございました。