入力テキストのサイズの設定方法

HTMLで画面に入力フォームをtextarea要素を使用して作成しようと思いました。入力フォームは、幅は画面の左半分(50%)、高さは上から画面サイズに応じて80%ぐらいをイメージしています。しかしながら、入力フォームのサイズを調節する属性はcolsとrowsであり、これは入力フォームの幅と高さに対応しているのですが、文字数の指定によりフォームのサイズを決定しているようです。しかしながら、自身が求めているのは画面サイズに依存したテキストフォームを望んでいます。どなたかご教授頂けると幸いです。よろしくお願いいたします。

該当のソースコード

HTML
1<!DOCTYPE html>
2    <head>
3        <meta charset="utf-8">
4    </head>
5    <body>
6        <form>
7            <textarea cols="46" rows="60"></textarea>  
8        </form>
9    </body>
10</html>

参照サイト

textarea

行動規範の内容に同意します

回答2件

<textarea></textarea> <style> textarea { width:50%; height: 80vh; } </style>

これでいけると思います。

投稿2020/07/17 03:51

wing283

総合スコア123

適当に

html
1<html>
2  <head>
3    <style type="text/css">	
4      div.test1{
5        display: flex;
6        flex-wrap: wrap;
7        height: 80%;
8      }	
9      div.test3{
10        width: 50%;
11      }	
12      div.test2{
13        width: 50%;
14        background-color: #fefe;  <!-- わかりやすいように色付 -->
15      }	
16      textarea{
17        width: 100%;
18        height: 100%;
19      }
20    </style>
21  </head>
22  <body>
23    <div class="test1">
24      <div class="test3">
25        <form>
26          <textarea ></textarea>  
27        </form>
28      </div>
29      <div class="test2">
30        test                 <!-- 中にpreviewの要素を入れる -->
31      </div>
32    </div>
33  </body>
34</html>