'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

Создать в Блокноте файл anketa.htm и добавить HTML-код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере: <FORM> Пожалуйста, введите ваше имя: <BR> <INPUT TYPE="text" NAME="name" SIZE=30> <BR> E-mail: <BR> <INPUT TYPE="text" NAME="e-mail" SIZE=30> <BR> </FORM>


Слайд 3

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


Слайд 4

. Добавить HTML-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере: Укажите, к какой группе пользователей вы себя от­носите:<BR> <INPUT TYPE="radio" NAME="group" VALUE= "schoolboy">УЧАЩИЙСЯ<BR> <INPUT TYPE="radio" NAME="group" VALUE= "student">СТУДЕНТ<BR> <INPUT TYPE="radio" NAME="group" VALUE= "teacher">УЧИТЕЛЬ<br>


Слайд 5

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


Слайд 6

Добавить HTML-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере: Посмотрет страницу в браузере <SELECT NAME="browsers"> <OPTION SELECTED> Internet Explorer Internet Explorer <OPTION> Netscape Navigator <OPTION> Opera <OPTION> Neo Planet </SELECT>


Слайд 7

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


Слайд 8

Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере: Какую еще информацию вы хотели бы видеть на нашем сайте? <BR> <TEXTAREA NAME="resume" ROWS=4 COLS=30> </TEXTAREA <BR>


Слайд 9

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


Слайд 10

Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере: <INPUT TYPE="submit" VALUE="OTПРАBИTb"> <INPUT TYPE="reset" VALUE="ОЧИСТИТЬ">


×

HTML:





Ссылка: