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

307

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

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

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

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

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

Pherrymason
источник

Ответы:

268

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

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

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>

kogakure
источник
4
Это нормально, но вы должны понимать, что любое произвольное пространство, с которым вы устанавливаете размер, будет потрачено впустую и на самом деле просто для галочки.
Таблетки взрыва
4
@tandu: Что вы подразумеваете под "собирается впустую и на самом деле просто для галочки"?
BoltClock
2
Строки / столбцы основаны на размере символов пользователя. Так что если у вас есть ширина / высота, определенные css, которые не могут быть разделены на пиксели символа в текстовой области, то будет много белого пространства по вертикали и горизонтали. Наверное, никто никогда не заметит, но просто скажу.
Взрыв таблетки
21
Вы можете использовать «em» в качестве измерения вместо пикселей. 1em - ширина буквы "M" в любом шрифте и размере. Но cols уместны, только если используются с моноширинными шрифтами, что в большинстве случаев не так. Чтобы получить идеальную посадку по высоте, используйте кратные line-heightдля высоты текстовой области.
Когакуре
5
@LeoGalleguillos «Обязательный и полезный, если клиент не поддерживает CSS ». Никто ничего не сказал о проверке.
Янус Бакс Жакет
96

textarea { height: auto; }
<textarea rows="10"></textarea>

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

Ян Верховен
источник
4
К сожалению, «Высота текстовой области не совпадает со строками в Firefox» - это «строки + 1» stackoverflow.com/q/7695945/1266880
apurkrt
2
Не уверен, изменились ли вещи с 13 года или что-то сверхъестественное в моей конкретной ситуации, но настройки height: auto;в CSS, похоже, совсем не влияют на мою текстовую область.
Clozach
10

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

Таблетки взрыва
источник
8
Школа w3c утверждает, что вы можете установить его с помощью атрибута row и cols, но настройка высоты и ширины лучше. На w3c.org не упоминается, что строки и столбцы являются обязательным атрибутом для textarea. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea
Майкл Страмел
17
@MichaelStramel мой ответ - четыре года :) - кстати, это не w3c школы. Они не связаны. Я не уверен, что в HTML5 уже есть концепция обязательных атрибутов, но я могу ошибаться. Я до сих пор не понимаю, почему установка ширины / высоты лучше, чем строки / столбцы
Взрывные таблетки
3
Я понял это после того, как прокомментировал, но все еще чувствовал, что это актуально для любого, кто читает этот пост. Кроме того, при адаптивном дизайне строки и столбцы могут вызывать проблемы, если они не установлены с помощью JavaScript. Именно IMO делает настройку через CSS намного лучшим способом.
Майкл Страмел
6

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

Стэн Роджерс
источник
6

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

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

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

Рохит Парте
источник
1
Какое это имеет отношение к Angular? И как это добавить по сравнению с существующими ответами от 2010 года /
Лазарь Любенович
5
 <textarea style="width:300px; height:150px;" ></textarea>
user470962
источник
19
@ user470962 Ad hominem. Если вы исправите синтаксическую ошибку в '<textarea style = "width: 300px; height: 150px;">', то код в порядке. Нет необходимости оскорблять кого-либо. Как видите, самый популярный ответ мало чем отличается от его. +1
TAAPSogeking
1
@TAAPSogeking по справедливости, это тот же ответ, 4 года спустя. -1
Рамбатино
4

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

AsifQadri
источник
2

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

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

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

KajMagnus
источник
2

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

@media print { 
textarea {
min-height: 900px;  
}
}
Джефф Кендалл
источник
2

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

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

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}
Нуреалам Саббир
источник
2

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

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

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

кто то
источник
-11

CSS


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

HTML


<textarea rows="4" cols="50">HELLO</textarea>
ASHU
источник
Вы можете сделать с CSS очень легко
ASHU
Вы можете сделать оба пути css или вы можете кормить вручную, как это <textarea rows = "4" cols = "50"> HELLO </ textarea>
ASHU
Почему вы применяете эти свойства ко всем элементам?
blackmambo
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа.
Дональд Дак