HTML :: Тег <textarea>

В HTML тег <textarea> (от англ. textarea – текстовая область) предназначен для создания многострочного поля для ввода текста. В отличие от текстового поля <input> в элементе <textarea> допустимо делать переносы строк, которые сохраняются при отправке данных на сервер. Текст написанный внутри элемента <textarea>, включая конструкции тегов, будет отображаться браузером на странице внутри текстового поля и при желании может быть удален пользователем во избежание отправки на сервер вместе с остальными данными.

Синтаксис

	<textarea>
		...
	</textarea>		     
	
	Закрывающий тег: обязателен.

Атрибуты

autocomplete – позволяет отключать автозаполнение текстового поля формы, которое происходит при повторном вводе одинаковых данных. Принимает два значения "on" (по умолчанию) и "off". Если аналогичный атрибут задан для всей формы, то значение атрибута autocomplete конкретного текстового поля формы будет иметь для него приоритет. Если автозаполнение отключено в настройках самого браузера, то данный атрибут игнорируется.
autofocus – данный логический атрибут автоматически устанавливает фокус в данное текстовое поле формы при загрузке страницы. Если атрибут задан сразу для нескольких полей, то фокус будет передан первому из них. Атрибут по умолчанию выключен и значений не принимает.
cols – принимает в качестве значения натуральные числа, которые определяют ширину текстового поля в виде количества символов моноширинного шрифта. По умолчанию принимает значение "20". Поскольку ширина текстового поля зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и ширина поля в пикселях.
disabled – данный логический атрибут блокирует доступ к данному текстовому полю формы. Это может потребоваться, например, когда нужно, чтобы поле стало доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и изменить содержимое. При этом само поле имеет серый фон, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
form – связывает данное текстовое поле с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данное поле. Это может потребоваться в случае, когда поле расположено за пределами формы.
maxlength – устанавливает максимально допустимое число символов, которые можно ввести в данное текстовое поле. В качестве значения принимает натуральные числа. При равенстве количества введенных символов установленному значению, дальнейший ввод символов становится невозможным.
minlength – устанавливает минимальное число символов, которые нужно ввести в данное текстовое поле. В качестве значения принимает натуральные числа. Если количество введенных символов будет меньше установленного значения, но больше нуля, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
name – задает уникальное имя данному текстовому полю формы, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением.
placeholder – выводит текст-подсказку внутри поля формы, который исчезает при получении фокуса или ввода текста (зависит от браузера). Отображается шрифтом серого цвета.
readonly – данный логический атрибут указывает, что данное текстовое поле формы доступно только для чтения. В отличие от атрибута disabled допускает получение фокуса. Атрибут по умолчанию выключен и значений не принимает.
required – данный логический атрибут устанавливает данное текстовое поле обязательным для заполнения. Если поле заполнено не будет, то при попытке отправки формы на сервер будет выведено соответствующее предупреждение, а форма на сервер отправлена не будет.
rows – принимает в качестве значения натуральные числа, задавая высоту текстового поля в строках (без прокрутки). По умолчанию принимает значение "20". Поскольку высота текстового поля зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и высота поля в пикселях.
wrap – задает параметры переноса строк в текстовом поле, принимая в качестве значений:
- "soft" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши Enter, то в процессе отправки данных на сервер он сохраняется (значение используется по умолчанию);
- "hard" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей Enter; обязательным условием использования данного значения является наличие атрибута cols.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/textarea

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
	<form action="php/registration.php" method="POST" name="reg_form">
	 
		<!-- Связываем текст с текстовым полем -->
		<label for="comment"> Оставить комментарий: </label><br><br>
		 
		<!-- Ширина - 50 символов, высота - 10 строк -->
		<!-- Разрывы строк будут переданы на сервер -->
		<textarea id="comment" cols="50" rows="10" wrap="hard"> 
			Этот текст будет предварительно отображен браузером в поле<br>
			вместе с <em>тегами</em>. Напоминает преформатированный текст.
		</textarea><br><br>
		
		<!-- Создаем кнопку отправки комментария на сервер -->
		<button type="submit" name="submit_button" disabled>
			Отправить на форум
		</button>		

	</form>	
	
</body>
</html>

Пример №1