Каждый раз, когда я разрабатываю новую форму, которая включает в себя, у textareaменя возникает следующая дилемма, когда мне нужно указать ее размеры:

Использовать CSS или использовать textareaатрибуты colsи rows?

Каковы плюсы и минусы каждого метода?

Какова семантика использования этих атрибутов?

Как это обычно делается?

Я рекомендую использовать оба. Строки и столбцы обязательны и полезны, если клиент не поддерживает CSS. Но как дизайнер я перезаписываю их, чтобы получить именно тот размер, который желаю.

Рекомендуемый способ сделать это с помощью внешней таблицы стилей, например

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

<textarea> </textarea>

textarea { height: auto; }

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

Это заставит браузер установить высоту текстовой области ТОЧНО на количество строк плюс отступы вокруг него. Установка высоты CSS на точное количество пикселей оставляет произвольные пробелы.

Согласно w3c, столбцы и строки являются обязательными атрибутами для текстовых областей. Rows and Cols - это количество символов, которые будут помещаться в текстовой области, а не в пикселях или других потенциально произвольных значениях. Перейти с строк / столбцов.

Ответ "да". То есть вы должны использовать оба. Без строк и столбцов (и есть значения по умолчанию, даже если вы не используете их явно), текстовое поле будет необычайно маленьким, если CSS отключен или переопределен пользовательской таблицей стилей. Всегда помните о доступности. Тем не менее, если вашей таблице стилей разрешено контролировать внешний вид текстовой области, вы, как правило, получите что-то, что выглядит намного лучше, хорошо вписывается в общий дизайн страницы и может изменить размер, чтобы не отставать от пользовательского ввода ( в пределах хорошего вкуса, конечно).

Для текстовой области мы можем использовать ниже CSS, чтобы исправить размер

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

Проверено в angularjs и angular7

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

Размер текстовой области может быть задан атрибутами cols и rows или даже лучше; через CSS свойства высоты и ширины. Атрибут cols поддерживается во всех основных браузерах. Одно из основных отличий состоит в том, что <TEXTAREA ...>это контейнерный тег: у него есть стартовый тег ().

Я обычно не указываю height, но уточняю width: ...и rowsи cols.

Обычно в моих случаях только widthи rowsнужно, чтобы текстовая область выглядела красиво по отношению к другим элементам. (И colsэто запасной вариант, если кто-то не использует CSS, как объяснено в других ответах.)

((Задание обоих rowsи heightпохоже на дублирование данных, я думаю?))

Главной особенностью текстовых областей является то, что они расширяются. На веб-странице это может привести к появлению полос прокрутки в текстовой области, если длина текста превышает установленное вами пространство (будь то с использованием строк или с использованием CSS. Это может быть проблемой, когда пользователь решает печатать, особенно с «печать» в PDF - поэтому установите комфортно большую минимальную высоту для печатных текстовых полей с условным правилом CSS:

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

если вы не используете каждый раз, используйте line-height: '..'; свойство контролирует высоту текстовой области и свойство ширины для текстовой области.

или вы можете использовать размер шрифта, выполнив следующую команду:

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

HTML строки и столбцы не реагируют!

Поэтому я определяю размер в CSS. Как совет: если вы определяете небольшой размер для мобильных телефонов, подумайте об использованииtextarea:focus {};

Добавьте здесь дополнительное пространство, которое развернется только в тот момент, когда пользователь захочет что-то написать.

CSS

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

HTML

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