Haruskah saya mengukur textarea dengan atribut CSS width / height atau HTML cols / rows?


307

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?

Jawaban:


268

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>


4
Ini baik-baik saja, tetapi Anda harus menyadari bahwa ruang sewenang-wenang apa pun yang Anda atur ukurannya akan sia-sia dan benar-benar hanya untuk pertunjukan.
Pil Ledakan

4
@tandu: Apa yang Anda maksud dengan "akan sia-sia dan benar-benar hanya untuk pertunjukan"?
BoltClock

2
baris / cols didasarkan pada ukuran karakter pengguna. Jadi jika Anda memiliki lebar / tinggi css yang ditentukan yang tidak dapat dibagi dengan piksel karakter dalam textarea, akan ada banyak whitepace yang tersisa secara vertikal dan horizontal. Mungkin tidak ada yang akan memperhatikan, tapi katakan saja.
Pil Ledakan

21
Anda bisa menggunakan "em" sebagai pengukuran, bukan piksel. 1em adalah lebar "M" dalam font dan ukuran apa pun. Tetapi cols hanya relevan jika digunakan dengan font monospace, yang dalam kebanyakan desain tidak demikian. Untuk mendapatkan ketinggian yang pas, gunakan kelipatan line-heightuntuk ketinggian textarea Anda.
kogakure

5
@LeoGalleguillos “Diperlukan dan bermanfaat jika klien tidak mendukung CSS ”. Tidak ada yang mengatakan apa pun tentang validasi.
Janus Bahs Jacquet

96

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.


4
Sayangnya, "Ketinggian textarea tidak cocok dengan baris di Firefox" - ini "rows +1" stackoverflow.com/q/7695945/1266880
apurkrt

2
Tidak yakin apakah semuanya telah berubah sejak '13 atau apakah ada sesuatu yang super tidak jelas tentang situasi khusus saya, tetapi pengaturan height: auto;di CSS tampaknya tidak mempengaruhi textarea saya sama sekali.
clozach

10

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.


8
sekolah w3c menyatakan bahwa Anda dapat mengaturnya melalui atribut baris dan cols tetapi pengaturan tinggi dan lebar lebih baik. Tidak disebutkan baris dan cols sebagai atribut yang diperlukan untuk textarea di w3c.org. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Michael

17
@MichaelStramel jawaban saya empat tahun :) - omong-omong itu bukan sekolah w3c. Mereka tidak berafiliasi. Saya tidak yakin HTML5 memiliki konsep atribut yang diperlukan lagi, tapi saya bisa salah tentang itu. Saya masih tidak melihat mengapa pengaturan lebar / tinggi akan lebih baik daripada baris / cols
Explosion Pills

3
Saya menyadari bahwa setelah saya berkomentar tetapi masih merasa itu relevan bagi siapa saja yang membaca posting ini. Juga, dengan desain responsif, baris dan cols dapat menyebabkan masalah kecuali jika diatur melalui JavaScript. IMO itu membuat pengaturan melalui CSS cara yang jauh lebih baik.
Michael Stramel

6

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).


6

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


1
Apa hubungannya ini dengan Angular? Dan bagaimana ini menambahkan dibandingkan dengan jawaban yang ada dari 2010 /
Lazar Ljubenović

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

19
@ user470962 Hominem iklan. Jika Anda memperbaiki kesalahan sintaks ke '<textarea style = "width: 300px; height: 150px;">' maka kode tersebut baik-baik saja. Tidak perlu menghina seseorang. Seperti yang Anda lihat, jawaban yang paling populer tidak seperti jawabannya. +1
TAAPSogeking

1
@TAAPSogeking dalam keadilan, ini adalah jawaban yang sama, 4 tahun kemudian. -1
Rambatino

4

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 ().


2

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?))


2

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;  
}
}

2

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%;
}

2

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


-11

CSS


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

HTML


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

Anda dapat melakukannya dengan sangat mudah
ASHU

Anda dapat melakukannya dengan dua cara dengan css atau Anda dapat memberi makan secara manual seperti ini <textarea rows = "4" cols = "50"> HELLO </textarea>
ASHU

Mengapa Anda menerapkan properti itu ke semua elemen?
blackmambo

Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa memecahkan masalah akan meningkatkan nilai jangka panjang jawaban.
Donald Duck
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.