Основы языка HTML. Часть вторая

Основы языка HTML. Часть вторая
Дмитрий Кудрец

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

Основы языка HTML

Часть вторая

Дмитрий Кудрец

© Дмитрий Кудрец, 2019

ISBN 978-5-4496-2167-2 (т. 2)

ISBN 978-5-4496-2166-5

Создано в интеллектуальной издательской системе Ridero

Формы

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

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

Формы размещаются между тегами <FORM> … </FORM>.

HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой.

Тег <FORM> может содержать следующие атрибуты:

ACTION – обязательный атрибут. Определяет, где находится обработчик формы. Он должен содержать URL скрипта, который будет обрабатывать полученные данные. Очень часто скрипты хранятся в директориях под названием BIN/ или CGI-BIN/ на сервере.

Примером элемента, задающего границы формы, может быть следующий код:

<FORMMETHOD=«POST» ACTION="HTTP://WWW.F.NET/CGI-BIN/S.PL">

</FORM>

METHOD – определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. По умолчанию предполагается METHOD=GET.

Метод GET означает, что данные формы будут добавлены в конец URL назначения. В большинстве случаев это накладывает серьезные ограничения на размеры данных (чаще всего не более 100 символов). Впрочем, если форма состоит из одного-двух элементов и важно передавать данные с высокой скоростью, то используется именно GET.

Например: <FORMMETHOD=«GET» ACTION="/CGI-BIN/SEARCH»>

Если же вы собираетесь поместить большое количество данных в большую форму, метод GET использовать не стоит.

Для таких случаев существует POST, который посылает данные отдельно и не имеет практического ограничения на их размер. Открывающий тег элемента <FORM> при использовании POST выглядит так: <FORM METHOD=«POST» ACTION="/CGI-BIN/SURVEY.PL»>

ENCTYPE – определяет, каким образом данные из формы будут закодированы для передачи обработчику. Его включают в элемент <FORM> только в том случае, если вы просите пользователя прислать на сервер какой-либо файл. В этом случае следует указать следующее значение: ENCTYPE=«MULTIPART/FORM-DATA».

Атрибуты NAME и ID можно применять для идентификации форм при использовании скриптов или таблиц стилей. Атрибут ID является совместимым со стандартом XHTML, a NAME – это лишь дань старым традициям. Надежнее всего использовать оба атрибута:

NAME=«MYFORM» ID=«MYFORM»

Для внесения информации пользователем в форму используется элемент <INPUT>.

Каждый элемент <INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля).

Для ввода данных существуют следующие типы элементов:

TYPE=«TEXT» – определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=«число» (ширина окна ввода в символах) и MAXLENGTH=«число» (максимально допустимая длина строки в символах).

Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст «Введите текст», который пользователь может изменить.

TYPE=«PASSWORD» – определяет окно для ввода пароля. Абсолютно аналогичен типу TEXT, только вместо символов вводимого текста показывает на экране звездочки (*):

Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля – 10 символов.

TYPE=«RADIO» – определяет переключатели. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе переключателей с одинаковыми именами может быть только один помеченный переключатель.

Определяет группу из трех переключателей, подписанных YES, NO и POSSIBLE. Первоначально помечен первый переключатель. Если пользователь не отметит другую кнопку, обработчику будет передана переменная QUESTION со значением YES. Если пользователь отметит другую кнопку, обработчику будет передана переменная QUESTION со значением NO или POSSIBLE.

TYPE=«CHECKBOX» – определяет флажки, в которых можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от переключателей, в группе флажков с одинаковыми именами может быть несколько помеченных.

Определяет группу из четырех флажков. Первоначально помечен второй и четвертый. Если пользователь не произведет изменений, обработчику будут переданы две переменные: COMP=«VIDEO» и COMP=«MODEM».

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

Например, <INPUTTYPE=«HIDDEN» NAME=«VERSION» VALUE=«1.1»> определяет скрытую переменную VERSION, которая передается обработчику со значением 1.1.

TYPE=«SUBMIT» – определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику.