Практическая работа № 2 Тема. Разработка HTML-формы.
Цель: научиться создавать HTML -формы для отправки данных на сервер.
1. Ознакомиться с теоретической частью.
2. Выполнить практическое задание.
3. Ответить на контрольные вопросы.
1) Создание простой формы
Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.
2) Флажок ( checkbox )
Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.
Группа флажков состоит из элементов , имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.
Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.
Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает типradio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.
4) Кнопка сброса формы (Reset)
Тип » name RU» style=»font-size: 9pt»>Имя кнопки » value RU» style=»font-size: 9pt»>Надпись на кнопке «>
При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.
5) Выпадающий список (select)
Тэг представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.
Список начинается с парных тегов . Теги позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(приsize = 1 не имеет смысла)
При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN.
6) Текстовое поле (text)
Позволяет пользователям вводить различную информацию.
При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.
7) Поле для ввода пароля (password)
Полностью аналогичен текстовому полю, за исключением того что символы, набираемые пользователем, не будут отображаться на экране.
8) Многострочное поле ввода текста (textarea)
Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.
Многострочное поле ввода текста начинается с парных тегов . Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами .
9) Скрытое текстовое поле
Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.
Имя » type RU» style=»font-size: 9pt»>Тип » value RU» style=»font-size: 9pt»>Значение «>
Скрытое поле начинается с тега , атрибуты которого являются name, type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.
10) Кнопка отправки формы (submit)
Служит для отправки формы сценарию.
При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit” и value=”Текст кнопки”. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки «Сохранить», «Удалить», «Редактировать» и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.
11) Кнопка для загрузки файлов (browse)
Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов . Начинающий тэг содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла – “file”.
Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг . Заголовок указывается в тэгах . Основное назначение объекта – задавание различных стилей оформления.
Текст, который будет помещен внутри рамки.
Используя различные элементы HTML -формы, создайте форму регистрации пользователя. Основные элементы: поле ввода текстовой информации (имя, фамилия), поле ввода пароля, зависимые и независимые переключатели, поле ввода e — mail , списки выбора (выпадающий, множественный), поле ввода многострочного текста, кнопки загрузки файлов, кнопку отправки формы.
2. Перечислите основные элементы HTML -формы.
3. Какие теги используются для создания форм?
4. Результат выполнения практического задания.
5. Ответы на контрольные вопросы.
формы
Сверстайте форму регистрации, показанную на рис. 1. Ширина формы и её полей фиксирована.
Электронный сомелье
Сверстайте форму из PSD-файла для ввода коктейля.
Автор описания и дизайна — Александр Шпак.
Пошаговая форма
Сверстайте пошаговую форму из PSD-файлов для ввода информации о коктейле.
Форма для коктейлей
Сверстайте форму из PSD-файла для ввода коктейля.
Граница вокруг формы
Создайте форму на HTML5, показанную на рис. 1.
Обязательные поля формы
Сделайте форму, показанную на рис. 1, в которой поля обязательные к заполнению отмечены крестиком, а необязательные поля зеленой галочкой. При корректном заполнении обязательных полей должен меняться и рисунок возле поля.
Поле для ввода чисел
Сделайте в браузере Opera ввод чисел, как показано на рис. 1.
Рис. 1. Поле для ввода числа
Форма регистрации
Создайте без использования таблиц форму регистрации, представленную на рис. 1. Ширина обрамляющей рамки и серого поля внизу с кнопкой «Зарегистрироваться» резиновая, и меняется в зависимости от ширины окна браузера. Форма должна корректно работать в IE7, IE8, IE9, Firefox 3, Safari 5, Opera 10, Opera 11, Chrome 6 и старше.
Поле для поиска
Создайте поисковое поле для браузеров Chrome и Safari как показано на рисунке ниже.
Практическая работа № 4 Формы в html-документах
Цель:Изучение HTML-форм и их элементов. Приобретение навыков использование форм для взаимодействия пользователя с HTML-документами.
Формы используются при создании интерактивных страниц, позволяющих осуществлять передачу данных, вводимых пользователем в браузере, на Web-сервер. Формы используются для организации опросов, заполнения анкет, тестирования и т.д. Кроме того с помощью сценариев (скриптов), например JavaScript, форма позволяет получить доступ к любому элементу HTML-документа и изменять его и применять по своему усмотрению.
Форма отображается в окне браузера в виде набора стандартных элементов управления – полей ввода данных и кнопок.
По команде пользователя браузер собирает введенную информацию, форматирует ее и передает на сервер. На стороне Web-сервера обработку полученной от клиента информации выполняет специальная программа-обработчик. Таким образом, формы являются способом обмена данными между браузером и Web-сервером.
1. Формы в html-документах
В HTML-документе форма открывается тегом
. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. В каждый момент времени на Web-сервер могут быть отправлены данные только одной формы. Поэтому данные разных форм должны быть независимы друг от друга.Формы передают информацию серверным программам-обработчикам в виде пар
[имя переменной]=[значение переменной].
Имена переменных должны задаваться латинскими буквами.
Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
1.1. Элементы форм
NAME – определяет имя формы, уникальное для данного документа. Используется только, если в документе присутствует несколько форм.
ACTION=url
где url— адресWeb-сервера и программы, которая будет обрабатывать данные формы. Если это поле отсутствует, будет использован URL адрес текущего документа. Допустимо использовать значениеMAILTO:url для отправки данных по электронной почте.
METHOD=get/post
где get/post– метод, определяющий способ передачи данных формы протоколом HTTP. Метод GETможет использоваться для передачи коротких сообщений.Браузер при этом берёт значение action формы, добавляет `?’, затем присоединяет набор данных формы, разделенных символом амперсанда (&), и направляет полученную строку на указанный URL. Информация передается в явном виде. Например, если в строке набора браузера присутствует http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В формахHTML-документов этот метод обычно не используется, так как допускает простой перехват отсылаемых на сервер данных.
Метод POSTсоздан специально для передачи текстовых сообщений. Этот метод пересылается данные формы как содержимое телаHTTP-запроса. Почти всегда применяется в формах. Передает информацию в скрытом виде.
Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
задает тип кодирования содержимого заполненной формы. Этот атрибут действует только для метод POST и имеет только одно возможное значение (которое является значением по умолчанию) — application/x-www-form-urlencoded.
TARGET=window
Определяет положение ответа сервера по получению формы (по аналогии с тегом )
Значения параметра window:
имя окна, в котором будет выведен результат, если указанное имя отсутствует, то результат будет показан в новом окне;
показать результат в новом окне;