Задание 1. Набрать все предложенные выше коды и проверить их отображение в браузере.
Практическая работа № 9
ТЕМА: Формы HTML
Цель работы: изучить работу с формами.
Оборудование: персональный компьютер, Windows XP.
Теоретическая часть:
При помощи форм вы можете ввести на свои страницы: Гостевую Книгу, Бланк Заказа (для интернет-магазина или сайта компании), Опрос, Форму Для Ответа и многое другое.
Базовая конструкция форм в html выглядит так:
| <FORM> начало формы <INPUT> запрашивает информацию одним или несколькими способами <INPUT> создает поле формы (кнопку, поле ввода и т.п.), вы можете ввести столько полей, сколько вам угодно </FORM> конец формы |
Напишите в Блокноте обязательные теги для введения формы в документ.
| <HTML> <HEAD> <TITLE> Джо самый умный парень, я в этом даже не сомневаюсь! </TITLE> </HEAD> <BODY> <FORM> </FORM> </BODY> </HTML> |
Теперь мы должны указать браузеру, куда отсылать данные из формы, когда наш посетитель заполнит ее и нажмет кнопку "отправить".
Здесь мы можем сделать следующее: 1 - отослать данные к cgi-скрипту для обработки
Что касается второго, то для того, чтобы отослать данные из формы к вам на
e-mail, надо ввести в тег <FORM> следующие атрибуты:
| <HTML> <HEAD> <TITLE> Джо самый умный парень, я в этом даже не сомневаюсь! </TITLE> </HEAD> <BODY> <FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="text/plain" </FORM> </BODY> </HTML> |
Эта строчка очень важна. Единственное, что вы можете изменить здесь - это адрес электронной почты на ваш (xxx@xxx.xxx).
|
|
|
С этого момента я не буду приводить код нашего документа полностью. Однако, вы должны понимать, что приводимый далее код вы должны вставлять между <FORM> и </FORM>.
Итак, наиболее распространенный тип (TYPE) поля <INPUT> это текстовой (TEXT).
<INPUT TYPE=TEXT>
Начало формы
Конец формы
Вот такое оно поле для ввода текста (одной строки текста).
|
Вся информация, которую мы вводим, должна иметь имя (NAME).
| <INPUT TYPE=TEXT NAME="ADDRESS">
Начало формы
Конец формы
Визуально это никак не отображается.
|
Когда ваш посетитель напечатает в этом поле свой адрес (например, 1313 Улица Пересмешника), то он становится выводимым значением, которое будет связано с ADDRESS (адресом), и в результате после расшифровки данных почтовой программой или расшифровщиком данных формы вы получите: "АДРЕС (ADDRESS)=1313 Улица Пересмешника". Мы можем сами ввести значение (VALUE) для поля формы:
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
Начало формы
Конец формы
|
Это значит, что ADDRESS будет связан со значением "44 Cherry St", пока пользователь (ваш посетитель) не изменить его на свое.
Кстати, кавычки ставьте обязательно, не пропускайте их, не забывайте, чтобы форма корректно работала и отображалась.
Мы также можем задать свой размер для текстового поля:
|
|
|
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE="10">
Начало формы
Конец формы
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE="20">
Начало формы
Конец формы
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE="30">
|
Если мы хотим, то мы можем задать максимальное количество символов, которое ваш посетитель может ввести в текстовое поле.
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE="30" MAXLENGTH="10">
Начало формы
Конец формы
Попробуйте напечатать в этом поле больше десяти символов - у вас ничего не получится! :)
|
Очень схоже с текстовым полем (TYPE=TEXT) поле для ввода пароля (TYPE=PASSWORD). Оно фактически такое же, только не отображает вводимые вами символы, а маркирует их звездочками (***). Броузер перешлет вам то, что вводил пользователь (ввиде нормальных символов), просто окружающим не будет видно, что вводил ваш посетитель в поле формы
| <INPUT TYPE=PASSWORD>
Начало формы
Конец формы
Попробуйте напечатать в этом поле что-нибудь.
|
Итак, вспомним, что каждое поле (INPUT) должно иметь имя (NAME):
|
|
|
| <INPUT TYPE=PASSWORD NAME="USER PASSWORD">
Начало формы
Конец формы
|
SIZE, VALUE, и MAXLENGTH - эти атрибуты также работают с полем для ввода пароля, как и с текстовым полем.
Далее мы с вами научимся создавать "переключатели" (Radio Buttons) и "флажки" (Check Boxes). Переключатели позволяют пользователю выбрать одну из нескольких опций (параметров). Флажки позволяют выбрать пользователю одну, несколько или все опции.
<INPUT TYPE=RADIO NAME="BEST FRIEND">
Начало формы
Конец формы
Это переключатель.
|
Добавим еще парочку переключателей.
| <INPUT TYPE=RADIO NAME="BEST FRIEND"><BR> Начало формы
Конец формы | ||||
Заметьте, все переключатели имеют одно и тоже имя (NAME). Почему? Это вам станет ясно чуть позднее.
Каждому переключателю должно быть задано свое собственное значение
| <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"><BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"><P>
Начало формы
Конец формы
|
Теперь зададим описание каждому переключателю:
|
|
|
| <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed"> Эд Холлеран<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Рик Вайнберг<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Том Студд<P>
Начало формы
Эд Холлеран Рик Вайнберг Том Студд
Конец формы
|
Вы можете видоизменить описания любыми знакомыми вам html-тегами (которые мы применяем к тексту, т.е. изменить цвет описаний, размер, шрифт и т.д.).. Чтобы было понятнее пользователю: мы можем приписать какой-либо вопрос к форме. Кроме того при помощи атрибута CHECKED мы можем выбрать, какая опция будет выбрана по умолчанию (пока пользователь не выберет ту опцию, которую считает нужной).
Кто ваш лучший друг?<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Ed" CHECKED> Эд Холлеран<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Rick"> Рик Вайнберг<BR> <INPUT TYPE=RADIO NAME="BEST FRIEND" VALUE="Tom"> Том Студд<P>
Начало формы
Кто ваш лучший друг?  Эд Холлеран Рик Вайнберг Том Студд
Конец формы
|
Пользователь при данном типе полей формы (переключателей) может выбрать только одну опцию. Выбор вашего посетителя будет переслан вам как: BEST FRIEND=Ed (или другой молодой человек, смотря кого выберут).
Теперь мы с вами будем учиться создавать форму с "флажками". Создание такой формы аналогично созданию формы с "переключателями".
<INPUT TYPE=CHECKBOX NAME="Ed">
Начало формы
Конец формы
Щелкните, чтобы выбрать флажок, еще раз щелкните - чтобы убрать выделение.
|
Добавим еще несколько флажков. Каждому зададим свое имя (NAME). Если хотите, то вы можете разнести флажки по разным строкам.
| <INPUT TYPE=CHECKBOX NAME="Ed"><BR> <INPUT TYPE=CHECKBOX NAME="Rick"><BR> <INPUT TYPE=CHECKBOX NAME="Tom"><BR> <INPUT TYPE=CHECKBOX NAME="BM"><P>
Начало формы
Конец формы
Пощелкайте по флажкам, вы можете выбрать сразу несколько из них.
|
Всем флажкам должно быть задано одинаковое значение:
| <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"><BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"><P>
Начало формы
Конец формы
|
Итак заметьте для "флажков" имя (NAME) разное, а значение (VALUE) для всех одинаковое, а для "переключателей" наооборот (NAME - одинаковое, а VALUE разное). Напишем к каждому флажку описание.
| <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YES"> Эд Холлеран<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Рик Вайнберг<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES"> Том Студд<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Бургермастер Мастербургер<P>
Начало формы
Эд Холлеран Рик Вайнберг Том Студд Бургермастер Мастербургер
Конец формы
|
И наконец, мы добавляем ваш вопрос к форме. А также можем отметить какие флажки будут выбраны по умолчанию (пока ваш посетитель не выберет другие), но это на ваше усмотрение, конечно.
Кто из этих парней ваш друг?<BR> <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YES" CHECKED> Эд Холлеран<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YES"> Рик Вайнберг<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YES" CHECKED> Том Студд<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YES"> Бургермастер Мастербургер<P>
Начало формы
Кто из этих парней ваш друг?  Эд Холлеран Рик Вайнберг Том Студд Бургермастер Мастербургер
Конец формы
|
Ваш посетитель может выбрать одно, второе, или ничего, или сразу все. Выбор вашего посетителя вы получите в следующем виде:
Ed=YES
Tom=YES
Если посетитель ничего не выберет, то ничего вам и не придет по почте ( мы создаем форму, результаты который отправляются на Е-мэйл).
Вам может прийти на ум вопрос, а что если вы вдруг захотите узнать три разные вещи об этих парнях (задать три вопроса о них вашим посетителям). Что тогда? Хорошо, мистер Умные Штанишки, я сделаю это для вас, я вам покажу, что тогда...
Порядок выполнения работы:
Задание 1. Набрать все предложенные выше коды и проверить их отображение в браузере.
Дата добавления: 2019-02-12; просмотров: 118; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!