Практическая работа по теме: «Создание интерактивных форм»
Оценка 4.9

Практическая работа по теме: «Создание интерактивных форм»

Оценка 4.9
Карточки-задания
doc
информатика
8 кл
10.05.2020
Практическая работа по теме: «Создание интерактивных форм»
Формы представляют собой интерактивные элементы HTML, позволяющие разработчикам страниц взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них, заполняя её. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару текст . • атрибут Method определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются про-токолом POST, который позволяет передавать большие объемы данных. • атрибут Action определяет путь к сценарию CGI или адрес электронной почты. • атрибут Еnctype определяет способ кодирования содержимого формы. Другими сло-вами, он сообщает браузеру о способе кодирования информации перед отсылкой сер
Практическая работа по теме Создание интерактивных форм 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. Задаёт максимально допустимую длину вписываемого значения в символах.

 

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

Практическая работа по теме: «Создание интерактивных форм»

Практическая работа по теме: «Создание интерактивных форм»

OPTION value=3> Третий </OPTION> <OPTION value=4>

OPTION value=3> Третий </OPTION> <OPTION value=4>

SELECT> <P> 2. Сохраните изменения и просмотрите их с помощью браузера

SELECT> <P> 2. Сохраните изменения и просмотрите их с помощью браузера

Задаёт URL файла с изображением

Задаёт URL файла с изображением
Скачать файл