belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

6.4. Ввод данных в форму в виде многострочного текста.
Тег <textarea>.

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

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

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

Использование элемента 'textarea' показано в примере 6.5.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<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>
	
	</form>
</body>
</html>

Пример 6.5. Использование атрибутов элемента 'textarea'

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

Контрольные вопросы и задания

  1. Опишите элемент 'textarea' и его атрибуты.
  2. От чего зависит ширина и высота элемента 'textarea' в пикселях?

Словарь новых английских слов

form [ˈfɔːm] – форма, фигура.
action [ˈakʃ(ə)n] – действие, акция.
validate [ˈvalɪdeɪt] – подтверждать, проверять.
accept [əkˈsɛpt] – принимать.
input [ˈɪnpʊt] – вводить данные, ввод.
value [ˈvaljuː] – значение, ценность.
hidden [ˈhɪdn] – скрытый, спрятанный.
password [ˈpɑːswəːd] – пароль.
reset [riːˈsɛt] – возврат в начальное положение.
submit [səbˈmɪt] – представить на рассмотрение .
multiple [ˈmʌltɪp(ə)l] – множественный.
required [rɪˈkwʌɪəd] – обязательный.
read [riːd] – читать.
only [ˈəʊnli] – только.
length [leŋθ] – длина.
list [lɪst] – список, каталог.
check [tʃɛk] – проверять, проверка, птичка.
label [ˈleɪb(ə)l] – ярлык, бирка.
area [ˈeəriə] – район, область, зона.
row [raʊ] – ряд, последовательность.
hard [hɑːd] – твердо, крепко.
soft [sɔːft] – мягко, нежно.
select [sɪˈlɛkt] – выбирать, отбирать.
button [ˈbʌt(ə)n] – кнопка, пуговица.
group [ɡruːp] – группа, кучка.
option [ˈɒpʃ(ə)n] – предмет выбора.
field [fiːld] – площадка, участок, поле.
set [set] – устанавливать.
legend [ˈlɛdʒ(ə)nd] – легенда, надпись.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх