 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Тема: Работа с тэгами форм
План:
1. Понятие и назначение форм в HTML-документе.
2. Работа с тэгами форм.
1. Понятие и назначение форм в HTML-документе.
Формы являются наиболее популярным способом интерактивного взаимодействия во Всемирной паутине.
Форма - это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
С помощью HTML можно создавать простые формы, предполагающие ответы типа "да" и "нет", можно разрабатывать сложные формы для заказов или для того, чтобы получить от своих читателей какие-либо комментарии и пожелания.
Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того как пользователь отправит информацию, она обрабатывается программой (скриптом), размещённой на сервере. Скрипт – это короткая программа, специально созданная для обработки каждой формы.
Формы HTML позволят получать информацию от читателей.
До сих пор мы обсуждали только способы вывода данных, теперь речь пойдет об обратном действии. Формы дают возможность запрашивать информацию в виде свободного текста, получать ответы типа "да/нет" или делать выбор из нескольких опций.
Формы можно использовать для разных целей. Простейшим примером является размещение формы, куда читатели, посетившие ваш сайт, смогут записать свои отзывы. В вашу форму могут заноситься мнения сторон дискуссионной группы, или вы, обеспечив меры безопасности для передачи личных данных, можете собирать заказы на ваше небольшое, но полезное изобретение. Круг применения форм HTML ограничивается только фантазией разработчика сайта.
2. Работа с тэгами форм.
В HTML существует три тэга для создания различного типа полей в форме:
<TEXTAREA>,
<SELECT>
<INPUT>.
Любое их количество может быть размещено в контейнере между тэгами <FORM> и </FORM>. Ниже дано их краткое описание:
| <TEXTAREA> | Определяет поле, в которое пользователь вводит многострочную текстовую информацию. |
| <SELECT> | Позволяет пользователю сделать выбор в окне с полосой прокрутки либо в раскрывающемся меню. |
| <INPUT> | Обеспечивает некоторые другие виды ввода информации: ввод одной строки текста, установку и сброс флажков (check boxes), выбор переключателя (radio buttons) и нажатие кнопки для отправки данных или очистки формы. |
Тэг <FORM>.
Этим тэгом начинается каждая форма. В нем нужно определить два атрибута, указывающих используемый скрипт и метод посылки данных:
| ACTION | Определяет URL, который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются но адресу страницы, на которой помещена форма. |
| METHOD | Указывает форме, как послать информацию соответствующей программе обработки (скрипту). Обычно он получает значение POST, тогда информация формы посылается отдельно от URL. Если указано значение GET, информация формы посылается вместе с URL. |
Например:
<FORM METHOD="POST" ACTION="/cgi-bin/comment script"> </FORM>
В этом примере дано указание браузеру отправить заполненную форму для обработки скриптом comment script, расположенным в каталоге cgi-bin вашего сервера, и использовать метод посылки POST.
На странице можно расположить любое число форм, однако нужно следить за тем, чтобы не поместить одну форму в другую. Если вы вставите тэг < FORM> в контейнер FORM, эта строка кода будет проигнорирована.
Тэг <ТЕХТАRЕА>.
Этот тэг предназначен для построения поля для ввода многострочной текстовой информации. При помощи атрибутов ROWS и COLS этого тэга можно построить поле любого размера. В контейнере TEXTAREA допускается размещать любой текст, который будет выведен в поле ввода по умолчанию.
Поле TEXTAREA удобно тем, что пользователь может ввести в него любое количество информации.
Тэг <TEXTAREA> имеет следующие атрибуты:
| NAME | Обязательный атрибут, определяющий название информации. |
| ROWS | Устанавливает высоту поля, т.е. число строк в нём. |
| COLS | Устанавливает ширину поля, т.е. длину строки. |
Между тэгами <TEXTAREA> и </TEX"'AREA> можно разместить текст, выводящийся в поле по умолчанию.
Хотя атрибуты ROWS и COLS не являются обязательными, они не имеют определенных значений по умолчанию (для каждого браузера эти значения различны), поэтому лучше их всегда указывать.
Тэг <SELECT>.
Этот тэг используется для создания всплывающего меню или списки опций с полосой прокрутки. Список опций и пункты меню располагаются внутри контейнера SELECT. Как и тэг <TEXTAREA>, тэг <SELECT> требует обязательного определения имени в атрибуте NAME. Количество опций указывается в атрибуте SIZE. Ниже перечислены атрибуты тэга <SELECT>:
| NAME | определяет название информации. |
| SIZE | определяет вертикальный размер окна для опций выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список опций. Если указано число больше единицы, то опции выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем возвращаются пустые поля. |
| MULTIPLE | Этот атрибут позволяет производить выбор сразу нескольких опций. |
Некоторые программы просмотра неправильно выводят окно с полосой прокрутки, если атрибут SIZE равен 2 или 3. В этом случае лучше воспользоваться всплывающим меню или кнопками-переключателями тэга <INPUT>.
Список опций включается в контейнер <SELECT> при помощи тэгов <OPTION>. Этот тэг имеет два атрибута:
| VALUE | указывает значение, возвращаемое программе обработки (скрипту) в случае выбора опции пользователем. |
| SELECTED | указывает на опцию, выделенную по умолчанию. Посмотрим на примере. Этот код вставляет в документ список под названием network, имеющий четыре опции: ethernet, token16, token4 и localtalk. |
<HTML>
<HEAD>
<TITLE>SELECT1.HTM</TITLE>
</HEAD>
<BODY>
Какой тип соединения используете:
<FORM>
<SELECT NAME="сеть">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>
Тэг <SELECT> можно использовать как дополнительное средство навигации. Для этого в него нужно включить список URL-адресов. После выбора одного из адресов и нажатия кнопки Отправить (Submit), скрипт, размещенный на вашем сервере или на машине читателя, загрузит требуемую страницу. Компания Microsoft использует этот метод для направления пользователей на различные международные сайты (см. http://www.microsoft.com).
Тэг <INPUT>.
Тэг <INPUT>, в отличие от <TEXTAREA> и <SELECT>, является одиночным тэгом. Он предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и для очистки формы (Reset, Clear).
Тэг <INPUT> располагает следующими атрибутами:
| NAMESIZE | Указывает размер поля ввода в символах. |
| MAXLENGHT | Определяет максимально возможное число символов, вводимых в поле. |
| VALUE | Для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке. |
| CHECKED | Устанавливает флажок или переключатель во включенное состояние по умолчанию. С другими типами тэгов <INPUT> не употребляется. |
| TYPE | Устанавливает тип поля ввода. |
Контрольные вопросы:
1. Что такое формы?
2. Какое назначение у формы на веб-странице?
3. Какие тэги используются при работе с формами? Каково их назначение?
4. Охарактеризуйте тэг <FORM>.
5. Охарактеризуйте тэг <TEXTAREA>.
6. Охарактеризуйте тэг <SELECT>.
7. Охарактеризуйте тэг <INPUT>.
Домашнее задание:
Из ранее подобранного материала по теме КПР, выбрать информацию, которую представить в виде форм.
[8], с. 141-145
Поиск по сайту: