Задание № 6. Использование ниспадающего меню и списка наименований
Запустите программу Блокнот и осуществите ввод следующего HTML кода:
<HTML>
<HEAD>
<TITLE>Использование ниспадающего меню и списка наименований</TITLE>
<HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">
<FORM NAME="anketa" ACTION="/cgi-bin/anke1a.cgi" METHOD="get">
<H2>B каком городе вы живете?</Н2>
<SELECT NAME="city" SIZE="5">
<OPTION VALUE="Moscow”>Mocква
<OPTION VALUE="Sankt-peterburg”>Санкт-Петербург
<OPTION VALUE="Samara">Caмapa
<OPTION VALUE="Ryazan">Рязань
<OPTION VALUE="Krasnoyarsk">Красноярск
<OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре
<OPTION VALUE="Vladivostok">Владивосток
</SELECT>
<H2>Ваша профессия?</H2>
<SELECT NAME="profession">
<OPTION VALUE="Teacher">учитель
<OPTION VALUE="Technik">слесарь
<OPTION VALUE="Designer">дизайнер
<OPTION VALUE="Driver" SELECTED>водитель
<OPTION VALUE="Fireman">пoжapный
<OPTION VALUE="Actor">актёр
</SELECT>
<BR><BR>
<INPUT TYPE="submit" VALUE="Отправить">
<INPUT' TYPE="reset" VALUE ="Очистить">
</FORM>
</BODY>
</HTML>
Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и результатом должно послужить следующее:
Задание № 7. Итоговый пример по организации пользовательских форм
Вариант 1. Запустите программу Блокнот и осуществите ввод следующего HTML кода:
<HTML>
<HEAD>
<TITLE>Итоговый пример по организации пользовательских форм</TITLE>
|
|
|
<HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00DFF00" ALINK="#00FF00" VLINK="blue">
<H2 ALIGN="center">ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА</H2>
<FORM NAME="user_anketa" ACTION="/сgi-bin/anketa.cgi" METHOD="posf ENCTYPE="multiparf/form-data">
<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="3" ALIGN="center" WIDTH="98%">
<TR>
<TH BGCOLOR="#999999" данные</TH>
<TH BGCOLOR="#999999" WIDTH ="50%">Увлечения</Th>
</TR>
<TR>
<TD BGCOLOR="#EEEEEE" WIDTH="50%">
Ваше имя:<BR>
<INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="name"> <BR>
Ваш пароль:<BR>
<INPUT TYPE="password" SIZE="30" MAXLENGTH="35" NAME="password">
<BR>
Ваша фотография:<BR>
<INPUT TYPE="file" SIZE="18" NAME="photo">
</TD>
<TD BGCOLOR="#EEEEEE" WIDTH="50%">
<INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" СНЕСКЕD>Компьютеры и Интернет
<BR>
<INPUT TYPE="checkbox" NAME="hobby" VALUE="art">Литература и искусство
<BR>
<INPUT TYPE="checkbox" NAME="hobby" VALUE ="music">Музыка и танцы
<BR>
<INPUT TYPE="checkbox" NAME="hobby" VALUE ="auto">Автомобили
<BR>
<INPUT TYPE="checkbox" NAME="hobby" VALUE="sport">Cпopт и активный отдых
</TD>
</TR>
<TR>
<TH BGCOLOR="#999999" жительства</TН>
|
|
|
<TH BGCOLOR="#999999'' Комментарии</TН>
</TR>
<TR>
<TD BGCOLOR="#EEEEEE"
<SELECT NAME="city" SIZE="5">
<OPTION VALUE="Moscow”>Mocква
<OPTION VALUE="Spb”>Санкт-Петербург
<OPTION VALUE="Samara">Caмapa
<OPTION VALUE="Ryazan">Рязань
<OPTION VALUE="Krasnoyarsk">Красноярск
<OPTION VALUE="Komsomolsk">Комсомольск-на-Амуре
<OPTION VALUE="Vladivostok">Владивосток
</SELECT>
<BR><BR>
<SELECT NAME="country">
<OPTION VALUE="Russia">Россия
<OPTION VALUE="England">Англия
<OPTION VALUE="USA">США
<OPTION VALUE="Germany">Германия
<OPTION VALUE="France"> Франция
</SELECT>
</TD>
<TD BGCOLOR="EEEEEE"
<TEXTAREA COLS="25" ROWS="5" NAME="comments">
</TEXTAREA>
<BR>
<INPUT TYPE="radio" NAME="site" VALUE="first" CHECKED> Я впервые на этом сайте
<BR>
<INPUT TYPE="radio" NAME="site" VALUE="not first" Я тут не в первый раз
</ТD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="center" BGCOLOR="#999900">
<INPUT TYPE="submit" VALUE="Отправить">
<INPUT TYPE="reset" VALUE="Очистить">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и результатом должно послужить следующее:
|
|
|
▲ В данном примере были использованы следующие элементы пользовательских форм:
текстовая строка;
поле для ввода пароля;
поле выбора локального файла для загрузки на Web-cepвep;
опция выбора нескольких вариантов данных;
опция переключения между несколькими вариантами данных;
текстовое поле;
ниспадающее меню;
список наименований;
кнопка отправления данных;
кнопка сброса данных.
Вариант 2. В созданный код добавьте следующие опции в соответствующие группы таблицы:
· дата рождения (текстовая строка);
· подтверждение пароля (поле для ввода пароля);
· дополнительно перечень 5 городов проживания (ниспадающее меню);
· дополнительно 3 увлечения (опция выбора нескольких вариантов данных);
· дополнительно кнопку Отменить (аналогично кнопке Очистить)(кнопка сброса данных).
Дата добавления: 2018-11-24; просмотров: 282; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!