Различают однострочные и многострочные текстовые поля.
Однострочное текстовое поле задается в теге <input> атрибутом type=text. Это значение по умолчанию для атрибута type. Текстовое поле ввода может характеризоваться атрибутами size – видимая длина поля ввода и maxlength – максимальная дли поля ввода в символах. Стартовое значение этого поля устанавливает атрибут value.
Рассмотрим пример применения тега <input> для организации однострочного текстового поля.
Пример 13. Форма с текстовым полем ввода.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> <title>Однострочное текстовое поле</title> </head>
<body>
<form action="">
<p>Адрес вашего сайта: <input type="text" size="20" maxlength="100" name="website" value="http://www." /><input type="submit" value="OK" /></p>
</form>
</body>
</html>
В этом примере использовано два элемента интерфейса:
· текстовое поле ввода
<input type="text" size="20" name="website" value="http://www." />
определенное видимой длиной size="20" символов и максимальной длиной maxlength="100" символов. Значение этого поля по умолчанию определено атрибутом value="http://www.". Поле имеет имя name="website";
· кнопка, отправляющая данные на обработку
<input type="submit" value="OK" />
которая на форме будет снабжена надписью "OK".
Указанная форма демонстрируется на рисунке 16.
Рисунок 16. Регистрация текстового поля ввода на форме
Если теперь в поле ввода дополнить адрес, например, набрать
http://www.mozilla.org
и нажать кнопку OK, то в соответствии с методом get, который действует в этом примере по умолчанию, URL-строка будет дополнена информацией
?website=http%3A%2F%2Fwww..mozilla.org
Многострочное текстовое поле задает контейнер <textarea> … </textarea>. Размер этого поля задается двумя обязательными атрибутами:
· cols – ширина текстовой области, буквально, число столбцов текста;
· rows – высота текстовой области в строках.
Так как объем данных в текстовых областях не ограничен, то для их передачи на обработку следует применять метод post. Следующий фрагмент кода демонстрирует применение многострочного текстового поля с последующей передачей ввода пользователя по электронной почте:
<form action="mailto:artemy@lomov.ru?subject=Book" method="post"
enctype="text/plain">
<p><textarea cols="50" rows="5" name="message">Ваш отзыв о книге</textarea></p>
<p><input type="submit" value="Отправить автору" /></p>
</form>