こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2018-11-19 16:35:50

QNo.9559616

困ってます

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

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

投稿日時 - 2018-11-20 10:39:45

お礼

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

投稿日時 - 2018-11-20 13:20:34

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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

投稿日時 - 2018-11-19 22:32:27

お礼

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

投稿日時 - 2018-11-20 07:42:28

textarea の
col="1000" rows="50"
は、使用可能な大きさを書いてるだけで、表示サイズではありません。

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

投稿日時 - 2018-11-19 17:12:10

お礼

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

投稿日時 - 2018-11-20 07:45:26

あなたにオススメの質問