Что такое тег textarea размеры обозначение пример

textarea - что такое textarea, какие параметры есть у textarea, как переводится!? В общем разберем все, что касается поля ввода textarea.

Все о поле ввода textarea

1. Что такое textarea
2. Тип textarea type="text"
3. Ширина и высота textarea
4. Как сделать подсказку внутри textarea
5. Как убрать обводку textarea при нажатии/вводе
6. Как запретить растягивание textarea
7. Как поставить textarea посередине страницы, блока
8. Как сделать в textarea внутренние отступы
9. Как сделать в textarea наружные отступы
10. Дополнительные вопросы о textarea
Нужно ли указывать тип у textarea

11. Скачать

Что такое textarea

Textarea это двойной тег в html.

Как обозначается textarea!?

В отличии от одинарного тега input, то textarea – это двойной тег…

Пример тега textarea

<textarea></textarea>

Результат вывода тега textarea

Как переводится textarea

Textarea - переводится, как Text - текст, area - поле, если соединить вместе, то Textarea можно перевести, как поле для текста...

Тип textarea type="text"

Для textarea – указывать тип поля text(type="text") не нужно!




Ширина и высота textarea

Ширину и высоту для textarea можно выразить несколькими способами и типами.

1). Использование в высоте и ширине textarea cols и rows

<textarea rows="число" cols="число"></textarea>

Обязательный атрибут для textarea rows + cols

Обязателен в HTML4, не обязателен в HTML5.

cols – столбец определяемый шириной моноширного(все буквы одной ширины) шрифта по умолчанию, rows - количество строк…

Значения

Любое целое положительное число.

Пример textarea rows + cols

<textarea rows="5" cols="50"></textarea>

Результат:




2). Использование в высоте и ширине textarea пиксели

Не стану все меры расписывать(использую очень-очень редко): "em, vw, vh, vmin, vmax и функция calc" приведем пример использования пикселей в качестве единицы измерения:

<textarea style="width: 500px; height: 50px;"></textarea>

Пример ширина и высота textarea в пикселях:




3). Использование в высоте и ширине textarea процентов

Использование в качестве единицы измерения процентов... поставим ширину 60% высоту 50%

Код:

<textarea style="width: 100%; height: 50%;"></textarea>

Пример ширина и высота textarea в процентах:




Вопрос на засыпку! Почему в выше приведенном примере высота textarea в процентах никак не сработала!?

Вывод можете из ниже приведенного кода:

<div style=" width: 100%; height: 200px; border:1px solid red">

<textarea style="width: 60%; height: 50%;"></textarea>

</div>

Пример 2 ширина и высота textarea в процентах:

Но если мы помести наш textarea в какой-то другой блок с явно выставленными размерами, то:




4). Растянуть textarea на всю ширину блока/страницы

Как растянуть textarea на всю ширину блока, страницы!? Если как мы выяснили, если ничего не препятствует растягиванию textarea на всю ширину блока/страницы, то просто ставим в ширину textarea 100%.

Пример textarea(<textarea style="width: 100%;"></textarea>) с шириной на всю ширину блока/страницы




5). Растянуть textarea на всю высоту блока/страницы

На эту тему делал отдельную страницу




Как сделать подсказку внутри textarea

Для того, чтобы сделать подсказку внутри textarea нам потребуется атрибут placeholder, вставляем в первый тег textarea placeholder с текстом...

<textarea style="width: 100%; height: 50px;" placeholder="Подсказка внутри textarea"></textarea>

Подсказка внутри textarea пример:






Как убрать обводку textarea при нажатии/вводе

Для того, чтобы удалить обводку, при нажатии вводе данных в поле ввода textarea поставьте в стилях css, либо внутри поля поставьте свойство : outline:none;
<textarea style="width: 100%; height: 50px; outline:none;" placeholder="Подсказка внутри textarea"></textarea>

Пример удаления обводки в textarea






Как запретить растягивание textarea

Иногда требуется запретить растягивание textarea.

Как запретить растягивание по горизонтали textarea

Для того, чтобы запретить растягивание по горизонтали нужно указать, как растягивание возможно, если мы введем в стили resize: vertical;, то растягиваться textarea будет только по вертикали...

<textarea style="width: 100%; height: 50px; outline:none; resize: vertical;" placeholder="Как запретить растягивание по горизонтали"></textarea>

Пример textarea с запретом растягивания по горизонтали!




Как запретить растягивание по вертикали textarea

Для того, чтобы запретить растягивание по вертикали нужно выставить в каком направлении растягивать можно! Ставим в стили textarea resize: horizontal;

Пример textarea с запретом растягивания по вертикали!




Как запретить растягивание по всем направлениям textarea

Для того, чтобы запретить растягивание по всем направлениям, в стилях textarea ставим outline:none;

Пример textarea с запретом растягивания ппо всем направлениям textarea !






Как поставить textarea посередине страницы, блока

Для того, чтобы поставить textarea посередине, нужно в стили textarea добавить... margin: auto; display: block;
<textarea style="width: 300px; height: 50px; outline:none; resize: none; margin: auto; display: block;" placeholder="Как поставить textarea посередине страницы, блока"></textarea>

Пример как расположить textarea посередине страницы, блока






Как сделать в textarea внутренние отступы

Для того, чтобы сделать внутренние отступы в textarea нужно добавить в стили textarea padding: числоpx;, давайте на примере textarea сделаем внутренний отступ 20px

<textarea style="width: 400px; height: 50px; outline:none; resize: none; margin: auto; display: block; padding: 20px;" placeholder="Как сделать в textarea внутренние отступы"></textarea>

Пример textarea с внутренними отступами 20px




Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в padding ставим 4 значения и указываем, с какой стороны вам нужно сделать внутренний отступ!

padding: верхpx справаpx снизуpx слеваpx;
Если отступ с какой-то стороны не требуется ставим 0px



Как сделать в textarea наружные отступы

Для того, чтобы продемонстрировать наружные отступы, нам потребуется наш textarea поместить во внутрь другого блока... теперь уже данный блок поставим посередине и для div поставим display: table;, чтобы он не растягивался на всю ширину...

<div style="border: 1px solid red; display: table; margin: auto;">

<textarea style="width: 400px; height: 50px;resize: none; margin: 20px;" placeholder="Как сделать в textarea наружные отступы"></textarea>

</div>

Пример как сделать в textarea наружные отступы




По аналогии с padding :

Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в margin 4 значения и указываем, с какой стороны вам нужно сделать наружный отступ!

margin: верхpx справаpx снизуpx слеваpx;
Если отступ с какой-то стороны не требуется ставим 0px



Дополнительные вопросы о textarea

Иногда требуется короткий ответ на поставленный вопрос, который нашелся после анализа поисковых запросов...

Нужно ли указывать тип у textarea

Вопрос: "Нужно ли указывать тип у textarea".

Ответ: Нет.