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

Структура HTML-кода Web-страниц и их создание

Из чего состоит HTML-код?

Для создания Web-страниц служит язык разметки гипертекстовых документов HTML (Hyper Text Markup Language). Основным элементом разметки в языке HTML является тэг (указание, как обрабатывать часть текста).

Тэги бывают:

  • одиночные
  • парные (данные тэги содержат открывающий и закрывающий тэги, такую пару называют контейнером)

Общая структура Web-страницы выглядит так:
<HTML> 'начало работы с кодом'

<HEAD> 'начало работы с заголовком'

<TITLE> Заголовок страницы </TITLE> 'название страницы'

<META ="test/html; charset=windows-1251'"

http-equiv="content-type"> 'одиночные информационные тэги'

</HEAD> 'конец работы с заголовком'

<BODY>

... 'содержание страницы'

</BODY>

</HTML> 'конец работы с кодом'

Что используется для создания интерактивных Web-страниц?

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

Переключатели. Переключатели используют, когда необходимо выбрать один единственный вариант из нескольких предложенных Они используются для выяснения, к какой группе пользователь себя относит. Для этого необходимо создать группу переключателей. Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE="radio". За счет атрибута VALUE данные передаются серверу.

Флажки. Флажки используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажки создаются в тэге <INPUT> со значением атрибута TYPE="checkbox".

Поля списков. Поле со списком, называемое еще ниспадающим меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Для реализации раскрывающегося списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка определяется тэгом <OPTION>.

Тестовая область. Поле <TEXTAREA> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <INPUT> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Между тегами <TEXTAREA> и </TEXTAREA> можно поместить любой текст, который будет отображаться внутри поля.

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

Литература

  • http://htmlbook.ru/
  • Учебник по информатике. Угринович, Н. Д. Информатика и ИКТ. Профильный уровень 11 класс – М.: БИНОМ. Лаборатория знаний.