html.okpython.net
HTML и CSS для начинающих

HTML :: Ввод данных в форму в виде многострочного текста

Использование тега <textarea>

Для ввода многострочного текста, например, при оставлении комментариев или отправки сообщений, в HTML 5 предусмотрен отдельный элемент «textarea», формирующийся парным тегом <textarea> (от англ. textarea – текстовая область). В отличие от текстового поля «input» в элементе «textarea» допустимо делать переносы строк, которые сохраняются при отправке данных на сервер. Отметим, что внутри контейнера «textarea» разрешается писать любой текст, включая конструкции тегов. Этот текст будет отображаться браузером внутри текстового поля и при желании может быть удален пользователем во избежание отправки на сервер вместе с остальными данными.

Атрибуты rows и cols тега <textarea>

Для того, чтобы задать ширину и высоту поля, используются атрибуты cols и rows. Атрибут cols принимает в качестве значения натуральные числа, которые определяют ширину текстового поля в виде количества символов моноширинного шрифта. По умолчанию принимает значение "20". Поскольку ширина текстового поля «textarea» зависит от текущего размера шрифта, то с увеличением или уменьшением размера шрифта будет изменяться и ширина поля в пикселях. Атрибут rows задает высоту текстового поля в строках (без прокрутки) и принимает в качестве значения натуральные числа. По умолчанию принимает значение "2". Опять же, при изменении размера шрифта, изменяется и высота поля в пикселах.

Атрибут wrap тега <textarea>

Чтобы сообщить браузеру, как осуществлять перенос строк в элементе «textarea» используется атрибут wrap, который может принимать два значения:

  • "soft" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши Enter, то в процессе отправки данных на сервер он сохраняется; значение используется по умолчанию;
  • "hard" – строки, которые не вмещаются в поле по ширине, автоматически переносятся на новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей Enter; обязательным условием использования данного значения является наличие атрибута cols.

Использование элемента «textarea» показано в примере №1.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Текстовое поле «textarea»</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>
	
		<input type="submit" value="Отправить" disabled>
		
	</form>
</body>
</html>

Пример №1. Использование атрибутов элемента «textarea»

Другие атрибуты тега <textarea>

Кроме перечисленных атрибутов у элемента «textarea» имеются атрибуты, аналогичные атрибутам элемента «input»: autofocus, disabled, form, maxlength, minlength, name, placeholder, readonly, required. Их можно посмотреть в нашем справочнике здесь.

Быстрый переход к другим страницам

▲
▼