Каждый раз, когда я разрабатываю новую форму, содержащую textarea, у меня возникает следующая дилемма, когда мне нужно указать ее размеры:
Используйте CSS или используйте атрибуты textarea cols и rows?
Каковы преимущества и недостатки каждого метода?
Какова семантика использования этих атрибутов?
Как обычно это делается?
Я рекомендую использовать оба. Строки и столбцы необходимы и полезны, если клиент не поддерживает CSS. Но как дизайнер я переписываю их, чтобы получить именно тот размер, который я желаю.
Рекомендуемый способ сделать это через внешнюю таблицу стилей, например.
textarea {
width: 300px;
height: 150px;
}<textarea> </textarea>В HTML-наборе
<textarea rows="10"></textarea>
В наборе CSS
textarea { height: auto; }
Это приведет к тому, что браузер будет устанавливать высоту текстового поля ТОЧНО на количество строк плюс прокладки вокруг него. Установка высоты CSS на точное количество пикселей оставляет произвольные пробелы.
В соответствии с w3c, cols и rows являются обязательными атрибутами для текстовых полей. Строки и столбцы - это количество символов, которые будут помещаться в текстовое поле, а не в пикселях или какое-либо другое потенциально произвольное значение. Перейдите со строками/столбцами.
Ответ "да". То есть вы должны использовать оба. Без строк и столбцов (и есть значения по умолчанию, даже если вы не используете их явно), textarea неприемлемо мало, если CSS отключен или переопределен таблицей стилей пользователя. Всегда помните о проблемах доступности. При этом, если вашей таблице стилей разрешено контролировать внешний вид текстового поля, вы, как правило, получаете что-то, что выглядит намного лучше, хорошо вписывается в общий дизайн страницы и может изменять размер, чтобы не отставать от пользовательского ввода ( в пределах хорошего вкуса, конечно).
Размер текстовой области может быть задан атрибутами cols и rows или даже лучше; через свойства высоты и ширины CSS.
Атрибут cols поддерживается во всех основных браузерах.
Главное отличие состоит в том, что <TEXTAREA ...> является тегом контейнера: он имеет начальный тег().
<textarea style="width:300px; height:150px;" ></textarea>
Для текстовой области мы можем использовать ниже CSS, чтобы исправить размер
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
Проверено в angularjs и angular7
Обычно я не указываю height, но указываю width: ... и rows и cols.
Обычно в моих случаях нужны только width и rows, чтобы текстовая область выглядела красиво по отношению к другим элементу. (И cols является резервным, если кто-то не использует CSS, как объяснено в других ответах.)
((Указание как rows, так и height немного напоминает дублирование данных, которые я думаю?))
Основная особенность textareas заключается в том, что они расширяемы. На веб-странице это может привести к появлению полос прокрутки в текстовой области, если длина текста переполняет заданное вами пространство (будь то с использованием строк или с использованием CSS. Это может быть проблемой, когда пользователь решает распечатать, особенно с "печать" в PDF - поэтому установите удобную большую минимальную высоту для печатных текстовых областей с условным правилом CSS:
@media print {
textarea {
min-height: 900px;
}
}
Если вы не используете каждый раз использование line-height: '..'; свойство управляет высотой свойства textarea и width для ширины textarea.
или вы можете использовать размер шрифта, следуя css:
#sbr {
font-size: 16px;
line-height:1.4;
width:100%;
}
HTML строки и столбцы не реагируют!
Поэтому я определяю размер в CSS. Совет: если вы определяете небольшой размер для мобильных телефонов, подумайте об использовании textarea:focus {};
Добавьте сюда дополнительное пространство, которое развернется только в тот момент, когда пользователь захочет что-то написать.
input
{
width: 300px;
height: 40px;
}
<textarea rows="4" cols="50">HELLO</textarea>