9. HTML-формы

HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например регистрацию пользователя на сервере (см. рисунок 10) или выбор нужного документа из представленного списка. Формы поддерживаются всеми популярными браузерами.

Рисунок 10 – Пример HTML-формы

Teг<FORM>

<FORM ACTION="URL" METH0D=метод_передачи ENCTYPE=MIME-тип>

содержание_формы

</FОRM>

В HTML-документе для задания формы используются теги <FORM>...</FORM>, отмечающие соответственно начало и конец формы. Документ может содержать несколько форм, но они не могут быть вложены одна в другую. Тег <F0RM> имеет атрибуты ACTION, METHOD и ENCTYPE. Отдельные браузеры (Netscape, Internet Explorer) поддерживают дополнительные атрибуты помимо, стандартных, например CLASS, NAME, STYLE и т. д.

Тег <INPUT>

<INPUT TYPE=тип_поля NAME=имя_поля другие_атрибуты>

37

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

Он имеет два обязательных атрибута: TYPE и NAME. Атрибут ТУРЕ определяет тип поля: селекторная кнопка, кнопка передачи и т. д. Атрибут NAME определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные атрибуты меняются в зависимости от типа поля. Ниже приведено описание типов полей, создаваемых при помощи тега <INPUT>, и порождаемых ими элементов ввода.

ТУРЕ=ТЕХТ Создаёт элемент для ввода строки текста. Дополнительные атрибуты;

- MAXLENGTH=n

Задаст максимальное количество символов, разрешённых в текстовом поле. По умолчанию не ограничено.

- SIZE=n

Максимальное количество отображаемых символов.

VALUE=начальное значение Первоначальное значение текстового поля.

TYPE=PASSWORD

Создаёт элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа *.

ПРИМЕЧАНИЕ. Поле PASSWORD не обеспечивает безопасности ввёденного текста, так как на сервер он передаётся в незашифрованном виде.

TYPE=FILE

Создаёт поле для ввода имени локального файла, сопровождаемое кнопкой Browse. Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или, воспользовавшись кнопкой Browse, выбрать его из диалогового окна, отображающего список локальных файлов. Для корректной передачи присоединённого файла следует установить значения атрибутов формы равными ЕNCTYPE= “multipart/formdata” и METHOD=POST. В противном случае будет передана введённая строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные атрибуты MAXLENGTH и SIZE имеют тот же смысл, что и для элементов типа TEXT и PASSWORD.

38

TYPE=CHECKBOX

Создает элемент-переключатель, принимающий всего два значения (вкл./выкл., истина/ложь) и отображаемый в виде квадратной кнопки. Элементыпереключатели CHECKBOX можно объединить в группу, установив одинаковое значение атрибута NAME для всех её элементов. Прочие атрибуты:

- VALUE=строка

Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передаётся. Обязательный атрибут.

- CHECKED

Если указан атрибут CHECKED, элемент является выбранным по умолчанию. Если переключатели образуют группу, то передаваемым значением является строка разделённых запятыми значений атрибута VALUE всех выбранных элементов.

TYPE=RADIO

Создаёт элемент «радиокнопка», существующий только в составе группы подобных элементов, из которых может быть выбран лишь один. Все элементы группы должны иметь одинаковое значение атрибута МАМЕ. Отображается в виде круглой кнопки. Дополнительные атрибуты:

- VALUE=строка

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

- CHECKED

Устанавливает элемент, выбранный по умолчанию. Один и только один элемент в группе должен иметь этот атрибут.

TYPE=SUBMIT

Создаёт кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде прямоугольной кнопки с надписью Submit. Дополнительный атрибут:

- VALUE=название_кнопки

Позволяет изменить надпись на кнопке. Атрибут NAME для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передаётся на сервер. Если атрибуты МАМЕ и VALUE присутствуют, например

<INPUTE TYPE=SUBMIT NAME= “submit_button” VALUE= “OK”>,

39

то в список параметров формы, передаваемых на сервер, включается параметр submit_button"OK". Внутри формы могут существовать несколько кнопок передачи.

TYPE=RESET

Создаёт кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset. Надпись можно изменить при помощи дополнительного атрибута

- VALUE=название кнопки

Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует атрибут NAME.

TYPE=IMAGE

Создаёт элемент в виде графического изображения, действующий аналогично кнопке Submit. Дополнительные атрибуты:

- SRC=url_изображения

Задаёт ссылку (url) на файл с графическим изображением элемента. - ALIGN=тип_выравнивания

TYPE=HIDDEN

Создаёт скрытый элемент, не отображаемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

Тег <SELECT>

<SELECT NAME=имя поля SIZE=n MULTIPLE>

элементы OPTION <SELECT>

Тег <SELECT> предназначен для того, чтобы организовать внутри формы выбор из нескольких вариантов без применения элементов ввода типа СНЕCKBOX и RADIO. Дело в том, что если элементов выбора много, то представление их в виде переключателей и радиокнопок увеличивает размеры формы, делая её труднообозримой. С помощью тега <SELECT> варианты выбора более компактно представляются в окне браузера в виде элементов ниспадающего меню или списка прокрутки, Тег имеет следующие атрибуты:

- NAME=строка

Обязательный атрибут. При выборе одного или нескольких элементов

40

формируется список выбранных значений, который передаётся на сервер под именем NAME.

- SIZE=n

Устанавливает число одновременно видимых элементов выбора. Если n=1, то отображается раскрывающийся список, если n > 1, то список прокрутки с n одновременно видимыми элементами.

- MULTIPLE

Означает, что из меню или списка можно выбрать одновременно несколько элементов. Если этот атрибут задан, то список выбора ведёт себя как группа переключателей CHECKBOX, если не задан, как группа радиокнопок RADIO.

Элементы меню задаются внутри тега <SELECT> при помощи тега

<OPTION>:

<OPTION SELECTED VALUE=строка>содержимое тera</OPTION>

Закрывающий тeг</0PTI0N> не используется. Атрибут VALUE содержит значение, которое пересылается серверу, если данный элемент выбран из меню или списка. Если значение этого атрибута не задано, то по умолчанию оно устанавливается равным содержимому тега <OPTION>. Например, элементы:

<OPTION VALUE=Red>Red <OPTION>Red

имеют одно значение — Red. В первом случае оно установлено явно при помощи атрибута VALUE, во втором — по умолчанию. Атрибут SELECTED изначально отображает элемент как выбранный.

Teг<TEXTAREA>

<TEXTAREA NAME=имя ROWS=m COLS=n>

текст

<TEXTAREA>

Создаёт внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Для пересылки на сервер каждая введённая строка дополняется символами %0D%0A (ASCII-символы «возврат каретки» и «перевод строки» с предшествующим символом %), полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым атрибутом NAME. Атрибуты:

- NAME

41

Необходимый атрибут, используемый для идентификации данных при пересылке на сервер.

- COLS=n

Задаёт число столбцов видимого текста.

- ROWS=n

Задаёт число строк видимого текста.

Между тегами <textarea> и </texiarea> можно поместить текст, который будет отображаться по умолчанию.

Ниже представлен пример формы, включающей набор характерных полей (рисунок 11), и HTML-код, использованный для её создания.

Данная форма содержит:

текстовое поле для ввода регистрационного имени пользователя;

текстовое поле для ввода пароля, отображаемого в окне символами *;

текстовое поле для подтверждения пароля, также отображаемого символами *;

группу радиокнопок для указания возраста пользователя (единственный выбор);

группу переключателей для указания языков, которыми владеет пользователь (множественный выбор);

список прокрутки для указания предпочтительного формата данных (выбор из ограниченного списка);

блок ввода многострочного текста для перечисления любимых авторов (неизвестное заранее количество строк);

кнопку передачи с меткой ОК (у этого элемента отсутствует атрибут NAME, он не нужен, так как в данном примере всего одна кнопка передачи, а значит, CGI-программе нет необходимости определять, от какой именно кнопки поступила команда передачи данных);

кнопку сброса с меткой Отменить.

42

<input type="radio" name="age" value="lt20" checked >До 20 <input type="radio" name-"age" value="20_30">20 – 30 <input type="radio" name="age" value="30_50">30 – 50 <input type="radio" name="age" value="gt50">Старше 50 <br><br>

На каких языках читаете?

<input type="checkbox" name="language" value="russian" checked>русский

<input type="checkbox" name="language" value=”еnglish”>английский

<input type="checkbox" name="language" value="french">французский <input type="checkbox" name="language" value="german">немецкий <br><br>

Какой формат данных является для Вас предпочтительным? <bг>

<select name="format" size=2 >

<option selected value="HTML">HTML <option value="Plain text">Plain text

<option value="PostScript”>PostScript

<option value="PDF">PDF </select> <br><br>

Ваши любимые авторы:

<br>

<textarea name="wish" cols=40 rows=3> </textarea>

<br><br>

<input type="submit” value="0K"> <input type="reset" value="Отменить"> </form>

</body>

</html>

Итак, после заполнения формы и щелчка по кнопке передачи Submit дальнейшее прохождение данных описано ниже.

Информация кодируется и пересылается на Web-сервер, который передаёт её для обработки CGI-программе;

CGI-программа обрабатывает полученные данные, возможно, обращаясь за помощью к другим программам, выполняющимся на том же компьютере, и

44

генерирует новый «виртуальный» HTML-документ либо определяет ссылку на уже имеющийся;

новый HTML-документ или ссылка передаются CGI-программой Webсерверу для возврата клиенту.

Контрольные вопросы и задания

1.Для чего создаются HTML-формы?

2.Укажите основные элементы для создания форм, с описанием их параметров.

3.Приведите пример HTML кода списка прокрутки для указания дисциплин, являющихся специальными для вашей специальности (видимый список из 3 элементов.)

4.Создайте форму, представленную на рисунке 11, добавьте в неё поля по своему усмотрению.

10.Фреймы на Web-страницах

С помощью фреймов можно разделить окно браузера на части. В результате пользователь, просматривающий страницу, сможет изучать каждую её часть независимо от остальных частей (см. рисунок 12).

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

Рисунок 12 – Пример Web-страницы с применением фреймов

45

Рассмотрим дескрипторы <FRAMESET> и <FRAME>.

В дескрипторе <FRAMESET> задаётся количество строк или столбцов (ROWS, COLS), а также их размеры и расположение. Существует три способа задания размера строк и столбцов.

1.Задание пикселями. Просто укажите высоту или ширину элемента в пикселях.

2.Задание процентами. Укажите, сколько процентов от всего размера окна браузера следует отдать данному фрейму. После цифр обязательно поставьте знак «%». Также позаботьтесь о том, чтобы все указанные процентные значения

всумме составляли 100%.

3.Использование символа звёздочки. С помощью символа звёздочки элементу выделяется всё оставшееся в окне браузера место. Например, можно написать 20%, 20%, 60% или 20%, 20%, * и никакой разницы в результатах не будет.

В этом же дескрипторе можно задать толщину разграничительной линии и окаймляющей рамки, для чего предназначены параметры FRAMEBORDER=”X” и BORDER=”Y”, где X и Y – толщина соответствующих элементов в пикселях.

Дескриптор <FRAMESET> имеет следующий синтаксис:

<FRAMESET COLS=”величины” ROWS=”величины”>

В дескрипторе <FRAME> задают параметры для каждого фрейма в отдельности. Параметр SRC задаёт имя файла, который загрузится в данном фрейме. Параметр NAME задаёт имя данного фрейма. Это имя необходимо для того, чтобы впоследствии можно было указать, к какому именно фрейму относится ссылка. В этом дескрипторе можно также определить величину границы фрейма, за которую ничего, кроме фона, не может заходить. Это осуществляется с помощью параметров MARGINWIDTH=”X” и MARGINHEIGHT=”Y”, где X и Y – значения в пикселях.

Существует также очень полезный в некоторых случаях параметр SCROLLING, позволяющий задать наличие у фрейма полос прокрутки. Этот параметр может иметь значения YES, NO или AUTO. И конечно же, следует упомянуть о параметре NORESIZE. Этот параметр позволяет создавать фреймы, размеры которых в дальнейшем изменить будет невозможно. По умолчанию размер фрейма всегда можно изменить с помощью мыши так же просто, как и размер обычного окна Windows. Параметр NORESIZE отменяет подобную возможность. В целом дескриптор <FRAME> имеет следующий синтаксис.

<FRAME SRC=”URL” NAME=”имя фрейма”

46

MARGINWIDTH=”величина” MARGINHEIGHT=”величина” SCROLLING=”yes no auto” NORESIZE>

Плюсы и минусы применения фреймов в HTML-документах

Главным недостатком фреймов всегда была невозможность выделения в произвольном месте страницы прямоугольной области заданных размеров WIDTH (ширина) и HEIGHT (высота). Ситуация изменилась с появлением дескриптора IFRAME – расширения стандарта языка HTML от корпорации Microsoft. Этот дескриптор не поддерживается ни одним браузером, за исключением Internet Explorer.

Рассмотрим подробнее все особенности применения дескриптора IFRAME. <IFRAME SRC=”Имя файла” WIDTH=”Ширина”

HEIGHT=”Высота” NAME=”Имя” SCROLLING=”yes / no / auto” [NORESIZE]>

</IFRAME>

Как видите, синтаксис дескриптора IFRAME близок к синтаксису обычного дескриптора <FRAME>. Например, можно задавать наличие (отсутствие) полос прокрутки, запрещать (разрешать) изменение размеров окна. Кроме того, поскольку данный фрейм есть не что иное, как прямоугольная область со всеми вытекающими из этого последствиями, можно задать для него параметры размеров WIDTH и HEIGHT.

Применяя дескриптор IFRAME, можно активно и часто менять содержимое отдельно взятого окна без самой страницы. Дескриптор IFRAME активно используется в Интернет для вывода баннеров. Кроме того, дескриптор IFRAME – идеальное решение для вывода внешней странички со счётчиками. Таким образом, вставляя код счётчика в специальную страничку и показывая её на всех страницах сайта, мы получаем самую подробную статистику решений.

Тем не менее существует целый ряд недостатков сайта, построенного с применением фреймов:

Странички сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида <a href=”…”>. . .</a> и поисковые роботы, естественно, не могут попасть на внутренние странички. Приходится прикладывать дополнительные усилия, чтобы все же достичь этой цели.

В случае попадания не на первую страничку сайта не существует «официального» способа перейти на его первую страничку – приходится вручную редактировать путь в адресной строке браузера.

47