Web

HTML тег : высота, как выставить значение, свойства

Lorem ipsum dolor

Тег <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

PHP – статические свойства

Web

Как получить значения функции при вводе значения из PHP формы?

Bootstrap — инструменты для создания веб-приложений и сайтов
Web

Bootstrap — инструменты для создания веб-приложений и сайтов

Как и на чём лучше писать сайты?
Web

Как и на чём лучше писать сайты?