Текстовые поля

Не всегда текст, который нужно ввести, помещается в одной строке. Бывает, что он растягивается на несколько строк или даже абзацев. Конечно, можно обойтись текстовой строкой "бесконечной" длины (без указания значения параметра maxlength). Однако выглядит такая строка — без начала, без конца — неизящно, а пользоваться ею очень неудобно.

Поэтому для ввода крупных блоков текста предусмотрен другой элемент формы — поле ввода.

Для создания текстового поля используется дескриптор <TEXTAREA>. Он создает внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки.

Дескриптор <TEXTAREA> — парный. Внутри него помещается текст, который должен оказаться в поле ввода по умолчанию. Это логичнее, чем делать его значением параметра value: ведь текст может быть довольно длинным.

<TEXTAREA COLS="25" ROWS="5" NAME="comment">Ваш комментарий...</TEXTAREA>

Весь текст выводится, как правило, моноширинным шрифтом ("пишущая машинка").

Основные параметры тега <TEXTAREA>

Параметр	Описание
COLS	Определение количества столбцов текстового поля
ROWS	Определение количества рядов текстового поля
NAME	Присвоение уникального имени, необходимого для идентификации программой-обработчиком
READONLY	Позволяет создать элемент, недоступный для редактирования
WRAP	Способ представления текста, вводимого в окно. Virtual - в окне текст автоматически разбивается на строки, но при передаче эта автоматическая разбивка не сохраняется если вы ввели все одной строкой, то оно так и будет передано. Используется по умолчанию. Off - Если мы хотим, чтобы переход на новую строку в окне происходил только когда пользователь нажимает <Enter> Hard - если мы хотим, чтобы переход на новую строку происходил автоматически и эта разбивка сохранялась при передаче текста на обработку

Раскрывающиеся списки

Списки часто бывают очень длинными и скучными. И занимают много места. Если форма бумажная — ничего не поделаешь. Тяжко вздыхаем и заправляем в принтер еще один лист. Но если форма электронная и мы не хотим зря занимать место, можно воспользоваться раскрывающимся списком. Что это такое, знает любой, кто имел дело с Windows дольше получаса: строка, в которой что-то написано, а справа — небольшая кнопка со стрелкой. Если щелкнуть на стрелке, вниз "выпадает" список. Щелкаем на одном из его пунктов — и список сворачивается обратно, а в строке появляется выбранный пункт.

Как сделать подобный список на HTML-странице? Сам список создается с помощью дескриптора <SELECT>, а отдельные элементы — с помощью дескрипторов <OPTION>.

<SELECT name= day>

<OPTION value="He помню">Не помню

<OPTION value= Понедельник > Понедельник

<OPTION value =Вторник>Вторник

<OPTION value=Среда>Среда

<OPTION value=Четверг>Четверг

<OPTION value=Пятница>Пятница

<OPTION value=Суббота>Суббота

<OPTION value=Воскресенье>Воскресенье

</SELECT>

Однако на этом возможности раскрывающегося списка не исчерпываются. По умолчанию список представляет собой одну строку, которая "раскрывается" при щелчке на кнопке. Но мы можем модифицировать список так, чтобы он принял вид окна, содержащего несколько строк и — при необходимости — полосу прокрутки.

Для этого нам потребуется параметр size дескриптора <SELECT>. Этот параметр определяет количество строк, из которых состоит список в "закрытом" состоянии, и по умолчанию равен 1.

Но ведь иногда из списка требуется выбрать не одно, а сразу несколько вариантов. И тогда возможность видеть их все сразу может очень пригодиться. Для того чтобы список позволял выбрать сразу несколько вариантов, используется параметр multiple. Как и checked, этот параметр не имеет значений.

Просто проставляем его — и все. Обратите внимание: в результате программе-обработчику передается несколько значений с одинаковым именем.

Для того чтобы выбрать несколько пунктов из такого списка, используется стандартный подход Windows: если эти пункты следуют подряд, выбираем первый, нажимаем клавишу <Shift> и, удерживая ее, выбираем последний пункт. Если же пункты разбросаны, выбираем их в произвольном порядке, удерживая нажатой клавишу <Ctrl>.

При разработке электронной формы рекомендуется придерживаться следующего правила: то, что посетитель страницы видит на экране одновременно, должно представлять собой законченный блок информации. По возможности, разумеется: если вам это не удастся, никто не подаст на вас в суд. Однако мало кому понравится пользоваться прокруткой только для того, чтобы добраться до кнопки отправки. Тому, чтобы форма выглядела эстетично и чтобы ею было удобно пользоваться, очень способствует рациональная комбинация различных списков.

Элемент OPTION имеет следующие атрибуты. Selected (без значений) определяет, какой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера. Следует отметить, что тег <OPTION> не требует обязательного присутствия закрывающего тега.

<FIELDSET> <LEGEND> </LEGEND> </FIELDSET>

Эти два элемента предназначены для создания группы полей в форме. Чтобы понять, как используются эти элементы, рассмотрим небольшой пример.

<FIELDSET>

<LEGEND>3aголовок группы</LEGEND>

Имя: <INPUT name="imya" type="text">

Фамилия: <INPUT name="familiya" type="text"><BR>

Телефон: <INPUT name="telefon" type="text"><BR>

Текст подсказки

</FIELDSET>

С помощью элемента FIELDSET несколько элементов объединяются: пользователь видит их заключенными в рамку. Внутри группы элементы формы используются обычным способом.

Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент является контейнером, в нем можно размещать другие элементы HTML. Например заголовок группы можно составить из двух строк, если использовать тег <BR>.

В этом случае размер шрифта заголовка целесообразно уменьшить.

С помощью атрибута align можно регулировать положение заголовка:

• top — заголовок сверху;

• bottom — заголовок внизу (что не всегда удается реализовать);

• left — заголовок вверху и слева (значение по умолчанию);

• right — заголовок вверху и справа.