Формы
Нам осталось рассмотреть только один элемент ввода данных. Это многострочное поле текстового ввода. Оно реализуется при помощи тега <textarea>. Этот тег создает область ввода, которая может быть достаточно обширной, и применяется обычно для ввода средних и больших объемов текстовой информации. Тег не может обойтись без параметров. И мы обязательно их рассмотрим.
- Параметр name позволяет задавать уникальное имя для данного элемента ввода данных,
- Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число.
- Параметр cols задает ширину в символах создаваемого поля текстового ввода. Параметр также является обязательным.
- Параметр disabled используется, если поле необходимо сделать недоступным для использования.
- Параметр readonly применяется для создания полей с нередактируемым текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его.
- Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.
- Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.
Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).
Листинг 1.36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Формы</title></head> <body> <form action="http://www.mysite.com/cgi-bin/test.exe" method="post"> <textarea rows=5 cols=2> Текст, который будет отображаться в многострочном поле, ввода </textarea> <p> <input type="submit" value="Отправить"> </p> </form></body> </html>Помимо этих полей ввода есть и еще один объект, который относится к созданию форм. Мы можем создавать так называемые текстовые метки для неких органов ввода данных.
Ведь на самом деле радиокнопки и независимые переключатели достаточно малы по своим размерам, и для их активации необходимо точно попасть мышью в их активную область Это не всегда бывает удобно. Поэтому во многих программах с хорошо продуманным пользовательским интерфейсом можно активизировать подобные органы управления еще и при помощи щелчка мышью на их текстовые наименования. Точно такую же возможность предоставляет нам и HTML.
Рис. 1.35. Окно браузера с результатом отображения файла, приведенного в листинге 1.36
Для создания подобных текстовых пометок и заголовков, связанных с конкретными элементами ввода данных, мы можем использовать тег <label> Но привязывать подобные метки мы сможем только к тем органам ввода данных, для которых мы явно задали идентифицирующий параметр id. Именно по нему и устанавливается соответствие между меткой и объектом формы. Основным параметром для тега <label> служит параметр for, значением которого является значение параметра id объекта, к которому данная текстовая метка и привязывается. Приведем Пример создания подобной связи. Сначала мы создадим независимый переключатель, а затем присоединим к нему связанный текстовый заголовок. Производится подобная операция при помощи следующего фрагмента кода:
<label for="check1">Независимый переключатель</label><input type="checkbox" name="check" value="checked" id="check1">Впрочем, можно обойтись и без параметра for, если тег, объявляющий связанный орган ввода данных, разместить между тегами <label>.
И на этом мы можем закончить рассмотрение процедуры создания форм для ввода данных в статических HTML-документах.