Формы

Формы
Сбор информации
• Элементы форм, такие как области редактирования текста,
поля ввода флажков или меню, позволяют посетителям
веб-сайта вводить информацию и выбирать требуемые
операции.
• При добавлении элемента формы, необходимо указать
его имя. Имена служат только для различения элементов
форм на веб-странице, в окне браузера они не
отображаются. Когда пользователь вводит данные он
выбирает требуемую опцию, соответствующему элементу
формы присваивается определенное значение. После
щелчка на кнопке SUBMIT имя элемента и его значение
отсылается на веб-сервер или отправляется абоненту
эл.почты по указанному адресу.
Проектирование форм
• Формы, должны быть привлекательны внешне и просты в
использовании. Чтобы форма помещалась в границах одного
экрана, она должна содержать не более 40 текстовых строк по
вертикали и 75 символов по горизонтали.
• Добавляя в форму новые элементы, группируйте их по
значению и сопровождайте надписями, внятно поясняющими,
какого рода информация должна быть введена пользователем.
Если речь идет о полях редактирования и областях ввода
многострочного текста, убедитесь, что размеры элементов
соответствуют объему информации, которая должна вводиться.
Например, поле редактирования, предназначенное для
хранения номера телефона, должно обеспечивать возможность
набора строки и текста длиной не менее 10-15 символов.
Может оказаться полезным отобразить рядом текст с
примером, который поможет неискушенному пользователю
правильно ввести всю требуемую информацию.
Обработка информации
• Когда веб-сервер получает информацию о заполненной форме, он
запускает на выполнение одну или несколько программ, которые
носят название сценариев CGI (Common Gateway Interface). Например,
сценарий CGI способен отослать результаты заполнения формы по
электронной почте, сохранить их в виде внешнего файла, либо внести
в базу данных, размещенную на веб-сервере.
• Когда веб-броузер отсылает на сервер данные, введенные
пользователем, он осуществляет кодирование информации, добавляя
вспомогательные символы.
• Например, каждый символ пробела в этом случае приобретает вид
символа плюс, а пары имен элементов и присвоенных им значений
разделяются символом амперсанта &. Символы, отличные от букв и
цифр, такие как знак доллара, представляются в виде
последовательности, состоящей из знака %, за которым следует 16ный номер символа.
Дескриптор FORM
• Дескриптор FORM позволяет снабдить веб-страницу объектом формы.
На веб-странице допускается размещать любое число различных
форм.
• Атрибут METHOD позволяет определить, каким образом информация,
введенная пользователем, будет передаваться по интернету.
• Возможные значения:
• get – этот протокол установлен по умолчанию. Передает данные в
виде параметра переменной. Информация из формы добавляется в
конец URL, который был указан в описании заголовка формы.
• post – позволяет передавать большие объемы данных. Этот метод
передает всю информацию о форме немедленно после обращения к
указанному URL. Наиболее употребительный способ доставки данных.
Метод Post обеспечивает больший уровень безопасности и особенно
удобен при работе с крупными формами.
Дескриптор FORM
• Атрибут ACTION служит для указания места
назначения данных формы, отсылаемых
браузером. Браузер может отправить
информацию либо на обработку сценарием cgi,
расположенным на веб-сервере, либо по
указанному адресу электронной почты.
• Сценарий cgi –программа, запускаемая на
выполнение веб-сервером и предназначенная
для обработки данных формы, введенных
пользователем.
Дескриптор FORM
• Если необходимо, чтобы веб-браузер отсылал результаты
заполнения формы по эл.почте , необходимо обратиться к
атрибуту ENCTYPE, гарантирующее доставку данных в
приемлемом формате. ENCTYPE – определяет тип
содержимого формы. Средства e-mail оказываются особо
полезными в том случае, если конкретный веб-сервер не
разрешает пользоваться сценарием.
• Атрибут сообщает браузеру о способе кодирования перед
отсылкой серверу. Возможные значения:
• text/plain – используется при пересылке данных на e-mail.
• text/html - используется при пересылке данных на e-mail.
Дескриптор FORM
• Атрибут ACCEPT-CHARSET дает возможность
принудительно задать вид кодировки данных,
отсылаемых на веб-сервер.
• Например, если пользователь вводит
информацию по-русски, сервер должен
правильно интерпретировать символы в одном из
соответствующих форматов кодировки – KOI8-R.
• <form method="post" action="…" ACCEPTCHARSET="KOI8-R">
Группы элементов формы
• Для логического объединения того, что связано со сведениями о
пользователе, и того, что связано с его мнением был введен тег
<FIELDSET>. Все, что находилось между ним и его закрывающим тегом
</FIELDSET>, будет обведено в рамку и озаглавлено так, как указано в
теге <LEGEND>. Теги <FIELDSET> и <LEGEND> поддерживаются пока
только в Internet Explorer версии 4 и выше, в браузер Netscape начал
поддерживать их только в шестой версии. Атрибут ALIGN служит для
выравнивания текста заголовка влево (значение left), вправо (right),
вверх (top), вниз (bottom) относительно группы. В данный момент
браузерами верно интерпретируются только два значения – left и
right.
• В браузере Internet Explorer значение атрибута TITLE= выводится в
качестве всплывающей подсказки при наведении мыши на
содержимое элемента <FIELDSET>. Кстати, это относится также и к
другим тегам, которые могут иметь атрибут TITLE=. Можно, например,
установить его даже у элемента <BODY>. А то, что находится между
тегами <LEGEND> и </LEGEND>, будет вынесено в заголовок рамки.
Поля редактирования
• Поля редактирования позволяют вводить короткие фрагменты текста имена, адреса и т.д.
• При создании поля редактирования используется атрибут NAME для
наименования объекта. Имя поля поможет различить его в наборе
данных, отсылаемых на сервер. Наименование поля может состоять
только из буквенных и цифровых символов – знаки, пробелы и
пунктуации использовать не разрешается. Если необходимо ввести
пробелы, замените их символами подчеркивания.
• Атрибут SIZE предназначен для задания ширины поля редактирования
при его воспроизведении в окне браузера. По умолчанию ширина
выбирается достаточной для отображения около 20 символов.
Значение, присвоенное атрибуту SIZE, не оказывает влияния на длину
строки символов, которую сможет ввести пользователь.
• <INPUT NAME="name" SIZE="50">
Поля редактирования
•
•
•
•
•
•
•
•
•
•
•
•
Чтобы ограничить емкость поля редактирования, следует применить атрибут
MAXLENGTH – удобное средство первично контроля корректности данных, вводимых
пользователем. Например, если поле предназначено для хранения 3-х символьного
кода валюты, уместно присвоить атрибуту MAXLENGTH значение 3.
При создании поля редактирования, предназначенного для хранения
конфиденциальной информации, которую необходимо защитить от просмотра
посторонними лицами в момент ее ввода, атрибуту TYPE дескриптора INPUT следует
присвоить значение PASSWORD. По мере заполнения такого поля браузер вместо
реальных данных будет отображать символы звездочки (*).
Введите пароль:<input type="password" name="pwd" size="8" MAXLENGTH ="7">
Атрибут TYPE может применять следующие значения:
Text
Password
Checkbox
File
Radio
Submit
Reset
Hidden
Поля редактирования
• Атрибут VALUE позволяет поместить в создаваемое поле
некоторое исходное текстовое значение, которое затем
может быть отредактировано, либо принять им без
изменения. С помощью этого атрибута удобно также
располагать внутри поля краткие пояснительные
инструкции.
• Дата рождения:
• <input type="text" name="birthdate"
value="дд-мм-гггг">
Поля редактирования
• Атрибут CHEKED позволяет установить переключатель
заранее, так чтобы при воспроизведении страницы опция
выбиралась автоматически. Предварительный выбор
наиболее популярных опций-переключателей,
выполненный вами, поможет пользователям сэкономить
рабочее время.
• Атрибут ACCESSKEY дает возможность назначить элементу
формы, такому как переключатель, “горячую”
комбинацию клавиш, что позволит пользователям быстро
выбирать необходимую опцию одновременным нажатием
ALT и соответствующей буквенной или цифровой клавиши.
Чтобы задать атрибут, введите в пределах дескриптора
элемента формы ACCESSKEY=”?” и замените ? буквенным
или цифровым символом.
Создание меню
• Если в распоряжение пользователей необходимо предоставить набор
альтернативных опций, эту задачу удобно решить с помощью
элемента формы, называемого меню. Меню обычно используется для
перечисления доступных режимов работы, отображения списков
товаров, услуг и т.п.
• Атрибут NAME позволяет задать имя меню, служащее для различения
объекта в наборе данных об элементах формы, который отсылается
на веб-сервер.
• По умолчанию объект меню воспроизводится на веб-странице в виде
раскрывающегося списка, в котором единовременно виден только
один, текущий, элемент из группы доступных опций. Если
необходимо, чтобы отображалось сразу несколько элементов, следует
применить атрибут SIZE, позволяющий указать число элементов меню,
которые сможет увидеть пользователь, не прибегая к помощи полосы
прокрутки.
Создание меню
• Дескриптор <OPTION> служит для определения отдельного элемента
меню. Атрибут VALUE используется для именования элемента. При
выборе опции указанное имя будет передано в итоговый набор
данных формы.
• Атрибут SELECTED позволяет выбрать определенный элемент меню
предварительно, так чтобы при воспроизведении страницы
соответствующая опция устанавливалась автоматически. Это удобно,
если речь идет о варианте, который, по вашему мнению, так или
иначе будет выбираться большинством пользователей.
• <SELECT NAME="age" SIZE="2">
• <OPTION VALUE="мin20">Менее 20
• <OPTION VALUE="20-30“ selected>20-30
• <OPTION VALUE="мax30">Более 30
• </SELECT>
Создание меню
• Атрибут MULTIPLE дескриптора <SELECT> предоставляет
пользователям возможность выбора единовременно более одной
опции меню с помощью щелчков кнопкой мыши при нажатой
клавиши <Ctrl>. При использовании атрибута MULTIPLE меню всегда
отображается в распахнутом виде, а не в форме раскрывающегося
списка, как обычно.
• Пример:
• <P>В каких странах вы уже побывали?</P>
• <SELECT NAME=”countries” MULTIPLE>
• <OPTION VALUE=”USA”>США
• <OPTION VALUE=”France”>Франция
• <OPTION VALUE=”Italy”>Италия
• </SELECT>
Создание многоуровневого
меню
•
•
•
•
•
•
•
•
•
•
•
•
•
Дескриптор <OPTGROUP> позволяет построить многоуровневое меню –
удобный инструмент представления данных, поделенных на категории по
тематическому принципу. Атрибут LABEL служит для задания имени элемента
основного меню, который ссылается на вложенное меню.
Пример:
<P>Что Вы любите поесть-попить?</P>
<SELECT NAME=”food”>
<OPTGROUP LABEL=”Еда”>
<OPTION VALUE=”Chicken”>Жареная курица
<OPTION VALUE=”Buckwheat”>Гречневая каша
</OPTGROUP>
<OPTGROUP LABEL=”Напитки”>
<OPTION VALUE=”vodka”>Водка
<OPTION VALUE=”milk”>Молоко
</OPTGROUP>
</SELECT>
Область ввода многострочного
текста
•
•
•
•
•
Дескриптор TEXTAREA позволяет создать, в которую пользователь может
ввести несколько строк или абзацев произвольного текста – например,
адресовать вопросы авторам сайта или поделиться с ними собственным
мнением.
Атрибут NAME служит для задания имени создаваемой области ввода
многострочного текста, которое помогает различить объект в наборе данных,
отсылаемых на веб-сервер.
Атрибуты ROWS и COLS предназначены для определения значения высоты и
ширины области ввода. Поскольку читателям не дано права изменять
параметры подобных объектов на веб-странице, о том, чтобы область ввода
умещалась в пределах экрана и пользователям было удобно с ней работать,
должны позаботиться вы сами.
Атрибут WRAP задает правила переноса целых слов текста, вводимых
пользователем. Значения soft включает функцию переноса слов на экране, но
не воздействует на внешний вид данных, отсылаемых на сервер. Значение
hard гарантирует форматирование данных как на экране, так и во внутренним
буфере браузера. Константа off отключает функцию автоматического
переноса слов.
<TEXTAREA NAME="unit" ROWS="4" COLS="30"></TEXTAREA>
Порядок перехода по элементам
формы
•
•
•
•
Читатели веб-страниц могут переходить от одного элемента формы к другому с
помощью клавиши <Tab>. При этом браузер по умолчанию активизирует элементы в
порядке их следования в тексте формы. Изменение порядка перехода в соответствии с
внутренней логикой содержимого формы способно оказать существенную помощь
пользователям и облегчить их работу.
Для изменения порядка перехода по элементам формы применяется атрибут TABINDEX.
Чтобы включить элемент в перечень, описывающий новый порядок перехода,
поместите тело соответствующего дескриптора элемента атрибут TABINDEX и присвойте
ему числовое значение индекса из промежутка 32767. Если необходимо исключить
элемент из перечня, установите для атрибута TABINDEX отрицательное число
(например, TABINDEX=”-1”).
Когда пользователь впервые нажмет клавишу <Tab>, курсор переместится к элементу с
наименьшим положительным значением индекса. Последовательность нажатий <Tab>
прведет пользователя к элементу с наибольшей величиной индекса. Если нескольким
элементам формы назначено одинаковое значение индекса, первым выбранным
окажется тот, который в тексте веб-страницы размещается раньше остальных.
Необходимо отметить, что значение атрибута TABINDEX может устанавливаться и для
других объектов веб-страницы за пределами формы, таких как графические
изображения (дескриптор <IMG>), гиперссылки (<A>), или карты ссылок (<AREA>).