Текстовые элементы HTML-форм

Различают однострочные и многострочные текстовые поля.

Однострочное текстовое поле задается в теге <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>


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: