Многострочное текстовое поле

Для создания области, в которую можно вводить несколько строк текста, предназначен элемент <textarea>. В отличие от <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.

<textarea атрибуты>
  Текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты <textarea>
АтрибутОписание
colsШирина поля в символах.
maxlengthМаксимальное число символов текста, которое можно ввести.
nameИмя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
rowsВысота поля в строках текста.
wrapПараметры переноса строк.

Создание поля многострочного текста показано в примере 1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body> 
 <form>
  <p><b>Введите ваш отзыв:</b></p>
  <p><textarea name="comment"></textarea></p>
  <p><input type="submit"></p>
 </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид текстового поля по умолчанию

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width), высоту (height), границу (border), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
  <style>
   textarea {
    background: #fce9c0; /* Цвет фона */
    border: 2px solid #a9c358; /* Параметры рамки */
    padding: 10px; /* Поля */
    width: 100%; /* Ширина */
    height: 200px; /* Высота */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    font-size: 14px; /* Размер шрифта */
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p><b>Введите ваш отзыв:</b></p>
   <p><textarea name="comment"></textarea></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2.

Изменение вида текстового поля

Рис. 2. Изменение вида текстового поля

Все браузеры кроме Internet Explorer поддерживают изменение размера для <textarea>. Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.

Уголок для изменения размера

Рис. 3. Уголок для изменения размера

Если вам не нужно, чтобы пользователь мог менять размеры текстового поля, то добавьте свойство resize со значением none.

textarea {
 resize: none;
}

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 28.07.2016
Редакторы: Влад Мержевич