Главная HTML Форма Элемент textarea

Элемент формы <textarea>

Элементы формы

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большое текстовое поле в несколько строк. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Синтаксис: 
<textarea атрибуты>
    текст
</textarea>
формы

Введите ваш отзыв: 

<form action="test.php" method="post" target="_blank">
 <b>Введите ваш отзыв:</b>
 <p><textarea cols="35" rows="5" name="text" required placeholder="Поле ввода"></textarea></p>
 <p><input type="submit" value="Отправить"> 
 <input type="reset" value="Очистить"></p>
</form>

Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Атрибут required указывает на то, что поле обязательно должно быть заполнено перед отправкой формы. Атрибут placeholder выводит подсказку в поле.

Атрибуты <textarea>

Атрибут Значение Описание
autocomplete =on Включает автозаполнение текста.

Аатрибут autocomplete помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера.

Автозаполнение конкретного поля формы привязывается к его атрибуту name.
=off Отключает автозаполнение..

<textarea name="comment" autocomplete="off"></textarea>

autofocus autofocus Автоматическое получение фокуса.
cols ="число" Ширина поля в символах. Если пользователь вводит больше текста, появляется полоса прокрутки.
rows ="число" Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого.
disabled disabled Отключает возможность редактирования и копирования содержимого поля. Поле отображается серым цветом и недоступным для активации пользователем. 
<textarea name="textarea2" cols="20" rows="3">Активное</textarea> 
<textarea name="textarea2" disabled="disabled" cols="20" rows="3">Неактивное</textarea>

form ="идентификатор" Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами <form>.

Значение атрибута должно быть равно значению атрибута id элемента <form>

<form id="mytext"></form>
<div>
  <p><textarea name="comment" placeholder="Комментарий" 
    required form="mytext"></textarea></p>
  <p><input type="submit" value="Отправить" form="mytext"></p>
</div>
maxlength ="число" Максимальное число введенных символов. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

<textarea maxlength="140"></textarea>
minlength ="число" Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.

1 
<form action="test.php">
   <p>Введите текст</p>
   <p><textarea minlength="16" required
      placeholder="Не меньше 16 символов"></textarea></p>
   <p><input type="submit" value="Отправить">
      <input type="reset" value="Очистить"></p>
</form>

Введите текст

name ="имя" Задает имя текстового поля. Это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

2 
<script> 
  function dataField(f) {
  alert("Вы ввели: \n" + f.comment.value);
  }
</script>     


<form action="test.php">
  <p>Введите комментарий</p>
  <p><textarea rows="5" cols="20" name="comment"></textarea></p>
  <p><input type="button" value="ОК" onClick="dataField(this.form)"></p>
</form>

Введите комментарий
placeholder ="текст" Выводит подсказывающий текст внутри текстового поля, который исчезает при получении фокуса или наборе текста.
readonly readonly Отключает возможность редактирования содержимого поля.

<textarea rows="10" cols="20" readonly>Текст недоступен для изменения</textarea>

required required Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет.

<input name="user" required placeholder="Ваше имя">

wrap =soft Слова в текстовом поле переносятся механически, если они не поместились в размер области, но при отправке на сервер переносы не сохраняются.
soft - значение по умолчанию.
=hard Длинный текст, который самостоятельно не помещается в поле по ширине, автоматически переносится на новую строку и вместе с переносами отправляется на сервер. Для работы требуется наличие атрибута cols.

<textarea rows="10" cols="20" wrap="hard"</textarea>