МУ_Интернет-технологии
.pdf21
4.Какие возможности указания фонового цвета абзаца вам известны?
5.Как создается стилевой файл, содержащий оформление web-
сайта?
ЛАБОРАТОРНАЯ РАБОТА № 5 СОЗДАНИЕ ИНТЕРАКТИВНЫХ HTML-ДОКУМЕНТОВ
Цель работы: приобрести навыки работы при создании HTMLформы
Краткие теоретические сведения
Формы в HTML документах
Одним из самых значительных элементов HTML-документа – являются формы. Они нужны вам, если вы хотите установить диалог с вашими посетителями или осуществить сбор данных на своём сайте.
Когда форма интерпретируется WEB - браузером, создаются специальные экранные элементы такие, как поля ввода, checkboxes (флажки), radiobuttons (переключатели), выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (submit - специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается http-серверу для обработки и передаче другим программам, работающим под сервером.
Каждый элемент ввода данных описывается при помощи тега <input>. Когда пользователь вводит данные в элемент формы, информация размещается в атрибуте value данного элемента.
Синтаксис
Все формы начинаются тэгом <form> и завершаются тэгом </form>. <form method="get|post" action="url">Элементы_формы_и_другие_элементы_HTML </form>
method
Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
get: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы.
post: Данные передаются в неявном виде, так чтобы пользователь их никак не увидел.
action: описывает url, который будет вызываться для обработки формы.
22
Тэги Формы textarea
Тэг <textarea> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вот пример использовани тэга <textarea>: <textarea name="address" rows="10" cols="50">Белгород, Костюкова,д.46, кафедры экономики и организации производства </textarea>
Атрибуты, используемые внутри тэга <textarea> описывают внешний вид и имя вводимого значения. Тэг </textarea> необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:
name – имя поля ввода
rows – высота поля ввода в символах cols – ширина поля ввода в символах
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какойлибо текст, то необходимо вставить его внутри тэгов <textarea> и </textarea>.
input
Тэг <input> используется для ввода одной строки текста или одного слова, флажка, переключателя, кнопки, скрытые поля и поле для пароля. Атрибуты тэга:
checked – означает, что checkbox или radiobutton будет выбран. maxlength – определяет количество символов, которое пользователи
могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом size. Если maxlength больше чем size, то в поле осуществляется скроллинг. По умолчанию значение maxlength равно бесконечности.
name – имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
size – определяет визуальный размер поля ввода на экране в символах.
value – присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа radio (для типа radio данный атрибут обязателен)
type – определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Примеры типов полей type:
"text" – |
|
|
текстовая строка. |
|
|
|
|||
"password" – |
***** |
|
ввод пароля. |
|
|
|
|||
|
|
|||
|
|
|
23 |
||
"radio" – |
|
кнопка-переключатель. |
|||
"checkbox" – |
|
флажок. |
|||
"submit" – |
SUMBMIT |
кнопка отправки данных. |
|||
|
|
|
|||
|
|
|
|||
"reset" – |
RESET |
кнопка сброса данных. |
|||
|
|
|
|||
"button" – |
кнопка для других целей. |
||||
"file" – выбор файла.
"hidden" – невидимый посетителям обработчик данных. checkbox
Поле данного типа создает флажок. hidden
Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи на сервер некоторой информации, которая не должна изменяться пользователем.
image
Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. Описание картинки осуществляется через атрибут src и по синтаксису совпадает с тэгом <img>.
password
То же самое, что и атрибут text, но вводимое пользователем значение отображается в виде звездочек.
radio
Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом type="radio" с разными значениями атрибута value, но с одинаковыми значениями атрибута name.
reset
Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
submit
Данный тип обозначает кнопку. Атрибут value может содержать строку, которая будет высвечена на кнопке.
text
Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты maxlength и size для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране .
24
Меню выбора в формах
Под меню выбора в формах понимают такой элемент интерфейса, как listbox. В HTML для этого используется тег <select>:
select – пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами option. Данный вид представляется как выпадающий listbox.
Атрибут multiple="multiple" позволяет выбрать несколько элементов из listbox.
Тэг select имеет один или более параметр между стартовым тэгом <select> и завершающим </select>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <select>:
<form>
<select name="group"> <option> AT 386 </ option> <option> AT 486 </ option> <option> AT 586 </ option> </select>
</form>
Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров name="value" с одинаковыми значениями name, но разными value.
fieldset
Тэг fieldset предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных. Тэг рисует рамку вокруг текста и других объектов, содержащихся в контейнере. Закрывающий тег требуется. Надпись в рамке задается с помощью тега legend.
Пример: <fieldset>
<legend>Группа кнопочек</legend> <input type="button" value="Кнопка 1" /> </fieldset>
Содержание работы
1.Ознакомиться с теоретическим материалом.
2.Загрузить программу Блокнот.
3.Создать HTML-документ, который в окне Web-браузера отобразится так, как показано на примере.
4.Сохранить набранный текст в файл с расширением *.html
5.Открыть файл в окне браузера и, если есть недостатки, устранить
их.
6.Выполнить задание.
25
Рис. 3. Пример формы в окне браузера
Листинг документа
<html>
<head>
<title>
Примеры использования элементов fieldset и legend для разметки формы
</title>
</head>
<body bgcolor="lightgrey">
<h2 align="center">Заполните анкету</h2> <form action="www.dsdr.da.ru/cgi-bin/hyh.pl"> <fieldset>
<legend><b><i>
Личная информация
</i></b></legend>
Фамилия: <input name="lastname" type="text" size="30" /> Имя: <input name="firstname" type="text" />
Телефон: <input name="phone" type="text" /><br /> Адрес: <input name="address" type="text" size="90" /> </fieldset>
26
<fieldset>
<legend align="right">Опыт работы Web-мастером</legend>
<input name="experience" type="radio" value="none" checked="checked" /> Нет опыта
<input name="experience" type="radio" value="lt_1" /> Меньше 1 года <input name="experience" type="radio" value="1-3" /> от 1 до 3 лет <input name="experience" type="radio" value="gt_3" /> более 3 лет </fieldset>
<br /> <fieldset>
Есть ли у Вас готовые работы или законченные проекты, в которых Вы участвовали?
<br />
<input name="work" type= "radio" value="yes" /> Да
<input name="work" type="radio" value="no" checked="checked" />
Нет
<br />
Если да, то перечислите их ниже: <br />
<textarea name="list" rows="10" cols="40"> </textarea>
</fieldset> <br />
<input type="reset" value="stop" /> Сброс
<input type="submit" value="go" /> Отправить данные </form> </body>
</html>
7. Предъявить работу преподавателю. Открыть файл в окне браузера.
Контрольные вопросы
1.Из каких элементов управления состоит форма?
2.Чем отличается текстовое поля ввода отличается от поля ввода
пароля?
3.Какой тег используется для задания поле "флажок".
4.Чем отличается поле "флажок" checkbox от поля "переключатель" radio?
5.Как задать кнопку очистки в форме, и зачем она нужна?
6.Какой тег используется для создания раскрывающего списка. Напишите пример работы тега.
27
Приложение
Задание 1
В качестве предметной области рассматривается автотранспортное предприятие (гараж), предоставляющее услуги автомобильных перевозок топлива.
Задание 2
Агентство занимается продажей авиабилетов на различные рейсы, ведет учет проданных билетов и учет пассажиров, купивших билеты, поэтому возникает потребность в хранении и обработке данных.
Задание 3
Агентство ведет списки лиц, ищущих работу, и списки вакансий. Вакансии поступают от организаций с указанием должности и оклада. В заявках претендентов, кроме анкетных данных, указываются желаемые должность и оклад.
Задание 4
В качестве предметной области рассматривается товарно-сырьевая биржа, которая проводит торги и ведет информацию о производственных продажах. На торги могут быть представлены разные товары одной и той же фирмы и одни и те же товары разных фирм. Каждый товар имеет свой уникальный код, произведен определенной фирмой в определенное время. Товар имеет гарантийный срок хранения, единицу измерения.
Задание 5
Рассматривается предприятие, которое занимается поставкой и вводом в эксплуатацию оборудования для предприятий.
Задание 6
Сфера услуг отеля включает обслуживание и бронирование номеров, ресторан, спортивный и тренажерный залы, сауну. Основной услугой является гостиничный номер, все остальное входит в разряд прочих услуг.
28
Окончание прил.
Задание 7
Издательство – предприятие, занимающееся выпуском разнообразной печатной продукции. Издательство заключает договор с заказчиком (клиентом) на выполнение заказа. Заказчиком может выступать частное лицо или организация. Частное лицо может быть автором издания (или одним из авторов, если их несколько) или представителем автора.
Задание 8
Хозрасчетная поликлиника ведет прием и учет пациентов, их посещений (визитов) и учет обслуживания пациентов специалистами (врачами) поликлиники. Существует необходимость в хранении информации обо всех посещениях поликлиники пациентами и о том, на приеме у каких специалистов они находились.
Задание 9
В качестве предметной области рассматривается фирма по производству обуви. Должны быть предоставлены данные о каждом сотруднике, список поставщиков необходимой продукции или комплектующих и данные о каждом поставщике, список поставляемой продукции или комплектующих, список выполняемых сотрудниками работ.
Задание 10
В качестве предметной области рассматривается фирма «Мебель». Должны быть предоставлены данные об изделиях, мастерах, их изготавливающих, клиентах фирмы, а также о накладных, составляемых при отгрузке изделий клиентам.
29
Библиографический список
1.Моррисон, М, HTML и XML. Быстро и эффективно./ Мишель Моррисон. – Питер, 2005. – 303 с.
2.Мельников, П.П. Технология разработки HTML – документов / Мельников П.П. Учебное пособие – Финансы и статистика, 2005. – 112 с.
3.Рева, Создание Web-страниц – Просто как дважды два / О.Н. Рева. –
М.:Эксмо, 2006. – 240 с.
4.Комолова, Н.В. HTML. Учебный курс / Н.В.Комолова. Спб.: Питер, 2006. – 267 с.
5.Чиртик, А. HTML / А.Чиртик. – СПб.: Питер, 2006. – 219 с.
6. |
Квинт, И. HTML и CSS на 100% / И.Квинт. - СПб.: Питер, 2008. – |
352 с. |
|
7. |
Мархвида, И. Создание Web-страниц, CSS, JavaScript. – Минск: |
Новое издание, 2002. – 352 с.