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

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

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

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

Ответы

Ответ 1

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

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

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

<textarea> </textarea>

Ответ 2

В HTML-наборе

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

В наборе CSS

textarea { height: auto; }

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

((Указание как rows, так и height немного напоминает дублирование данных, которые я думаю?))

Ответ 9

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

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

Ответ 10

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

или вы можете использовать размер шрифта, следуя css:

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

Ответ 11

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

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

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

Ответ 12

CSS

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

HTML

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

Должен ли я размер текстовой области с атрибутами width/height CSS или HTML cols/rows?