Поделиться
Практическая работа по теме Создание интерактивных форм 8 кл.doc
Практическая работа по теме: «Создание интерактивных форм»
Формы представляют собой интерактивные элементы HTML, позволяющие разработчикам страниц взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них, заполняя её.
Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM> текст </FORM>.
· атрибут Method определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются про-токолом POST, который позволяет передавать большие объемы данных.
· атрибут Action определяет путь к сценарию CGI или адрес электронной почты.
· атрибут Еnctype определяет способ кодирования содержимого формы. Другими сло-вами, он сообщает браузеру о способе кодирования информации перед отсылкой сер-
веру. По умолчанию используется значение x-www-form-encoded.
Формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>
При помощи элемента <TEXTAREA> создается область для ввода и просмотра текста. Мо-жет использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:
· name — задаёт ключевое слово, по которому сценарий может обращаться к его со-держимому.
· Rows — задаёт высоту области в строках.
· Cols — задаёт ширину области в символах.
Задание 1. Создание области для ввода текста.
1. Откройте текстовый редактор Блокнот.
2. Создайте в нем следующий документ:
<HTML>
<BODY>
<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM> </BODY>
</HTML>
3. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Элемент <SELECT> может принимать форму раскрывающегося списка или меню элемен-тов. Имеет вложенный тэг <OPTION> и атрибуты:
· Name — задаёт имя.
· Size — задаёт максимальное количество элементов списка, одновременно отображае-мых на экране.
· Multiple — задаёт возможность одновременного выбора нескольких значений. Элемент <OPTIONS> задает возможные варианты выбора меню <SELECT> <OPTION value="n" selected>значение имеет атрибуты:
· selected — задаёт изначально выбранное слово.
· value — задаёт значение выбранного слова для сценария.
Задание 2. Создание раскрывающегося списка.
1. Добавьте в созданный вами HTML-документ следующий фрагмент: <P>Выберите:
<SELECT size=1>
<OPTION selected value=1> Первый </OPTION> <OPTION value=2>Второй </OPTION> <OPTION value=3>Третий </OPTION> <OPTION value=4>Четвертый </OPTION>
</SELECT>
<P>
2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer . Элемент <OPTGROUP> применяется для логической группировки элементов
<OPTION> внутри тэга <SELECT> имеет атрибут label. Элемент <INPUT> является базо-вым для всех элементов формы. Он используется для внедрения в форму кнопок, графиче-ских изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:
· TEXT текстовое поле, используется для ввода информации. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
o maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
o size. Задаёт максимально допустимую длину поля в символах. o value. Задаёт значение по умолчанию, которое можно менять.
· PASSWORD поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
o maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
o size. Задаёт максимально допустимую длину поля в символах.
o value. Задаёт значение по умолчанию, которое можно менять.
<INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
· CHECKBOX Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
o checked. Задаёт начальный статус флажка по умолчанию.
o value. Задаёт значение по умолчанию, которое можно менять.
<INPUT type="checkbox" name="send_mail" value="yes" checked>
· RADIO Переключатели во многом напоминают флажки, отличаясь лишь более широ-кими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент
INPUT
Visa <INPUT type="radio" name="payment_type" value="visa">
Mastercard <INPUT type="radio" name="payment_type" value="mastercard"> American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>
· SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сцена-рию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок
можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значе-ния.
<FORM method="get" или "post" action="mailto:name@domen.ru" > <INPUT type="submit" value="послать"></FORM>
· RESET Кнопка используется для восстановления значений, заданных по умолчанию.
Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.
<INPUT type="reset" value="очистка">
· IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки использует-ся изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
o 
src. Задаёт URL файла с
изображением.
o align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
o name. Задаёт имя карты, которое так же пересылается сценарию вместе с коор-динатами.
<INPUT type="image" src="knopka.gif">
Элемент <ISINDEX>Это самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.
Пример: <ISINDEX prompt=" строка для ввода критерия поиска"> Допустим что на теку-щей странице задан базовый URL при помощи элемента
<BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в по-
ле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет за-
прос для поисковой машины сервера в виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера
поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет
осуществлен.
Элемент <LABEL> применяется для альтернативного задания информации для управляю-щих полей формы. Поддерживает атрибут for, который связывает элемент <LABEL> с дру-гим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.
Задание 3. Создание управляющих полей.
1. Добавьте в созданный вами HTML-документ следующий фрагмент:
<P>
<FORM action="URL" method="post"> <LABEL for="firstname">Имя: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Фамилия: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">e-mail: </LABEL> <INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Мужской">Мужской<BR> <INPUT type="radio" name="sex" value="Женский">Женский<BR> <INPUT type="submit" value="Отправить"> <INPUT type="reset"> </FORM>
2. Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
