Отправление файлов на сервер
Формы можно также использовать для отправки файлов на сервер. Чудес, однако, не бывает, и поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!
Все, что требуется от формы, это:
a. Указать ENCTYPE="multipart/form-data" в тэге FORM
b. Указать METHOD="POST" в тэге FORM
c. Использовать <INPUT TYPE="FILE" ...> для ввода имени файла.
Например:
| <FORM ACTION="myURL" ENCTYPE="multipart/form-data" METHOD="POST">Выберите файл:<BR><INPUT NAME="fn" TYPE="FILE"><P><INPUT TYPE="SUBMIT" VALUE="Выслать"></FORM> |  |
Элементы диалога (кнопки, области для ввода текста).
<HTML>
<HEAD><TITLE>Формы</TITLE></HEAD>
<BODY bgcolor="beige">
<FORM>
<CENTER><FONT size=6>Элементы диалога</font></center>
<HR color="blue">
<h3>Элементы INPUT</h3>
<H3> Ввод текстовой строки </h3>
<INPUT type="text" size=50>
<H3> Ввод пароля </h3>
<INPUT type="password">
<H3> Флажки </h3>
<INPUT type="checkbox" name="F001" checked>
<INPUT type="checkbox" name="F001" checked>
<H3> Переключатели </h3>
<INPUT type="radio" name="S001" vаluе="Первый">
<INPUT type="radio" name="S001" value="Второй">
<INPUT type="radio" name="S001" value="Третий" checked>
<H3> Кнопка подтверждения ввода </h3>
<INPUT type="submit" value="Подтверждение">
<H3> Кнопка с изображением </h3>
<INPUT type="image" src="lycos.gif">
<H3> Кнопка очистки формы </h3>
<INPUT type="reset" value="0чистка">
<H3> Файл </h3>
<INPUT type="file" name="photo" accept="image/*">
<HR color="blue">
<h3>Элемент SELECT</h3>
<SELECT multiple>
<OPTION value=а>Первый
<OPTION value=Ь>Второй
<OPTION value=с>Третий
<OPTION value=d>Четвертый
</select>
<HR color="blue">
<h3>Элемент TEXTAREA</h3>
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea>
<HR color="blue">
</FORM>
</BODY>
</HTML>
Индивидуальное задание №2. «Создание формы»
Вариант 001
Создать форму для ввода информации о человеке. Должна вводиться следующая информация:
| Фамилия | Простой текстовый ввод |
| Имя | Простой текстовый ввод |
| Отчество | Простой текстовый ввод |
| Возраст | Выбор из вариантов "до 7", "от 7 до 17", "от 17 до 33", "от 33 до 65" и "65 и старше" |
| Пол | Должна быть "радио-кнопка" |
| Образование | Должен быть "чек-бокс" |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 002
Создать форму для ввода информации о человеке. Должна вводиться следующая информация:
| ФИО | Простой текстовый ввод |
| Год рождения | Вводится текстом. Запретить ввод более чем четырех символов. |
| Пол | Должна быть "радио-кнопка" |
| Гражданство | Выбор из списка государств |
| Интересы | Должен быть "чек-бокс" |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 003
Создать форму для ввода адреса. Должна вводиться следующая информация:
| Страна | Выбор из списка. По умолчанию - Украина |
| Почтовый индекс | Простой текстовый ввод, не более шести символов |
| Город | Простой текстовый ввод |
| Улица номер дома | Простой текстовый ввод |
| Указание на то, что адрес служебный/домашний | Должна быть "радио-кнопка" |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 004
Создать форму для ввода заказа на компьютер. Должна вводиться следующая информация:
| Процессор | Выбор из списка. По умолчанию Intel Pentium IV |
| Память | Простой текстовый ввод |
| Необходим сетевой адаптер | Должна быть "радио-кнопка" |
| Необходим модем | Должен быть "чек-бокс" |
| Дополнительные требования | Многостроковое поле ввода |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 005
Создать форму для заказа товаров. Форма должна предлагать заказать сразу несколько товаров. Для каждого следует указывать количество. Один раз следует указать адрес доставки. Должна вводиться следующая информация:
| Наименование товара | Выбор из списка. Сделайте несколько одинаковых списков, чтобы можно было заказать сразу несколько различных товаров. |
| Количество | Вводится текстом. Следует сделать отдельное поле для ввода количества, напротив каждого списка товаров. |
| Адрес доставки | Текст. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 006
Создать форму для запроса пароля. Должна вводиться следующая информация:
| Имя пользователя | Вводится текстом. |
| Ресурс | Выбор из списка. Предусмотрите несколько ресурсов. Например, "Просмотр базы данных", "Редактирование базы данных" и т.д. По умолчанию пусть будет "Полный доступ". |
| Пароль | Стандартное поля для ввода пароля. |
| Файл | Возможность выбрать необходимый файл |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 007
Создать форму для заказа на ремонт компьютера. Должна вводиться следующая информация:
| Имя пользователя | Вводится текстом. |
| Адрес | Вводится текстом. |
| Процессор | Выбор из списка. По умолчанию Intel Pentium IV |
| Гарантия | «Радио-кнопки» - Да, Нет |
| Характер неисправности | Многостроковое поле ввода |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 008
Создать форму для заказа на ремонт автомобиля. Должна вводиться следующая информация:
| Имя владельца | Вводится текстом. |
| Адрес | Вводится текстом. |
| Модель | Выбор из списка. По умолчанию "ВАЗ 2101" |
| Коробка передач | Автомат, Механическая (радио-кнопка) |
| Характер неисправности | Многостроковое поле ввода |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 009
Создать форму для заказа автомобиля. Должна вводиться следующая информация:
| Имя клиента | Вводится текстом. |
| Адрес | Вводится текстом. |
| Модель | Выбор из списка. Возможно выбрать сразу несколько моделей. |
| Цвет | Выбор из списка. Возможно выбрать сразу несколько цветов. |
| Тюнинг | Три чек-бокса |
| Максимальная цена | Выбор из списка. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 010
Создать форму для поиска в каталоге библиотеки. Должна вводиться следующая информация:
| Тема | Выбор из списка. Возможно выбрать сразу несколько тем. |
| Автор | Вводится текстом. |
| Название | Вводится текстом. |
| Годы издания | До 2000, от 2000 до 2002, от 2003до 2005 (радио-кнопки) |
| Язык | Радио-кнопки: русский, украинский, английский |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 011
Создать форму для регистрации нового пользователя в системе. Должна вводиться следующая информация:
| Имя | Текст. |
| Текст. | |
| Пол | Ради-кнопки |
| Город | Ниспадающий список |
| Пароль | Поле ввода пароля. |
| Какую информацию хотите получать | Чек-боксы |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 012
Создать форму для ввода информации о том, какие предметы хотел бы изучать студент. Предметы должны быть пересчислены по одному на строке и перед названием каждого должен стоять "check-box". Изначально два основных предмета должны быть выбраны и доступ к ним запрещен.
Кроме того форма должна содержать поле для ввода имени и пароля и кнопку "Очистить форму" (разумеется, она должна правильно работать).
Вариант 013
Создать форму, в которой есть две независимые серии радио-кнопок. Например, для ввода любимого телеканала. Должна вводиться следующая информация:
| ФИО | Простой текстовый ввод |
| Город | Ниспадающий список |
| Канал | Серия радио-кнопок. |
| Передача | Серия радио-кнопок. Например, "Новости", "Сериалы", "Мультфильмы", и т.д. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 014
Создать форму для ввода информации о студенте. Должна вводиться следующая информация:
| Фамилия | Простой текстовый ввод |
| Имя | Простой текстовый ввод |
| Отчество | Простой текстовый ввод |
| Пол | Должна быть серия "радио-кнопок" |
| Курс | Выбор из списка |
| Присоединить резюме | Обзор и выбор файла |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 015
Создать форму для ввода ведомости начисления зарплаты. Ведомость рассчитана на бригаду из 3 человек. Для каждого человека должна вводиться следующая информация:
| ФИО | Простой текстовый ввод |
| Оклад | Простой текстовый ввод. Ограничьте размер вводимой строки разумным числом. |
| Основное ли место работы | Чек-бокс |
| Отдел | Серия радио-кнопок |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 016
Создать форму для ввода бухгалтерской проводки. Должна вводиться следующая информация:
| Счет-Дебет | Выбор из ниспадающего меню. |
| Счет-Кредит | Выбор из ниспадающего меню. |
| Сумма | Простой текстовый ввод. Ограничьте размер вводимой строки разумным числом. |
| Личный код бухгалтера | Выбор из ниспадающего меню. |
| Пароль | Поле для ввода паролей |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 017
Создать форму для ввода информации о желаемом для клиента варианте междугородного обмена. Должна вводиться следующая информация:
| ФИО | Простой текстовый ввод |
| Адрес | Простой текстовый ввод |
| Количество комнат у клиента | Ниспадающее меню. |
| Желаемые города | Список с возможностью выбора нескольких вариантов. |
| Желаемое количество комнат | Ниспадающее меню. |
| Этажность | Серия радио-кнопок. Например, "Любая", "Кроме первого", "Кроме последнего", "Кроме первого и последнего", и т.д. |
| Дополнительные условия | Многострочное текстовое поле. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 018
Создать форму для ввода информации о желаемом для клиента варианте внутригородского обмена квартиры. Должна вводиться следующая информация:
| ФИО | Простой текстовый ввод |
| Адрес | Простой текстовый ввод |
| Количество комнат у клиента | Ниспадающее меню. |
| Желаемые районы | Список с возможностью выбора нескольких вариантов. |
| Желаемое количество комнат | Ниспадающее меню. |
| Этажность | Список с возможностью выбора нескольких вариантов. |
| Дополнительные условия | Многострочное текстовое поле. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 019
Создать форму для поиска подходящего дома в базе данных риэлтерской фирмы. Должна вводиться следующая информация:
| Площадь | Вводится текстом. |
| Этажность | Ниспадающее меню. |
| Район | Список с возможностью выбора нескольких вариантов. |
| Наличие коммуникаций | Серия чек-боксов. Например "Водопровод", "Телефон", и т.д. |
| Дополнительные требования | Многостроковое поле ввода |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Вариант 020
Создать форму для поиска подходящих материалов в библиотекеке. Должна вводиться следующая информация:
| Ключевые слова | Вводится текстом. |
| Год публикации | Выбор диапазонов из ниспадающего меню. |
| Характер публикации | Список с возможностью выбора нескольких вариантов. Например, "Статья в журнале", "Диссертация", "Монография" и т.д. |
| Язык | Список с возможностью выбора нескольких вариантов. |
| Доставка | Серия радио-кнопок. Например "Поднять в читальный зал", "Доставить на абонемент", и т.д. |
В форме должна быть кнопка "Очистить форму" (разумеется, она должна правильно работать).
Задания на контрольную работу.
Задание: Создать web-сайт фирмы (по варианту). Сайт должен содержать 8 страниц:
1) Файл index.html, содержащий разбивку на фреймы;
2) Содержание (или карта сайта) – первоначально загружается в один из фреймов index.html;
3) Главная страница (общие сведения о рассматриваемом бизнесе и о самой фирме) – первоначально загружается в один из фреймов index.html;
4) Страница списка продуктов, содержащая таблицу с полями (необязательно именно такие): «Продукт», «Единица измерения», «Цена», «Подробнее…», «Заказать». Количество продуктов – не менее 7-ми. «Подробнее…» является ссылкой на закладку конкретного продукта в странице описания товаров. «Заказать» является ссылкой на страницу «Заказ»;
5) Страница описания продуктов;
6) Прайс-лист (Excel). На одной или нескольких страницах предусмотреть ссылку на прайс-лист, например «Полный список товаров в формате .xls находится здесь»;
7) Страница резюме (о себе) – адрес компании, как связаться и т.д.;
8) Страница оформления заказа.
В контрольной обязательно должны присутствовать разделы:
1) Сбор информации по заданной теме (указать источники – проработанные Интернет сайты, журналы, книги и т.д.);
2) Указать этапы разработки сайта. Ниже показан пример разработки:
Задание структуры всего сайта и отдельных страниц:
а) Вначале я создам основную страницу сайта. Эта страница будет состоять из трех фреймов:
| Фрейм 1 | |
| Фрейм 2 | Фрейм 3 |
в верхнем (Фрейм1) будет размещаться логотип фирмы (рисунок),
во Фрейме2 будут помещены ссылки на все другие страницы сайта (т.е. путеводитель по сайту):
Главная
Оборудование
Окна
О нас
(причем эти ссылки будут находиться в ячейках таблицы),
а третий Фрейм будет служить для отображения всех остальных html-страниц:
при первоначальной загрузке сайта во Фрейме3 будет загружена страница «Главная»,
при нажатии во Фрейме2 на ссылку Оборудование будет загружена страница «Оборудование»,
при нажатии на ссылку Окна будет загружена страница «Окна»,
при нажатии на ссылку О нас будет загружена страница «О нас».
| Фрейм 1 Рисунок(логотип) | |
| Фрейм 2 Ссылки на страницы | Фрейм 3 Отображение html-страниц, связанных со ссылками |
б) структура страницы «Главная».
Страница «Главная» будет содержать таблицу вида:
Текст «Оборудование…»
| Текст «Окна…»
| ||||||
| Текст «Адрес…» |
в) структура страницы «Оборудование».
Заглавие, цветная черта, данные про оборудование будут содержаться в таблице:
Заглавие
Черта
| Рисунок дисковой пилы TU-120 | Список: Характеристики пилы |
| Цена | Ссылка на страницу «Заказ» |
| Рисунок двухголовочной автоматической пилы ТТ-351 | Список: Характеристики |
| Цена | Ссылка на страницу «Заказ» |
| Рисунок автоматической пилы ТА-141 | Список: Характеристики |
| Цена | Ссылка на страницу «Заказ» |
г) структура страницы «Окна».
Заглавие
Рисунок
Текст
Заглавие
Текст
«Бегущий» рисунок
д) структура страницы «О нас»
Заглавие
Текст
е) структура страницы «Заказ»
Заглавие «Оформить заказ»
Таблица:
| ФИО | Поле ввода текста |
| Адрес | Поле ввода текста |
| Теоефон | Поле ввода текста |
| Список товаров | Выбор1 Выбор2 Выбор3 |
| Форма оплаты | Поле выбора из списка |
Кнопка «Заказать»
ж) структура страницы «Содержание»
Невидимая таблица размером 1*4.
Т.о. будет создано 7 файлов формата html: index.html, glav.html, oborud.html, okna.html, about.html, zakaz.html, sod.html. + Прайс-лист .xls.
3) Текст программы с описанием используемых тегов, например:
Создание html-страницы “index.html”.
| Команды HTML (текст программы) | Пояснения |
| <html> <head> <title>Основная страница</title> </head> | Стандартное начало для всех файлов |
| Создаю сложную структуру вложенных тегов <frameset>: | |
| <frameset rows="20%,*" frameborder=yes> | тег frameset разбивает страницу на две строки (атрибут rows), причем первая строка занимает 20% общей площади страницы, а вторая всю остальную площадь, включаю трехмерное обрамление фреймов |
| <frame src="logo.jpg" name="frame1" scrolling=no bordercolor=blue> | В первый фрейм загружается рисунок «logo.jpg», даю имя фрейму - frame1, запрещаю полосы прокрутки (атрибут scrolling), задаю цвет обрамления кадра – blue (атрибут bordercolor) – работает только если frameborder=yes |
| <frameset cols="20%,*"> | Вторую строку разбиваю на два столбца (атрибут cols), первый – 20% второй строки, второй – все остальное пространство второй строки |
| <frame src="sod.html" name="frame2" bordercolor=blue> | Во второй фрейм загружается файл sod.html |
| <frame src="glav.html" name="frame3" bordercolor=blue> | Во второй фрейм загружается файл glav.html. Этот фрейм помечен именем frame3. Впоследствии это имя будет использоваться тегом гипертекстовой ссылки <a> (свойством tаrget), т.е. документ отобразится в поименованном кадре. |
| </frameset> | закрываю тег, разбивающий область на столбцы |
| </frameset> | закрываю тег, разбивающий область на строки |
| </html> |
Сохраняю файл index.html,нажимаю «Обновить» 
.
Фреймы появились, но файлы glav.html, sod.html, logo.jpg еще не созданы, поэтому сайт работает некорректно. Все эти файлы должны находиться в одном каталоге (там, где находится файл index.html, иначе к ним необходимо указать полный путь). Рисунок logo.jpg перебрасываю в текущий каталог.