Интерактивные формы на web страницах конспект

Обновлено: 06.07.2024

Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

нумерованные списки, когда элементы списка идентифицируются с помощью чисел;

маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);

списки определений, позволяющие составлять перечни определений в так называемой словарной форме.

Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.

На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.

Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

Рис. 6.30. Web-страница "Программы", которая содержит нумерованный список с вложенным маркированным списком

Список определений. Список определений располагается внутри контейнера / . Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами и определений, которые следуют за одинарными тэгами .

Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):

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

Рис. 6.31. Web-страница "Словарь", содержащая словарь терминов

1. Какие тэги используются для создания нумерованных списков? Маркированных списков?

6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.

6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.

Интерактивные формы на Web-страницах

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

В данный момент вы не можете посмотреть или раздать видеоурок ученикам

Чтобы получить доступ к этому и другим видеоурокам комплекта, вам нужно добавить его в личный кабинет, приобретя в каталоге.

Получите невероятные возможности

Конспект урока "Списки и интерактивные формы на Web-страницах"

Нумерованные списки - это списки, в которых элементы списка идентифицируются с помощью чисел. Например, такой список, как Дни недели. В него входят такие элементы, как Понедельник - он первый, далее вторник - он второй, среда - третий, четверг - четвертый, пятница - пятый, суббота - шестой и воскресенье - седьмой. Наш список состоит из 7 элементов, каждый из которых получил свой номер.

Ну а что касается нумерации, то по умолчанию она задается арабскими цифрами. Но она может быть и другой, например, в качестве нумерующих элементов могут выступать римские числа, латинские буквы и т.д. Для этого с помощью атрибута TYPE тэга можно задавать нужный нам тип нумерации. Так для нумерации с помощью прописных римских чисел используют значение "I", для строчных букв используют значение "а".

Маркированные списки - это списки, в которых элементы списка идентифицируются с помощью специальных символов (маркеров).

В отличие от нумерованного списка, маркированный располагается внутри контейнера . Ну, а каждый элемент, как и в нумерованном, списка определяется тэгом . Что касается вида маркера, то он задается с помощью атрибута TYPE тэга . Маркер может быть представлен в виде диска, квадрата, окружности.

Заметим, что нумерованные и маркированные списки в большинстве браузеров выделяются небольшим отступом.

Итак, мы с вами разобрали только два вида списков: нумерованный и маркированный, остался у нас последний. Это список определений. Данный список позволяет составлять перечни определений в словарной форме.

Этот список находится в контейнере . Внутри этого контейнера с помощью одинарного тега записываются термины, а определения, которые следуют за каждым термином, с помощь одинарного тэга .

Давайте Web-страницу "Словарь" мы представим в виде словаря двух терминов:

Для этого в нашей исходной структуре мы напишем заглавие страницы. Это словарь. Далее в контейнере body, где размещается содержимое страницы, разместим наш список с помощью контейнера . Далее запишем термин HTML с помощью одиночного тега и его определение с помощью тега .

Далее аналогичные действия произведем и с термином CSS.

Если же нам нужно создать многоструктурный список, то существует такая возможность, как создавать вложенные списки, и при этом каждый список может отличаться от основного.

Если же мы вспомним процесс регистрирования почтового ящика, то там нас просили заполнить поля, такие как Имя, фамилия, Дата рождения, Пол, Город и т.д. Т.е. мы заполняли определенную форму, с помощью которой организовывался диалог между пользователем, т.е. нами, и сервером.

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

Такая форма создается с помощью тега .

Первое с чего мы начнем - это текстовые поля. Как вы уже знаете, текстовые поля предназначены для ввода текстовой информации.

Текстовое поле создается с помощью одиночного тега . Этот тег имеет несколько атрибутов: это атрибут TYPE со значением "text", атрибут NAME, который является обязательным и служит для идентификации полученной информации, и атрибута SIZE. Этот атрибут задает длину поля в символах, т.е. его значением является число.

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

Далее рассмотрим такую форму, как переключатели. Их еще называют радиокнопками. Они чаще всего используются, если пользователю нужно выбрать один из предложенных вариантов.

Что касается атрибута VALUE, то ему присваивается значение вариантов, один из которых нужно выбрать. Значение этого атрибута должно быть уникальным для каждой радиокнопки, так как при ее выборе именно оно передается серверу.

Теперь разберемся с флажками. Их удобно создавать, если посетителю необходимо из предложенного списка выбрать несколько вариантов.

Следующий у нас на очереди это раскрывающийся список. Для его реализации используют контейнер . В нем каждый элемент списка определяется тегом . А с помощью атрибута SELECTED задается элемент по умолчанию.

А теперь обратим внимание на такую форму, как текстовая область, которая может содержать линейку прокрутки.

Текстовая область создается с помощью тега с такими атрибутами как NAME, ROWS, COLS. Атрибут NAME - задает имя области, атрибут ROWS - задает количество строк, а атрибут COLS - количество столбцов области.

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

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

Поля формы создаются с помощью тэгов , и

На сервер передается содержимое поля, если пользователь не изменял текст, то resume=Текст по умолчанию.

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

Кнопка отправки данных формы реализуется с помощью тэга:

Кнопка очистки данных формы реализуется с помощью тэга:

Во FrontPage форма создается автоматически при добавлении на Web-страницу любого элемента формы. На странице редактора область формы выделяется пунктирным прямоугольником, внутри которого появляется первый элемент.

Добавляются элементы формы на страницу или с помощью команды меню [Вставка-Поле формы. ], или специальными кнопками на Панели инструментов полей формы:

Рис. 8.1. Панель инструментов полей формы

Для каждого размещенного на странице элемента формы необходимо настроить его свойства (задать значения атрибутам NAME, VALUE и др.). Для этого необходимо выделить элемент формы и ввести команду [Правка-Свойства поля формы] с помощью меню приложения или контекстного меню. В результате откроется специальное окно свойств элемента, в котором необходимо произвести установки значений.

Отправка и обработка данных из формы. После размещения на форме полей различных типов следует определить способ обработки введенных пользователем данных. Для этого необходимо присвоить значения атрибутам ACTION и METOD тэга

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

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

После того, как посетитель заполняет предложенную ему форму (например, комментируя Ваш сайт или оформляя заказ в Вашем Internet-магазине), данные, введенные им в поля формы, отправляются серверной программе для последующей обработки.

1. Создание веб формы

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

Атрибуты тега :

action – обязательный атрибут, указывается URL, по которому следует передать введенную в форму информацию;
method – атрибут, указывающий каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику.

Задание 1

Откройте справочник Sprav_HTML.doc и ознакомьтесь с атрибутами тега и правилами их назначения.

2. Описание элементов веб формы

Существует три типа элементов формы: , , .

2.1. Элемент формы

Этот элемент служит для создания многострочного поля ввода (рис. 1).

Рис. 1. Пример использования элемента

У элемента имеются несколько атрибутов:

name – обязательный атрибут, определяющий имя, под которым содержимое поля будет передано обработчику;
rows – атрибут, устанавливающий высоту окна в строках;
cols – атрибут, устанавливающий ширину окна в символах.

Внешний вид формы, содержащей элемент

, приведен на рис. 1.

Многострочные поля ввода можно использовать, например, для ввода комментариев посетителя.

Задание 2

Реализуйте форму, изображенную на рис. 1.
Сохраните файл в папке Lab_5 под именем forms.htm

2.2. Элемент формы

Этот элемент служит для организации разворачивающихся меню и полей списка (рис. 2).

Рис. 2. Пример раскрывающегося списка

У элемента имеются следующие атрибуты:

name – обязательный, определяющий имя переменной, которую генерирует меню;
multiple – устанавливает режим выбора нескольких значений из списка;
size – устанавливает число строк, отображаемых одновременно.

Между тегами и находятся значения, которые может выбирать пользователь. Они перечислены в теге . Тег – одиночный элемент, не требующий закрывающего тега.

Тег определяет элемент меню. У тега имеются следующие атрибуты:

value – обязательный, устанавливающий значение, которое будет передано обработчику, если выбран этот элемент меню;
selected – показывает, что данный элемент отображается выбранным.

HTML-код списка выглядит так (рисунок 3):

Внешний вид этой формы показан на рис. 2.

Задание 3

В файле forms.html реализуйте код, предложенный на рисунке 3. Выясните, как влияют на вид веб формы атрибуты size и multiple тега и атрибут selected тега .

2.3. Элемент формы

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

У тега имеются следующие атрибуты: name, size, maxlength, value, checked, type.

Задание 4

Откройте справочник Srav_html.doc и ознакомьтесь с атрибутами тега и правилами их назначения.

Типы элементов

Основные типы элементов , определяемые атрибутом type:

Рис. 4. Пример использования элементов radio

Используется в тех случаях, когда необходимо выбрать только один из родственных элементов. Это значение атрибута type используется с атрибутами name (обязателен), value (определяет значение, возвращаемое серверу в случае выбора данной кнопки), checked (показывает, что кнопка выбрана по умолчанию). Присвоив одинаковые значения атрибуту name разных переключателей, их можно объединить в группу. В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:

9600 бит/с
14400 бит/с
28800 >бит/с

В данном примере определена группа из трех радиокнопок, подписанных, соответственно: 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

Задание 5

В файл forms.html добавьте веб форму, запрашивающую сведения о возрасте посетителя. Форма должна выглядеть как на рис. 4.

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

type="checkbox" – кнопка с независимой фиксацией. Используется в тех случаях, когда одновременно можно выбрать несколько опций. Атрибуты: name(обязателен),value,checked (рис. 5).

Рис. 5. Пример использования элементов checkbox

Если на Ваш сайт зайдет пользователь, желающий купить проект, то, прежде чем оформить его заказ, следует уточнить, какие проекты его интересуют. Причем, возможно, он еще не решил, какой проект ему нужен, и готов рассмотреть несколько вариантов.

Чтобы решить эту задачу, нужно создать форму, использующую элементы checkbox, так как в этом случае, в отличие от использования элементов radio, можно выбрать несколько вариантов.

Задание 6

В файле forms.html создайте веб форму как на рис. 5.

type="submit" – командная кнопка, которая отправляет на сервер все введенные данные. Данные отправляются по адресу, указанному в атрибуте action тега . Надпись на кнопке можно задать путем введения атрибута value="Надпись", например:

type="reset" – определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. В этом случае данные обработчику не передаются, поэтому кнопка может и не иметь атрибута name. Надпись на кнопке задается при помощи атрибута value="Надпись".

Задание 7

В файле forms.html добавьте в конец каждой формы две кнопки: submit и reset с соответствующими надписями. Проверьте действие кнопки reset.
По нажатию кнопки submit данные, введенные пользователем, отправляются соответствующей программе для обработки. Имя этой программы и путь к ней указываются в атрибуте action тега . Вы пока не умеете писать такие программы но, чтобы проверить работу кнопки submit, Вы можете в качестве значения атрибута action указать адрес любой Web-страницы или картинки.
Сохраните созданную страницу. Результат для одной из веб форм на рис. 6

Рис. 6. Пример использования элементов submit и reset

type="text" – определяет окно для ввода строки текста. Это значение атрибута type можно использовать с атрибутами name (обязателен), value, size и maxlength.

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

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

Задание 8

В файле forms.html создайте веб форму, которая выглядит как на рис. 7. Поля, обязательные для заполнения, отметьте звездочками.

Рис. 7. Пример использования элементов text

type="password" – определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).
type="button" – не выполняет никаких действий при нажатии на кнопку, если к ней не прикреплена программа. Это значение атрибута type используется с атрибутами name (имя кнопки), value (надпись на кнопке), onclick (для указания имени программы, которая будет выполняться при нажатии на эту кнопку).

Создание ссылки для отправки письма на электронный адрес

Рис. 8. Ссылка для отправки письма на электронный адрес

Рис. 9. Загрузка почтовой программы

Контрольное задание

Проекты таунхаусов и блокированных домов,
Проекты домов на две семьи,
Проекты узких домов,
Проекты бань.

Проекты кирпичных домов,
Проекты домов из газобетона и пенобетона,
Проекты домов из бруса и бревна,
Проекты каркасных домов.

3. При нажатии на кнопку Очистить данные, введенные в форму, должны исчезать.

Читайте также: