• ベストアンサー
  • 困ってます

テキストボックスが、縦長になる

この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>

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数94
  • ありがとう数3

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

  • ベストアンサー
  • 回答No.3

>おのおの、どういう違いがあるのでしょうか? cols,rowsは文字の入力量を表す単位 width,heightは、フォームパーツの表示サイズを表す単位になります。 同じように、SubmitにWidth,Heightをつけてみればわかりますよ。 Submitに、「文字量」なんて関係ないですからね! 後は、好みのデザインになるように、調整して完成です!。 あと、style="..."はスタイルシートCSSですので、 例えば、SP(モバイル)では、このくらいにしたい? PC(パソコン)では、このくらいにしたいなど、 HTMLはそのままで、機種ごとに見やすいレイアウトにする なんてことにもできますので、こだわってくると この流れになるとは思いますが、今回の質問では そこまでは、触れてないので、スルーしておきます~。 ってことで、回答になりますかな?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

大変詳細なご回答ありがとうございました!

関連するQ&A

  • PHP からのファイル書き出しで、 HTMLタグがうまく書き出されない問題について。

    phpを使っていろんな拡張子のファイル(php html txt画代表的) を書き出すソフトを作ったのですが、 目的としては、携帯電話からアクセスしていつでも本を見ながらスクリプトを実験できるということです。 でも、なぜか「<a href="http://*****">クリック</a>」 というようなスクリプトで書き出すと「<a href=\"http://*****\">クリック</a>」 になってしまって困っています。 これは、文字コードが原因なのでしょうか。 どなたか教えてください。 <?php $data = $_POST["data"]; $extension = $_POST["extension"]; $name = "data"; if($data){ $fp = fopen($name. ".". $extension,"w+"); fwrite($fp,$data); fclose($fp); print "書き出し完了"; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis"> <style type="text/css"> <!-- textarea { width: 600px; height: 10em; } --> </style> </head> <form method="post" action="write.php"> 拡張子<br> <input type="text" name="extension" value="txt"><br/> 内容<br/> <textarea name="data"></textarea><br/><br/> <input type="submit" name="submit" value="送信"> </form>

    • ベストアンサー
    • PHP
  • 複数のsubmitボタンを使い値を送信する

    <form action="/サーブレットへ" method="post"> <input type ="TEXT" NAME="text1"> <input type ="TEXT" NAME="text2"><br> <textarea name="zzzz" cols="100" rows="10"> </textarea> <input type="hidden" name="a1" value="3"> <input type="submit" name="a1" value="作成"> <input type="hidden" name="a1" value="2"> <input type="submit" name="a1" value="修正"> </form> 複数のsubmitを使用してそれぞれ違う、値又は変数を渡し処理をしたいのですが、わかりません。 分かる方がいましたら教えてください。よろしくお願いします。

    • ベストアンサー
    • Java
  • POSTデータのNAME属性をVALUEによって取得する方法

    HTML→PHPのPOSTデータのやりとりについて、 【HTML】 <form name="form1" method="post" action="xxx.php"> <input name="01" type="text" value="1"> <input name="02" type="text" value="0"> <input name="03" type="text" value="0"> <input name="04" type="text" value="1"> <input type="submit" name="Submit" value="送信"> </form> 【xxx.php】 フォームから送信されたデータを使って、「value」が"1"の「name」を拾うのにはどのように書けばいいでしょう? ↓このように取得したいです。 $data[0]="01"; $data[1]="04"; よろしくお願いします。

    • ベストアンサー
    • PHP

その他の回答 (2)

  • 回答No.2

<textarea は col="~" じゃなくて cols="~" です。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

おっしゃるとおりです! うまくいきました

  • 回答No.1

textarea の col="1000" rows="50" は、使用可能な大きさを書いてるだけで、表示サイズではありません。 それ自体の大きさを指定したいのであれば、 style="margin: 0px; height: 1000px; width: 1000px;" などを追加してみてください (もちろん、サイズは質問者さんが決めてOKです) これで、ほぼ、質問の回答になっているようにか思いますが、 いかがでしょうか?

共感・感謝の気持ちを伝えよう!

質問者からのお礼

superside0さんの回答でもうまくいきましたが、AsariKingChangさんの記述を付け加えると、そのほうがoverrideするようです。 おのおの、どういう違いがあるのでしょうか?

関連するQ&A

  • ファイルの内容が表示できるか?

    外部ファイルでお願いします。 参照ボタンから、何でもいいのでファイルを選びます。ファイル名がテキストボックスに表示されます。 下にあるYESボタンを押すと、その下にコメントアウト してあるテキストボックスが上記のID,ファイル名に追加されテキストボックスの中に参照ボタンから選んだ ファイルが挿入される。また、左のNOボタンを押すと その列が削除されるというやり方は可能でしょうか? <html> <head> <title>画面</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table> <col width="100"> <col width="100"> <tr> <td> <input type="file" name="file"size="50"> </td> </tr> </table> <table border ="1"> <col width="50"> <col width="200"> <tr> <th>ID</th> <th>ファイル名</th> </tr> </table> <input type="button" name="yes" value="YES"value="" > <!-- <table border="1"> <col width="50"> <col width="200"> <tr> <td><input type="button" name="no"value="NO"value="" ></td> <td><input type="text" name="file" size="40" value=""></td> </tr> </table> --> </body> </html>

  • formの中で別のactionをもったsubmitボタンの設置。

    formの中で別のactionをもったsubmitボタンの設置。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>sample</title> <script language="JavaScript" type="text/javascript"> <!-- //<クリックした時に実行される関数> //*** 送信画面 function func1(form){ document.form1.text.value =form.text.value; document.form1.file.value =form.file.value; document.form1.dummy.value =form.dummy.value; document.form1.submit(); } //*** ユーザー追加画面 function func2(form){ document.form2.text.value =form.text.value; document.form2.file.value =form.file.value; document.form2.dummy.value =form.dummy.value; document.form2.submit(); } //--> </script> </head> <body class="index"> <form enctype="multipart/form-data"> <table id="table" width="100%"> <tr><th width="10%">テキスト</th><td><input type="text" name="text"> <br /> <div style="text-align:left;"> <input type="button" onClick="func2(this.form)" value="テキスト確認"> </div> </td></tr> <tr><th width="10%">添付</th><td><input type="file" name="file"></td></tr> </table> <div style="text-align:left;"> <input type="button" onClick="func1(this.form)" value="確認"> </div> </form> <!-- sousin.php画面へ --> <form method="post" name="form1" action="sousin.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> <!--- text.php画面へ ---> <form method="post" name="form2" action="text.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> </body> </html> 上記のように記述し、フォームの中に別のactionをもったsubmitボタンを設置しました。 textの内容は渡せるのですが、添付したいファイルを渡すことができません。 添付ファイルも渡せるようにするにはどうすればよいのでしょうか

    • ベストアンサー
    • HTML
  • フォームのテキストボックス内の値の制御

    以下の[1234568]という、半角数字8桁の初期値がありますが、 このテキストボックスの ・常に上4桁(1234)だけをReadOnlyにし、選択/削除/書き換え一切不可に ・フォーカスが置かれた瞬間、下四桁の数字だけを、自動で選択状態にする なんてことはできますか? 全部をReadOnlyにしたりはできるのですが・・・よろしくお願い致します。 <html> <head></head> <body> <form method="post" action="list.php" target="list" id="query" name="query"> <input value="12345678" type="text" name="numberform" onblur="Check1();"> <input type="submit" name="exec" value="検索"> </form> </body> </html>

  • javascriptでのテキストボックス制御

    javascriptを使用して 特定のテキストボックスを動的に enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。 どうかご教示ください。よろしくお願いします。 現状:チェックをいれると enable→disableになるが、外すと戻らない。 目標:同上+チェック外すと最初disableも含めて、enableになる。 <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){ if (f.form.elements[i].checked){ //checked チェックが入っていたら f.form.elements[i].disabled = false; // 入力不可, 無効化 }else{ f.form.elements[i].disabled = true; // 入力可能,有効化 } } } } </script> <style type="text/css"> <!-- ul li { list-style: none; } label { margin-right: 10px; width:200px; float: left; } --> </style> </head> <body> <form> <ul> <li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li> <li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li> </form> </ul> </body> </html>

  • Javascriptで複数のテキストエリアの文字列を連結させたいです

    Javascriptで複数のテキストエリアの文字列を連結させたいです。 初めまして、 お世話になります。 ------------------------------------------------- <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body bgcolor="#FFFFFF" text="#000000"> <form name="form1" method="post" action=""> いつ<br> <textarea name="when"></textarea> <br> <br> どこで<br> <textarea name="where"></textarea> <br> <br> だれが<br> <textarea name="who"></textarea> <br> <br> どうした<br> <textarea name="what"></textarea> <br> <input type="submit" name="submit" value="連結"> <input type="reset" name="submit" value="リセット"> <br> <br> いつどこでだれががどうした。<br> <textarea name="textfield"></textarea> </form> </body> </html> ------------------------------------------------- というHTMLがあったとして ボタンを押したら文字列を連結させたいのです。 その際、入力したテキストフィールドで文字列が改行をされてあった場合 それをそのまま反映して表示させたいのです。 ぜひよろしくお願いします。

  • PHPのお問い合わせフォームが動かない

    「ぶっとびねっと」というレンタルサーバーに以下の2つのファイルをアップしました。 ・contacts.html ・contacts.php しかしフォームに入力後、送信を押してもメールが指定したアドレスに届きません。 なぜでしょうか。。。 ソースを下に貼りますので、ご教授願います。 -----  contacts.html  -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>メールフォーム</title> </head> <body> <form method="post" action="contacts.php"> お名前:<input type="text" name="namae" /><br /> メールアドレス:<input type="text" name="meado" /><br /> 件名:<input type="text" name="subject" /><br /> お問い合わせ内容:<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------ -----  contacts.php  -------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"    /> <title>メールフォーム</title> </head> <body> <?php if ($_POST["submit"] == "メール送信") { mb_language("Ja") ; mb_internal_encoding("UTF-8") ; $mailto="○○○○@hotmail.co.jp"; $subject = $_POST["subject"]; $content = $_POST["content"]; $namae = $_POST["namae"]; $meado = $_POST["meado"]; $mailfrom="From:" .mb_encode_mimeheader($namae) ."<".$meado.">"; mb_send_mail($mailto,$subject,$content,$mailfrom); } ?> <form method="post" action=""> お名前:<input type="text" name="namae" /><br /> メールアドレス:<input type="text" name="meado" /><br /> 件名:<input type="text" name="subject" /><br /> お問い合わせ内容:<textarea name="content" cols="50" rows="5"></textarea><br /> <input type="submit" name="submit" value="メール送信" /> </form> </body> </html> ------------------------------------------------------

    • ベストアンサー
    • PHP
  • mysql insert文

    恐れ入ります。 input 送信で、perl にてレコードをinsertしたいのですが、なかなかうまくいきません。 <form action="./xxx.cgi" method="post"> <input type ="hidden" name=num></input> <input type="text" name="col1"></input> <input type="text" name="col2"></input> <input type="text" name="col3"></input> <input type="submit" value="登録"> </form> として送信して、 $sql = "insert into kensou(num,col1,col2,col3) "; $sql.="values('$form{num}','$form{col1}','$form{col2}','$form{col3}')"; # SQL実行 $sth = $db->prepare($sql); if(!$sth->execute){ print "SQL失敗\n"; exit; } で受け取ろうとしているのですが、うまくいきません。 どなたかご教授いただけないでしょうか。

  • テキストボックスの中に順番に○がついていくような・・・

    こんにちは。 jspで画像にあるような画面を表示できるようにと課題が出まして、四苦八苦しております。 内容は9個のテキストボックスがあり、OKボタンを押すごとに次のページに遷移し、1つずつ○が順に表示されていくというものです。 さらに、全てのボックスが埋まっている時に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>課題1</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> 上記と同様で、○を1つずつ増やしたファイルを9個作れば表示はできますが、それではHTMLで済んでしまいます。 1~9のボックスの部分をjava(配列)で書けますが、○を1個ずつ増やしていく方法が分かりません。 1つのファイルで自分を呼び出すという方法っぽいですが・・・ sessionでもrequestでも何でも大丈夫です。 ご教示お願いします。

    • ベストアンサー
    • Java
  • submitについて

    <script type="text/javascript"> <!-- function go() { document.getElementsByTagName("input")[3].value+="text"; } //--> </script> <form name="NAME1" action="#" method="get" onSubmit="go()"> <input type="submit" name="submit1" value="送信1" > <input type="submit" name="submit2" value="送信2"> <input type="button" name="submit3" value="送信3" onClick="go()"> <input type="text" name="text1" size="10"> </form> なのですが、送信2のsubmitを4回クリックすると以下のように表示されるのですが、どういう感じで実行されているのかわかりませんので教えていただけないでしょうか? 一応一回目はtext1=textとなるのですがテキストボックスには空になります。 2回目はtext1=textとなりテキストボックスにはtextが入ります。 3回目はtext1=texttextとなりテキストボックスには空になります。 4回目はtext1=textとなりテキストボックスは空になります。 以上よろしくお願いします。

  • テキストボックスに文字飾り表示(2の3乗)が出来ない。

    テキストボックスに文字飾り表示(2の3乗)が出来ない。  JavaScriptを使用しテキストボックスに上付き、下付き文字を表示したいのですが上手く表示しません。HTMLのコードが出てしまいます。下記簡単なコードを添付しますので、何方か正しい表示方法を教えてください。 参考までにコード中(1)は正しく表示できず(テキストボックス中)、(2)は正しく表示します。(非テキストボックス) <HTML> <HEAD> <SCRIPT language="JavaScript"> function disp(){ var c=new Array("2"+"3".sup(),"1","2"); document.tm.a1.value=c[0]; // (1) document.write(c[0]); // (2) } </SCRIPT> </HEAD> <body> <FORM name="tm"> <INPUT type="button" value="" onClick="disp()"> <INPUT name="a1" type="text" size="20" width="10"> </FORM> </body> </HTML>