Кожен раз, коли я розробляю нову форму, яка включає в себе, у textareaмене виникає така дилема, коли мені потрібно вказати її розміри:

Використовувати CSS або використовувати textareaатрибути 's colsі rows?

Які плюси і мінуси кожного методу?

У чому полягає семантика використання цих атрибутів?

Як це зазвичай робиться?

Рекомендую використовувати обидва. Рядки та крапки потрібні та корисні, якщо клієнт не підтримує CSS. Але як дизайнер я їх перезаписую, щоб отримати саме той розмір, який я бажаю.

Рекомендований спосіб зробити це через зовнішній таблицю стилів, наприклад

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

<textarea> </textarea>

textarea { height: auto; }

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

Це запустить браузер встановити висоту текстової області ТОЧНО на кількість рядків плюс прокладки навколо неї. Встановлення висоти CSS на точну кількість пікселів залишає довільні пробіли.

Відповідно до w3c, col та рядки є обома необхідними атрибутами для текстових областей. Рядки та Cols - це кількість символів, які мають вміститися в текстовій області, а не в пікселях чи іншому потенційно довільному значенні. Ідіть з рядками / кол.

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

Для області тексту ми можемо використовувати нижче css, щоб виправити розмір

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

Випробуваний у angularjs та angular7

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

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

Зазвичай я не вказую height, але вказую width: ...і rowsі cols.

Як правило, в моєму випадку, тільки widthі rowsнеобхідно, для текстового поля виглядати красиво по відношенню до іншої elems. (І colsце резервна копія, якщо хтось не використовує CSS, як пояснено в інших відповідях.)

((Вказуючи і те, rowsі heightтрохи схоже на дублювання даних, я думаю?))

Головною особливістю текстових областей є те, що вони розширюються. На веб-сторінці це може призвести до появи смуг прокрутки у текстовій області, якщо довжина тексту переповнює задане вами місце (будь то рядки або використовуйте CSS. Це може бути проблемою, коли користувач вирішує надрукувати, особливо з 'друк' у PDF - значить, встановіть зручну велику мінімальну висоту для друкованих текстових зображень за допомогою умовного правила CSS:

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

якщо ви не використовуєте кожен раз, використовуйте висоту рядка: '..'; властивість керувати висотою textarea та властивістю width для ширини textarea.

або ви можете скористатися розміром шрифту, дотримуючись css:

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

Рядки та знаки HTML не реагують!

Тому я визначаю розмір у CSS. Як підказка: якщо ви визначаєте невеликий розмір для мобільних телефонів, подумайте про використанняtextarea:focus {};

Додайте сюди додатковий простір, який розгортається лише в той момент, коли користувач захоче щось написати

CSS

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

HTML

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