Тег <textarea> произошел от английского выражения «text area» и означает «область текста». В HTML тег <textarea> применяется для создания текстового поля, где можно будет вводить текст с неограниченным количеством строк.
Тег <textarea> чем-то похож на тег <input>, но отличается от последнего тем, что его текстовое поле поддерживает форматирование. Например, если пользователь в <textarea> введет текст, выполняя переносы между строчками, тогда текст так и сохранится и в таком же формате передастся на сервер. Тег <input> такое сделать не может.
Проблема в том, что, когда вы обозначаете текстовое поле тегом <textarea>, само поле уже определяют высота и ширина, установленные по умолчанию. Однако эти размеры не всегда могут вас устраивать. Но благо есть способы их отредактировать.
Тег <textarea>: основные атрибуты, высота, размер, свойства
Тег <textarea> для собственной унификации может быть определен следующими атрибутами:
«accesskey» — добавляет сочетание кнопок для перехода по текстовой области;
«autofocus» — активирует фокус пользователя на текстовой области;
«cols» — определяет ширину области в текстовых символах;
«disabled» — используется для блокировки доступа к полю;
«form» — налаживает связь с формой по ее идентификатору;
«maxlength» — определяет максимальное количество символов, вмещаемых текстовым полем;
«name» — определяет название текстовой области, которое необходимо для идентификации этой области;
«placeholder» — определяет текст, который будет показан пользователю перед заполнением поля;
«readonly» — накладывает ограничение на редактирование текстовой области пользователем, таким образом, пользователь не сможет ничего вписать в эту область;
«required» — определяет, что текстовая область обязательна для заполнения;
«rows» — определяет высоту области количеством вмещаемых строк;
«tabindex» — определяет очередность перехода между элементами области, когда это делается с помощью клавиши «Tab»;
и др.
Тег <textarea>: высота и ширина
Высота и ширина текстовой области тега <textarea> — это самые часто используемые свойства области. Значения этих свойств по умолчанию не всегда могут устраивать веб-разработчика. Для того чтобы их изменить, можно воспользоваться двумя инструментами:
встроенными атрибутами «cols» и «rows»;
CSS-свойствами «width» и «height».
Атрибут «cols» определяет ширину текстовой области, которая используется для ввода текста пользователем. В его значении указывается какое-то число. Это число будет определять количество видимых символов в горизонтальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать ширину текстового поля, которая будет зависеть от количества видимых символов.
Атрибут «rows» определяет высоту текстовой области. В его значении указывается какое-то число. Это число будет означать количество видимых строк текста в вертикальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать высоту текстового поля, которая будет зависеть от количества строк.
Синтаксис примера, как определяется высота и ширина текстовой области тега таким способом:
<textarea cols="70" rows="7"> Область для текста</textarea>
CSS-свойства «width» и «height» не нужно представлять, так как с их помощью определяются ширина и высота всех HTML-элементов, а не только текстовая область. Тем не менее несколько слов об этих свойствах скажем, например:
определить эти свойства можно тремя способами: в отдельном CSS-файле, в разделе «head» веб-страницы или в атрибутах;
в качестве единиц измерения размеров высоты и ширины можно использовать любые допустимые значения;
эти CSS-свойства будут иметь преимущества перед встроенными атрибутами тега, если одновременно использовать оба варианта обозначения размеров текстовой области.
Синтаксис такого способа выглядит так:
<textarea style="width:400px; height:250px;">Область для текста</textarea>
Заключение
Тег <textarea> определяет область для ввода текста. При этом размеры этого поля, такие как высота и ширина, можно определить самостоятельно несколькими способами.
Web