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