Setiap kali saya mengembangkan formulir baru yang menyertakan textareasaya memiliki dilema berikut ketika saya perlu menentukan dimensinya:

Gunakan CSS atau gunakan textareaatribut colsdan rows?

Apa pro dan kontra dari setiap metode?

Apa yang dimaksud dengan semantik menggunakan atribut ini?

Bagaimana biasanya dilakukan?

Saya sarankan untuk menggunakan keduanya. Baris dan cols diperlukan dan berguna jika klien tidak mendukung CSS. Tetapi sebagai seorang desainer saya menimpa mereka untuk mendapatkan ukuran yang saya inginkan.

Cara yang disarankan untuk melakukannya adalah melalui stylesheet eksternal misalnya

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

Ini akan memicu browser untuk mengatur ketinggian textarea PERSIS dengan jumlah baris ditambah bantalan di sekitarnya. Mengatur tinggi CSS ke jumlah piksel yang tepat membuat spasi putih sewenang-wenang.

Menurut w3c, cols dan rows keduanya adalah atribut yang diperlukan untuk textareas. Baris dan Kol adalah jumlah karakter yang akan masuk dalam textarea daripada piksel atau nilai berpotensi sewenang-wenang lainnya. Pergi dengan baris / cols.

Jawabannya iya". Artinya, Anda harus menggunakan keduanya. Tanpa baris dan cols (dan ada nilai default bahkan jika Anda tidak menggunakannya secara eksplisit) textarea luar biasa kecil jika CSS dinonaktifkan atau diganti oleh stylesheet pengguna. Selalu perhatikan masalah aksesibilitas. Yang sedang berkata, jika stylesheet Anda diizinkan untuk mengontrol tampilan textarea, Anda biasanya akan berakhir dengan sesuatu yang terlihat jauh lebih baik, cocok dengan keseluruhan desain halaman dengan baik, dan yang dapat mengubah ukuran untuk mengikuti input pengguna ( dalam batas-batas selera yang baik, tentu saja).

Untuk area teks kita dapat menggunakan css di bawah ini untuk memperbaiki ukuran

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Diuji dalam angularjs dan angular7

 <textarea style="width:300px; height:150px;" ></textarea>

Ukuran textarea dapat ditentukan oleh atribut cols and row, atau bahkan lebih baik; melalui properti tinggi dan lebar CSS. Atribut cols didukung di semua browser utama. Salah satu perbedaan utama adalah itu <TEXTAREA ...>adalah tag kontainer: ia memiliki tag awal ().

Saya biasanya tidak menentukan height, tetapi tentukan width: ...dan rowsdan cols.

Biasanya, dalam kasus saya, hanya widthdan rowsdiperlukan, agar textarea terlihat bagus dalam kaitannya dengan elem lainnya. (Dan colsmerupakan mundur jika seseorang tidak menggunakan CSS, seperti yang dijelaskan dalam jawaban lain.)

((Menentukan keduanya rowsdan heightrasanya sedikit seperti menggandakan data, saya pikir?))

Fitur utama dari textareas adalah mereka dapat diperluas. Pada halaman web ini dapat menghasilkan bilah gulir yang muncul pada area teks jika panjang teks melebihi ruang yang Anda atur (baik itu yang menggunakan baris, atau yang menggunakan CSS. Itu bisa menjadi masalah ketika pengguna memutuskan untuk mencetak, terutama dengan 'mencetak' ke PDF - jadi atur tinggi-tinggi min yang nyaman untuk teks tercetak dengan aturan CSS bersyarat:

@media print { 
textarea {
min-height: 900px;  
}
}

jika Anda tidak menggunakan setiap kali menggunakan tinggi baris: '..'; properti itu mengontrol ketinggian textarea dan properti lebar untuk lebar textarea.

atau Anda dapat menggunakan ukuran font dengan mengikuti css:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

Baris dan baris HTML tidak responsif!

Jadi saya mendefinisikan ukuran dalam CSS. Sebagai tip: jika Anda menentukan ukuran kecil untuk ponsel pikirkan tentang penggunaantextarea:focus {};

Tambahkan beberapa ruang ekstra di sini, yang hanya akan membuka saat pengguna ingin menulis sesuatu

CSS

input
{
    width: 300px;
    height: 40px;
} 

HTML

<textarea rows="4" cols="50">HELLO</textarea>