Командные кнопки

Формы

! Методами, доступными нам при изучении данного курса мы можем только создавать формы, но не можем организовать их отправку.

Форма, или формуляр, представляет собой отдельную Интернет-страницу или часть страницы, на которой размещены разнообразные типовые для Windows элементы интерактивного диалога: поля ввода текста, флажки и радиокнопки с поясняющими строками текста, раскрывающиеся списки и одна или несколько кнопок, обычно служащих для очистки формы (приведения в исходный вид в случае неправильного заполнения) и отправки введенных данных сформированного информационного запроса) на сервер.

Форма (формуляр) в HTML-документе определяется в виде блока <FORM>…</FORM>, внутри которого располагаются теги, задающие те или иные формы, а также играющие роль подсказок текстовые строки и обращения к графическим файлам. Внутри формы могут использоваться обычные HTML-теги, например, табличные.

В составе тега <FORM> записываются атрибуты, определяющие способ и характеристики обработки заключающейся в форме информации, в частности, способ пересылки ее на сервер и кодирования данных в процессе этой пересылки.

Команда <FORM> имеет следующие атрибуты:

Атрибут	Описание
action	Задает адрес для отправки формы по сети. Вы можете послать форму на сервер, где она будет обработана программой (CGI-скриптом[1]), а можете указать в качестве значения атрибута адрес электронной почты, и форма будет послана браузером по e-mail (пример: FORM action=mailto: адрес электронной почты).
enctype	Задает кодирование передаваемых по сети данных (пример: enctype= “text=pain” задаст передачу обычного текста).
method	Задает протокол для пересылки данных на сервер. По умолчанию используется протокол get, но лучше использовать протокол post как более универсальный.

Каждому элементу формы соответствует тег <INPUT>, который позволяет создавать различные части формы. Этот элемент не имеет конечного тега, так как все параметры задаются при помощи атрибутов. Атрибут тега type указывает тип данного элемента.

Контейнер <TEXTAREA>…</TEXTAREA> задает многострочное текстовое окно.

Контейнер <SELECT>…</SELECT> используется для создания раскрывающегося списка.

Радиокнопки <INPUT type=radio>

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

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

Радиоктопка задается командой:

<INPUT type =radio >

Дополнительные атрибуты:

Атрибут name

Значением является идентификатор (имя). Кнопки, входящие в одну взаимосвязанную группу, должны иметь одинаковое имя. Именно по этому критерию (одинаковое имя) браузер распознает переключатель и организует снятие отметки с кнопки, когда выбрана другая в этой же самой группе.

Атрибут checked

Логический атрибут, для него не указывается значение. Присутствие атрибута означает, что отметка на данной кнопке установлена по умолчанию.

Атрибут value

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

Пример:

<FORM metod=postaction=mailto:[email protected]> Что будете ловить?<BR> <INPUT type=radio name=fish value=“Карась”> Карась<BR> <INPUT type=radio name=fish value=“Щука” checked> Щука<BR> <INPUT type=radio name=fish value=“Сом”> Сом<BR> </FORM>

Что придет по e-mail

Обычно браузер не сам отсылает форму, а поручает работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например: Outlook).

В указанном выше примере отметка стоит на позиции «Щука». При нажатии на кнопку, по указанному в теге <FORM> адресу уйдет письмо с темой «Форма отправлена из Microsoft Internet Explorer» (для браузера IE) следующего содержания:

fish=Щука

Таким образом, браузер составляет письмо из пар «имя=значение», которые выбираются по порядку из полей формы.

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

Флажки <INPUT type=checkbox>

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

Флажки не зависят один от другого. Их можно устанавливать и сбрасывать в любой комбинации.

Атрибуты:

name - имя флажка (при объединении нескольких флажков в группу всем им дается одно и то же имя);

value – значение флажка (записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользователем);

checked - что отметка на данном флажке по умолчанию.

Пример:

<FORM metod=post action=mailto:[email protected]> <INPUT type=checkbox name=html> HTML-конструирование<BR> <INPUT type=checkbox name=jschecked> JavaScript-конструирование<BR> <INPUT type=checkbox name=dtml> DTML-конструирование<BR> <INPUT type=checkbox name=al checked> Алгоритмика </FORM>

Значение атрибута name с добавкой «=on» передается в сеть, если флажок отмечен. Например, если выбраны книги «Алгоритмика» и «JavaScript-конструирование», в сеть будет передана запись:

js=on

al=on

Атрибут checked задает начальную отметку флажка.

Поле ввода имени пересылаемого файла <INPUT type=file>

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

Атрибуты:

name – имя данного диалогового элемента;

size – ширина текстового поля;

maxlenght – максимально допустимое количество символов имени файла (вместе с путем).

Пример:

<FORM> <INPUT type=file name=MyFile size=20 maxlenght=40> </FORM>

Поле ввода текста <INPUT type=text>

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

В эту строку вводится текстовая информация.

Атрибуты:

name – уникальное имя поля;

size – ширина поля (в символах);

maxlenght – максимально допустимое количество вводимых символов;

value – задает начальную запись в строке ввода (записывается в кавычках).

Пример:

<FORM> <INPUT type=text name=MyFam size=20 maxlenght=40value=“Введите фамилию”> </FORM>

Значение атрибута name с текущим содержанием строки ввода передается в сеть:

MyFam=Введите фамилию

Атрибут size задает ширину строки ввода в символах (рекомендуется кодировать с запасом).

Поле ввода пароля <INPUT type=password>

Прямоугольное текстовое поле, отличающееся от поля для ввода текста только тем, что вводимый текст отображается в нем как соответствующее количество «звездочек» или «точек». Имеет те же атрибуты, что и при type =text.

Пример:

<FORM> <INPUT type=password name=MyPass size=20 maxlenght=40value=“Пароль”> </FORM>

Многострочное поле ввода <TEXTAREA>…</TEXTAREA>

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

Этот элемент удобен для ввода в текст нескольких строчек. Начальное содержимое поля кодируется так же, как и содержимое блока <PRE>, т.е. текст выводится в том виде, в каком он представлен в HTML-файле без автоматического форматирования.

Атрибуты:

name – имя области;

cols – ширина области (в символах);

rows – высота области (в строках);

wrap – управление автоматическим переносом строк внутри окна и при передаче текста на сервер.

Атрибут может принимать следующие значения:

wrap= off – без переноса;

wrap =physical – автоматический перенос с вставкой в соответствующие места текста символов перехода на новую строку;

wrap =virtual – автоматический перенос строк без добавления символов перехода на новую строку (т.е. на сервер текст передается как одна строка).

Пример:

<FORM> <TEXTAREA name=MyFamrows=7cols=20wrap=virtual>Для прокручивания содержимого в этом поле ввода используйте вертикальную линейку прокрутки или клавиши PgUp, PgDn либо клавиши управления курсором. </TEXTAREA> </FORM>

Раскрывающиеся списки <SELECT>…</SELECT>

Предназначается как для предоставления пользователю возможности выбора одной или нескольких опций, так и для использования в качестве своеобразного меню. В HTML кодируется при помощи контейнера <SELECT>…</SELECT>.

Атрибуты <SELECT>…</SELECT>

name – имя списка;

size – количество одновременно отображаемых пунктов;

multiple – разрешение помечать (при одновременно нажатых клавишах Ctrl и Shift) сразу несколько пунктов меню.

Если атрибут multiple и/или значение атрибута size больше 1, то список выводится развернутым (тогда значение size определяет количество одновременно видимых на экране пунктов списка, для просмотра остальных используется линейка прокрутки). В противном случае (при отсутствии параметра multiple и при size =1) выводится список, раскрывающийся щелчком мыши на расположенной справа кнопке со стрелкой вниз.

Значение отдельных пунктов списка определяется при помощи тегов <OPTION>, каждый из которых определяет один пункт.

Атрибуты <OPTION>

value – записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный пункт выбран; при отсутствии данного параметра на сервер передается название выбранного пункта списка;

selected – определяет данный пункт как помеченный по умолчанию (для раскрывающегося списка, т.е. при size =1 и отсутствии атрибута multiple, данный атрибут может быть присвоен только одному пункту; при отсутствии атрибута selected изначально выбранным по умолчанию является первый пункт списка) В IE 5.0 этот параметр обязателен, иначе поле списка выводится пустым.

Название пункта записывается после тега <OPTION>.

Пример:

<FORM> <TABLE bgcolor=silver> <TR> <TD> <P>Укажите автора: <P>Здесь лапы у елей дрожат на весу,<BR> Здесь птицы щебечут тревожно.<BR> Живешь в заколдованном диком лесу,<BR> Откуда уйти невозможно. </TD> </TR> <TR> <TD> <SELECT name=autor> <OPTION>Выберите автора</OPTION> <OPTION>А.Пушкин</OPTION> <OPTION>М.Лермонтов</OPTION> <OPTION>В.Высоцкий</OPTION> <OPTION>Б.Окуджава</OPTION> </SELECT> </TD> </TR> </TABLE> </FORM>

Для раскрывающегося списка самый первый пункт (демонстрируемый по умолчанию) обычно является «фиктивным и содержит текст краткой «подсказки» для пользователя, например: «Выберите автора».

Кнопка для отправки формы в сеть <INPUT type=submit>

Атрибуты тега <FORM> определяют, куда и как будет послана форма. Атрибут submit служит для создания кнопки, щелчок по которой вызывает отправку информации формы на сервер.

Атрибуты

name – имя кнопки. Должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени может выделить необходимые данные.

value - надпись на кнопке. При отсутствии данного параметра выводится стандартная надпись Подача запроса или Submit.

Пример:

<FORM> <INPUT type=submitname=znachvalue=Пуск> </FORM>

Кнопка очистки формы <INPUT type=reset>

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

Атрибуты:

name – имя кнопки. Необязательный параметр, нигде не используется, разве что при работе со скриптами;

value - надпись на кнопке. При отсутствии данного параметра выводится стандартная надпись Сброс или Reset.

Пример:

<FORM> <INPUT type=resetvalue=Сброс> </FORM>

Обычные кнопки <INPUT type=button>

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

Для этого в теге <INPUT> используются атрибут onclick, который определяет программу, которая обрабатывает нажатие кнопки.

Атрибуты:

name – имя кнопки;

value - надпись на кнопке.

Пример:

<FORM> <INPUT type=button value=“Нажми меня” onclick= alert(“Привет!”)> </FORM>

В примере использована функция alert, которая выводит на всплывающую панель значение своего аргумента.

Графические командные кнопки <INPUT type=image>

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

Атрибуты:

name – имя кнопки;

align – выравнивание кнопки относительно окружающего текста (bottom, left, middle, right, top). Необязательный атрибут;

border – толщина рамки вокруг кнопки. Необязательный атрибут;

src – имя (и, если требуется, путь или адрес URL);

value – текстовая строка.

Пример:

<FORM> <INPUT type=image name=button value="Графическая кнопка" src=./pic/image.jpg> </FORM>

Интерфейсные элементы блока <FORM>

Элемент	Тег	Описание
Радиокнопки	<INPUT type=radio>	Выбор одного варианта из нескольких альтернативных.
Флажки	<INPUT type=checkbox>	Установка меток. Любое число меток.
Строка ввода	<INPUT type=text>	Ввод в границах одной строки.
Поле с паролем	<INPUT type=password>	Введенная информация отображается звездочками
Поле ввода	<TEXTAREA> … </TEXTAREA>	Ввод в многострочное поле.
Меню	<SELECT> <OPTION></OPTION> <OPTION></OPTION> <OPTION></OPTION> </SELECT>	Выбор вариантов из нескольких альтернативных.
Обычные кнопки	<INPUT type=button value=Вид>	Нажатие на такую кнопку обрабатывается при помощи скриптовой программы.
Восстановление формы	<INPUT type=reset value=Сброс>	Приведение элементов формы в начальное состояние (то, которое было до воздействий пользователя)
Посылка форма в сеть	<INPUT type=submit value=Пуск>	После нажатия на эту кнопку браузер отправляет форму по указанному в атрибуте actio n тега <FORM> адресу.
Кнопка с рисунком	<INPUT type=image>	Для указания графического файла используется атрибут src.
Присоединение файла к форме	<INPUT type=file>	Пользователю предлагается записать имя файла в поле ввода. Браузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный диалог выбора файлов.
Скрытый элемент	<INPUT type=hidden>	Такие элементы используются для того, чтобы включить в набор данных формы некую фиксированную информации. Это определение имени переменной и ее значения.

Пример страницы с формами в приложенном файле.

Задание к уроку:

Создайте страницу с формами.

[1] CGI-скриптом называют программу, работающую на сервере (на котором лежит www-страничка).Эта программа получает с машины клиента данные. Данные посылаются, например, из формы по нажатию кнопки Обработать заказ. Данные поступают на сервер в программу CGI, обрабатываются и результат посылается клиенту. Гипертекстовая страничка на машине клиента выводит на экран надпись (например: «Заказ обработан и принят»).

Дата добавления: 2015-05-09