5.7.7 Формы на Web-страницах. - презентация

1 5.7.7 Формы на Web-страницах

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

3 Создать в Блокноте файл anketa.htm и добавить HTML-код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере: Пожалуйста, введите ваше имя:

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

5 . Добавить HTML-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере: Укажите, к какой группе пользователей вы себя от­носите: УЧАЩИЙСЯ СТУДЕНТ УЧИТЕЛЬ

6 Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", " " и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу. Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.

7 Добавить HTML-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере: Посмотрет страницу в браузере Internet Explorer Internet Explorer Netscape Navigator Opera Neo Planet

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

9 Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере: Какую еще информацию вы хотели бы видеть на нашем сайте?

10 Отправка данных из формы. Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга. Для создания кнопки, которая отправляет информацию, атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, значение "Отправить". Для создания кнопки, которая производит очистку формы, атрибуту TYPE необходимо присвоить значение "re­set", а атрибуту VALUE значение "Очистить".

11 Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере: