Итак, мы продолжаем с элементами формы и, после рассмотренного элемента SELECT, мы рассмотрим очередной элемент для ввода строк текста - это элемент textarea. Этот элемент напоминает собой область несколько склеенных элементов input стоящих один под другим.
Такое текстовое поле создается не сложнее чем ранее рассмотренные элементы и для этого используется тег текстовой области, который называется <textarea>. Данный тег является парным и должен иметь закрывающейся тег </textarea>.
Если мы просто вставим данный тег в редактор и обновим страницу в браузере то текстовое поле будет выглядеть стандартным образом, т.к. ему небыли заданы ни какие размеры.
Данное текстовое поле должно содержать имя, которое задается с помощью уже известного атрибута со значением name="text". Так же текстовому полю textarea можно задать размеры, указав ему с помощью атрибутов количество рядов и колонок.
Высота поля, то есть ряды указываются с помощью атрибута rows, например: rows="10".
Ширина поля, то есть столбцы задаются атрибутом cols, например: cols="60". В итоге у нас получился следующий вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body>
</html>
Бывает так же необходимость изначального размещения текста в текстовой области, для чего между тегами <textarea> </textarea> вставляем нужную надпись.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body>
</html>
И, рассмотрим еще ситуацию, когда, например, после клика на вопрос перед текстовым полем, нам нужно установить курсор в это текстовое поле. Для этого используем тег <label>, но уже другим методом, через атрибут for и идентификатор для текстовой области id = "" .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body>
</html>
То есть, после клика по вопросу перед текстовым полем обработчик событий ищет идентификатор с именем text, так как в теге <label> указан атрибут for с именем text. Таким образом, между собой связываются эти два элемента - параграф и текстовое поле. Таким же способом связываются и надпись у чекбоксов.
И, рассмотрим еще один атрибут, он применяется не только к текстовому полю textarea, но и для простого текстового поля input.
С помощью атрибута readonly, что в переводе с английского «Только для чтения», создается текстовая область только для чтения, т.е. не поддающаяся редактированию. По умолчанию у элемента данный атрибут выключен.
Такого же эффекта не активного окна можно добиться и с помощью атрибута disabled. В этом случае так же блокируется доступ к изменению содержимого в поле, но при этом поле становится серого цвета и не доступно для активирования при клики на него.
Разница между данными атрибутами в том, что при использовании атрибута readonly, при отправке формы, содержимое формы передается обработчику. А при использовании атрибута disabled данные (содержимое формы) не будут передаваться обработчику.
Тем не менее содержимое таких полей все же можно изменить с помощью скриптов.
Текстовому полю так же можно задать максимально допустимое количество введенных символов, для этого используется атрибут maxlength="число", где в значение атрибута указывается число, которое и будет ограничивать количество введенных символов.
Вот так создаются текстовые поля для ввода больших текстов, а мы переходим к следующему элементу, где рассмотрим кнопки с помощью которых мы и сможем отправлять обработчику содержимое (данные) любого поля или очищать поля формы.
CSS