Урок 30. Интерактивные формы на Веб-страницах

Что такое интерактив? Интер - внешний, актив - активность. То есть, интерактивными можно назвать те объекты, которые реагируют на внешнюю активность посетителей сайта.

Самое простое - вставка мультимедиа проигрывателя. Код для вставки можно скопировать на любом видео- или аудиохостинге. Так это выглядит на Ю-Тубе:

Можно добавлять код плеера и вручную. Для этого в html можно использовать тег <embed src="адрес медиафайла">. Этот тег вставляет плеер, проигрывающий медиафайл, указанный в параметре src.Вот как это выглядит:

Хостинг Юкоз позволяет использовать BB-коды, с помощью которых также можно вставить медиаплеер. 

Для этого нужно открыть редактор кода, выбрать ВВ-коды:

Затем в панели инструментов выбираем All Code

Открывается окно с кодами. Находим код

Вместо http://any_site.com/music.mp3 вставляем ссылку на аудиофайл. Получаем результат:

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

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

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

Текстовые поля.

Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.

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

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки br

Переключатели.

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

Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга «INPUT» со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения «учащийся», «студент» и «учитель». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.

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

Флажки создаются с помощью тэга «INPUT» со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="boxl", NAME="box2" и т. д.

Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно передается серверу.

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

Для реализации раскрывающегося списка используется контейнер select /select, в котором каждый элемент списка определяется тэгом opinion

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

Текстовая область.

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

Создается текстовая область с помощью тэга textarea с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.

Отправка данных из формы.

Отправка введенной в фор-му информации осуществляется с помощью щелчка по кнопке.

Кнопка создается с помощью тэга "INPUT". Атрибуту TYPE необходимо присвоить значение «submit», а атрибуту VALUE, который задает надпись на кнопке, присвоить значение «Отправить».

Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера "FORM" надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных: