Должен ли я Размер textarea с атрибутами ширины / высоты CSS или HTML cols / rows?

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

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

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

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

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

246
css html textarea

10 ответов

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

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

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

в HTML set

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

В наборе CSS 

textarea { height: auto; }

это вызовет браузер, чтобы установить высоту textarea точно на количество строк плюс отступы вокруг него. Установка высоты CSS на точное количество пикселей оставляет произвольные пробелы.

74

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

9

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

5

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

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

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

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

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

0

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

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

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

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

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

в CSS

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


HTML-код

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