Практическая работа №7 по теме: «Создание форм»
Цель: научить создавать различные элементы форм; развитие познавательного интереса; воспитание аккуратности, бережного отношения к технике.
Формы представляют собой интерактивные элементы HTML, позволяющие разработчикам страниц взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её.
Форма создается при помощи различных тэгов и атрибутов, заключенных в пару
<FORM> текст </FORM>:
- Method атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
- Action атрибут определяет путь к сценарию CGI или адрес электронной почты.
- enctype атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.
формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>
Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:
- name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
- rows. Задаёт высоту области в строках.
- cols. Задаёт ширину области в символах.
Задание 1. Создание области для ввода текста.
- Откройте текстовый редактор Блокнот
- Создайте в нем следующий документ:
<HTML>
<BODY>
<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM>
</BODY>
</HTML>
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:
- name. Задаёт имя.
- size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
- multiple. Задаёт возможность одновременного выбора нескольких значений.
Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT>
<OPTION value="n" selected>значение имеет атрибуты:
- selected. Задаёт изначально выбранное слово.
- value. Задаёт значение выбранного слова для сценария.
Задание 2. Создание раскрывающегося списка.
- Добавьте в созданный вами HTML-документ следующий фрагмент:
<P>Выберите:
<SELECT size=1>
<OPTION selected value=1> Первый </OPTION>
<OPTION value=2>Второй </OPTION>
<OPTION value=3>Третий </OPTION>
<OPTION value=4>Четвертый </OPTION>
</SELECT>
<P>
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:
Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:
- TEXT текстовое поле, используется для ввода информации. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
- maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
- size. Задаёт максимально допустимую длину поля в символах.
- value. Задаёт значение по умолчанию, которое можно менять.
- PASSWORD поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
- maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
- size. Задаёт максимально допустимую длину поля в символах.
- value. Задаёт значение по умолчанию, которое можно менять.
<INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
- CHECKBOX Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
- checked. Задаёт начальный статус флажка по умолчанию.
- 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, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
- src. Задаёт URL файла с изображением.
- align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
- 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. Создание управляющих полей.
- Добавьте в созданный вами 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>
- Сохраните изменения и просмотрите их с помощью браузера Internet Explorer .
Задание 4. Самостоятельная творческая работа над своим сайтом.
Подведение итогов
- Сделайте в тетради конспект теоретического материала.
- Ответьте на следующие вопросы:
1.Что такое формы? Для чего они используются?
2.Какие элементы форм вы знаете? Как их создать?
3.Какие элементы форм чаще всего встречаются на сайтах (и на каких)?
Домашнее задание:
- Выучите конспект.