Лабораторная работа по теме "Создание форм"

Лабораторная работа Тема: Создание форм Цель: Научиться создавать различные компоненты форм и научиться управлять формами. Задание 1. Изучите теоретический материал предложенный ниже. Ход работы Основная цель создания форм состоит в получении информации от пользователей. Поля форм являются   теми   средствами,   с   помощью   которых   пользователи   могут   вводить   свои   данные.   В следующих подразделах рассматриваются все типы полей, а также даются рекомендации о том, как их настраивать для эффективного решения тех или иных задач. Текстовые поля Простейшим   элементом   формы,   способным   принимать   какие­то   данные   от   пользователя, является   пустое   поле.   В  HTML  поля   данного   типа   называются  текстовыми.  Для   определения текстового поля предусмотрен тег .  Атрибуты   тега     позволяют   настроить   параметры   определяемого   поля   формы. Назначение атрибутов  name,  id  и  size  очевидно, тогда как атрибут  type  требует более детального рассмотрения.  Текстовые области Тег    применяется для определения многострочных текстовых полей (называемых областями). Помимо стандартных атрибутов  name, id.и tabindex, для всех тегов <textarea> должны также указываться значения атрибутов rows и cols, задающих размеры соответствующего текстового поля. Значение атрибута  cols означает ширину поля в пикселях, тогда как значение атрибута  rows ­ количество строк, им которых это поле состоит. Любой   текст,   набранный   между   тегами   <textarea>   и   ,   будет   изначально отображаться внутри соответствующего текстового поля, и при заполнении формы пользователь при желании сможет заменить его любой собственной информацией.  Флажки и переключатели Поля флажков  и переключателей  очень похожи между  собой. В действительности между ними   есть   лишь   одно   отличие:   пользователь   может   выбрать   только   один   элемент   в   списке переключателей и более одного элемента в списке флажков.  Что   касается   переключателей,   для   них   необходимо   задавать   значение   атрибута  checked, определяющего исходное состояние каждого поля. Разумеется, желательно установить изначально выбранным именно тот переключатель, который используется чаще других.  Раскрывающиеся меню На   примере   приведенного   далее   кода   показан   способ   применения   тега     для определения раскрывающегося меню. Атрибуты этого тега задают имя меню (mane  и  id), а также количество постоянно отображаемых строк (size). Добавляемые внутри тега  теги  описывают отдельные пункты данного раскрывающегося меню. Как и в случае с переключателями, можно воспользоваться атрибутом selected для обозначения пункта меню, выбранного по умолчанию. Выбор файла Другой эффективный способ получить информацию от посетителя вашей  Web­страницы ­ предоставить ему возможность отправки его собственных файлов. Вы можете воспользоваться типом file для сбора резюме, заказов или любых других файлов. Код HTML, описывающий форму, которая позволяет пользователю выбрать предназначенный для отправки файл, представлен ниже.  Кнопки Кнопки Submit (Отправить ответ) и Reset (Очистить форму) относятся к разряду специальных элементов формы. Хотя эти кнопки добавляются с помощью тега , они служат не средством получения   какой­то   информации   от   пользователя,   а   исключительно   инструментами   передачи   или сброса уже введенных данных. Задание 2. Создайте файл «Форма.htm», который должен содержать следующий текст:

Закажите пиццу !

выберите размер пиццы Большой    Малый

Bыберите тип теста Deep Dish    Hand­Tossed    Thin & Crispy

Выбepиme наполнитель:  Сосиски    nepeц    Грибы

Ваше имя 

Ваш телефон 

Haберите здесь адрес

Отправьте свое резюме |

 

В результате получится форма со всеми элементами (см. рис. 1). Рис. 1 Форма Задание 3. Напишите комментарии к основным блокам данного текста. Задание 4. Создайте форму для заполнения личных данных в паспортном столе. Контрольные вопросы: 1. Какие компоненты форм вы знаете? 2. Для чего они используется каждый из компонентов формы? 3. Напишите соответствующие теги для каждого компонента формы.