<Center>
<Font color=red><H2>ГPУППA ПОЛЕЙ </H> </font>
</center>
<Fieldset>
<Legend>Заголовок группы </legend> Имя: <Input name = "imya2 " type="text ">
Фамилия: <lnput name="familiya2" type="text"><BR> Телефон: <lnput name="telefon2"type="text"><BR> </fieldset>
11.1. Типовое задание
Пример 1. Постройте форму следующего вида (рис. 11.6).
Рис. 11.6. Пример формы
128
Проанализируйте представленный ниже код HTML и определите технологию построения управляющих элементов сложной формы:
<Html>
<Head>
<Title>Пример формы </ Title >
<Meta http-equiv="Content-Type" сontent="text/html; charset=windows-1251"> </head>
<Body bgcolor=blue> <Center>
<Font size=6 color=silver><i>ПРИMEP ФOPМЫl</font> </i> </center>
<p>
<Hr color= "red">
<Table border=3 bgcolor="lime">
<Form action - "таilto:Имя@сервер. домен" method= "post "> <Tr>
<Td> <Label for= "imyal ">Имя: </label> <Td> <Input type = "text" id= "imyal "> <Tr>
<Td> <Label for= "familiyal "> Фамилия: </label> <Td> <lnput type="text" id= "familiyal ">
<Tr>
<Td> <Label for= "e-mail 1 ">e-mail: </label> <Td><Input type="text" id="e-mail">
<Tr>
<Td>Cmpana проживания: <Td> <Select> <Option>Англия</option> <Option>Беларусь </option>
< Option >Германия </ option > <Option> Франция</option> </select> <Tr>
<Td>Научный работник: <Td>
<Input type="checkbox" name= "F001" га1ие="Да">Да <Input type="checkbox" name="F001" value="Hem">Hem <Tr>
<Td>noл: <Td>
<Input type="radio " name= "poll" value = "Male "> M <Input type="radio " name="poll" value="Female "> Ж <Tr>
<Td>Дополнительная информация:
129
<Td><Textarea rows=6 cols=40> </textarea>
<Tr>
< Td align = "bottom ">
<Input align= "bottom" type="submit" value= "send"> <Input type="reset" value= "reset" >
</form>
</table>
</body>
</html>
11.2.Контрольные вопросы
1.Какие теги используются для создания форм?
2.Каково назначение атрибутов value, checked, size ?
3.Каков порядок создания меню на гипертекстовой странице
4.Опишите технологию построения управляющих элементов сложной
формы.
11.3.Контрольные задания
Постройтеформыввидетаблиц.
Вариант 1
130
Вариант 2
Вариант 3
Вариант 4
131
Вариант 5
Вариант 6
132
Лабораторная работа № 1 2
СОЗДАНИЕ ФОРМ С ИСПОЛЬЗОВАНИЕМ СТИЛЕЙ
Цель работы: приобрести навыки создания форм различных типов с использованием таблиц стилей.
Методические указания
1. Управляющие элементы
Форма HTML – это раздел документа, в котором содержатся обычная информация, разметка и специальные элементы, называемые управляющими элементами (флажки, кнопки, текстовые поля, поле со списком, переключатели и т.д.), а также метки этих управляющих элементов. Обычно пользователи заполняют форму, модифицируя управляющие элементы (вводя текст, выбирая пункты меню и т.д.) перед тем, как предоставить форму пользователя для обработки (например, на Web-сервер, на почтовый сервер и т.д.). Пользователи взаимодействуют с формами при помощью именованных управляющих элементов.
При создании однострочного текстового поля для задания параметров поля можно использовать стили, которые позволят изменить ширину текстового поля, цвет фона, тип шрифта и рамки вокруг поля (пример 1).
Пример 1. Создание однострочного текстового поля
<html> |
|
<head> |
|
<style type="text/css"> |
|
.textfield { |
|
background: red; |
/* Цвет фона под текстом*/ |
color: blue; |
/* Цвет символов */ |
border: 2px solid black; |
/* Рамка вокруг поля*/ |
width: 50%; |
/* Ширина поля в процентах */ |
font-family: Arial, sans-serif; |
/* Тип шрифта*/ |
font-size: 90% |
/* Размер шрифта*/ |
} |
|
</style> |
|
133
</head>
<body>
<FORM action="..." method="post"> <b>Введите ваше имя:
</b><br>
<INPUT type="text" name="user" maxlength=25 class=textfield> <P>
<INPUT type="submit" value="Отправить"> </P>
</FORM>
</body>
</html>
В данном примере создается новый класс, который связывается с тегом INPUT. Также при помощи атрибутов font-family и font-size задается тип шрифта, а при помощи свойства color цвет символов (рис. 12.1).
Рис. 12.1. Вид текстового поля в браузере
При оформлении многострочного поля применяются те же стилевые параметры, что и для однострочного текста, а именно можно изменять ширину, высоту, границу, цвет текста и фона (пример 2).
Пример 2. Создание многострочного текстового поля
<html> |
|
<head> |
|
<style type="text/css"> |
|
TEXTAREA { |
|
background: red; |
/* Цвет фона под текстом*/ |
color: blue; |
/* Цвет символов */ |
padding: 5px; |
/* Рамка вокруг поля*/ |
border: 1px solid black; |
/* Рамка вокруг поля*/ |
width: 50%; |
/* Ширина поля в процентах */ |
} |
|
134
</style>
</head>
<body>
<FORM action="..." method="post"> <b>Введите ваш отзыв:
</b><br>
<textarea rows=10> </textarea>
<p>
<INPUT type="submit" value="Отправить"> </p>
</FORM>
</body>
</html>
Добавление рамки к полю через свойство border отменяет трехмерные эффекты. Вокруг текста при использовании рамок убираются поля, поэтому требуется их установить с помощью атрибута padding (рис. 12.2).
Рис. 12.2. Вид многострочного текстового поля в браузере
Стили позволяют устанавливать прямо в поле для ввода графические изображения с помощью тега INPUT в виде фона, используя для этого атрибут background.
135
Пример 3. Установка графического изображения в поле для ввода
<html> |
|
<head> |
|
<style type="text/css"> |
|
INPUT.enter{ |
|
height: 36 px; |
/* Высота поля*/ |
width: 200 px; |
/* Ширина поля */ |
padding-left: 35 px; |
/* Отступ слева от края до текста*/ |
}
</style>
</head>
<body>
<FORM action="..." method="post">
Логин: <input type="text" class=enter style="background: url (login.gif) no-repeat"> <br>
Пароль: <input type="password" class=enter style="background: url (pass.gif) norepeat">
<p>
<input type="submit" value="Отправить"> </p>
</FORM>
</body>
</html>
В качестве аргумента параметра background необходимо использовать norepeat, тогда рисунок будет отображаться только один раз и не станет повторяться, как это задано для фона по умолчанию. Чтобы не писать текст поверх рисунка, к стилю тега INPUT следует добавить атрибут padding-left, который обеспечивает набор текста правее рисунка, а его значение зависит от ширины изображения.
136
При создании кнопок, их вид и цвет можно задавать, воспользовавшись стилями. Для этого к кнопке добавляют атрибут background, а также параметры шрифта, в частности цвет текста (пример 4).
Пример 4. Создание и вид кнопки (рис. 12.3).
Рис. 12.3. Вид кнопки в браузере |
|
<html> |
|
<head> |
|
<style type="text/css"> |
|
.colorButton{ |
|
background: green; |
/* Цвет самой кнопки*/ |
color: red; |
/* Цвет текста на кнопке*/ |
font-family: Tahoma, sans-serif; |
/* Тип шрифта */ |
font-size: 15 px; |
/* Размер текста*/ |
}
</style>
</head>
<body>
<FORM action="..." method="post">
<input type="button" class="colorButton" value="Зеленая кнопка"> </FORM>
</body>
</html>
При добавлении стилей вид кнопки отображается одинаково в разных браузерах. Кроме однотонного цвета на кнопке можно использовать и фоновый рисунок, это позволит сделать заливку кнопки градиентом (пример 5).
137
Пример 5. Фоновый рисунок для кнопки (рис. 12.4).
Рис. 12.4. Вид кнопки с фоновым рисунком в браузере
<html>
<head>
<body>
<FORM action="..." method="post">
<input type="button" style="background: url(/images/bgbutton.gif)" value="Кнопка с фоном">
</FORM>
</body>
</html>
Используя CSS можно оформлять переключатели. Допустимо устанавливать рамку вокруг каждого переключателя, менять цвет фона под ним, а также изменять расстояние между самими элементами и текстом рядом с ними.
Пример 6. Создание переключателей (рис. 12.5).
Рис. 12.5. Отображение переключателей в браузере
<html> |
|
<head> |
|
<style type="text/css"> |
|
.radiobutton{ |
|
background: green; |
/* Цвет маркера*/ |
color: red; |
/* Цвет фона под переключателем*/ |
border: 1 px dashed black; |
/* Параметры рамки */ |
138
margin: 2px; |
/* Отступы вокруг элемента*/ |
}
</style>
</head>
<body>
<FORM action="..." method="post"> <b>Ваш пол:</b><br>
<input name="Пол" type="radio" class="radiobutton">Мужской<br> <input name="Пол" type="radio" class="radiobutton">Женский<br> <p>
<input type="submit" value="Выбрать"> </p>
</FORM>
</body>
</html>
С помощью стилей можно изменять вид и положение флажков, задавать цвет фона, параметры рамки и расстояние между флажком и текстом (пример 7).
Пример 7. Создание флажков (рис. 12.6).
Рис. 12.6. Отображение флажков в браузере
<html> |
|
<head> |
|
<style type="text/css"> |
|
.col{ |
|
background: green; |
/* Цвет маркера*/ |
color: red; |
/* Цвет фона под переключателем*/ |
border: 1 px solid black; |
/* Параметры рамки */ |
margin-right: 7px; |
/* Отступы вокруг элемента*/ |
} |
|
</style> |
|
</head> |
|
139
<body>
<FORM action="..." method="post"> <b>Ваши интересы:</b><br>
<input class="col" type="checkbox" name="Interests1" value="Sports"> Спорт <br> <input class="col" type="checkbox" name="Interests2" value="Art"> Искусство <br>
<input class="col" type="checkbox" name="Interests3" value="Science"> Наука <br>
<p>
<input type="submit" value="Отправить"> </p>
</FORM>
</body>
</html>
Браузеры совершенно по-разному отображают флажки, вид которых управляется через CSS.
2. Сложные формы
При создании сложной формы возникает необходимость в разделении логических блоков друг от друга. Этого можно добиться, применяя внутри тега FORM сочетания тегов и стилей. Элементы формы можно выделить, если использовать для них фоновый цвет и рамку, задавая их через CSS или другой подход, который состоит в применении тега FIELDSET. Этот контейнер группирует элементы формы, отображая вокруг них рамку. Чтобы добавить к рамке специальный заголовок, применяется контейнер LEGEND, который должен располагаться в теге FIELDSET. Внутри тега LEGEND допустимо использовать текст и теги форматирования, а также стили (пример 1).
Пример 1. Группировка элементов формы (рис. 12.7). <html>
<body>
<FORM action="..." method="post"> <fieldset>
<legend style="font-weight: bold">Интересы</legend>
<input type="checkbox" name="Interests1" value="Sports"> Спорт <br>
140
<input type="checkbox" name="Interests2" value="Art"> Искусство <br> <input type="checkbox" name="Interests3" value="Science"> Наука <br> </fieldset>
</FORM>
</body>
</html>
Рис. 12.7. Группировка элементов формы в браузере
С помощью стилей можно также задать отступы вокруг текста и цвет заголовка (пример 2).
Пример 2. Задание отступов и цвета заголовка (рис. 12.8).
Рис. 12.8. Задание отступов и цвета заголовка
<html>
<body>
<FORM action="..." method="post"> <fieldset style="padding: 10 px">
<legend style="color: red">Интересы</legend>
<input type="checkbox" name="Interests1" value="Sports"> Спорт <br> <input type="checkbox" name="Interests2" value="Art"> Искусство <br> <input type="checkbox" name="Interests3" value="Science"> Наука <br> </fieldset>
141