OPTGROUP необхідний - для використання в ієрархічному меню 

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

OPTGROUP необхідний - для використання в ієрархічному меню

⇐ ПредыдущаяСтр 22 из 33Следующая ⇒


<!ELEMENT OPTGROUP - - (OPTION)+ -- група опцій -->

Початковий тег: необхідний, Кінцевий тег: необхідний

Визначення атрибуту елементу OPTGROUP - визначає лейбл для групи опцій.

Примітка. Елементи OPTGROUP можуть бути вкладеними. Це дозволить авторам визначати можливість складнішого вибору.

Приклад:

<body>

<form>

<select name="year">

<optgroup label="2007">

<option value="a1" label="холода">зима </option>

<optgroup label="зима" >

<option value="a21" label="тепло" >декабрь</option>

<option value="a31" label="жарко">январь</option>

<option value="a41" label="прохладно">февраль</option>

</optgroup>

<optgroup label="весна" >

<option value="a2" label="тепло">март</option>

<option value="a3" label="жарко">апрель </option>

<option value="a4" label="прохладно">май</option>

</optgroup>

<option value="a3" label="жарко">лето </option>

<option value="a4" label="прохладно">осень</option>

</optgroup>

</select>

</form>

</body>

Зв'язування написів з перемикачами:

<input type="radio" id="a1" name="otpusk"> <label for="a1"> Na more</label>

тут

id - ім'я ідентифікатора <label> - мітка

for – ідентифікатор, що встановлює зв'язок між міткою й елементом керування.

 

Оформлення списків за допомогою властивостей стилів

<option style="background: red; color: white" value="0"> - фон та колір можна міняти в кожному елементі списку.

Групування елементів керування <fieldset>

Щоб сторінка або форма мала закінчений вигляд, елементи повинні бути розподілені по групах. Тег <FIELDSET> - групує об'єкти.

Тег <LEGEND> - вводить напис, що поміщається в розрив рамки

Наприклад

<fieldset>

<p></p>ANKETA <p></p>

<legend> FIO </legend>

familia: <input type="text" name="ank" id="f"><p></p>

imya <input type="text" name="ank" id="I">

</fieldset>

 

Завдання до лабораторної роботи

Завдання №1.

1. Створіть форму й зв'яжіть всі прапорці й перемикачі з відповідними написами.

2. Додайте до створеної форми вибірково підказки, розширте зміст форми.

Приклад форми

<FORM enctype="multipart/ form-data" action="url" method="post">

Уведіть ім'я файлу:<BR>

<INPUT type="file" name="myfile" ><BR><BR>

<INPUT type="submit" value="Послати файл"><br>

 

<h2>Меню китайського ресторану</H2>

<h3>Зробіть замовлення</h3>

<P>

<INPUT type="checkbox" id=a1 name="menu" value="shark" title="Для вибору блюда - натисніть ліву кнопку миши">

<label for="a1">Акулячі плавці </label> <br>

<INPUT type="checkbox" name="menu" value="fish">Риб'ячий шлунок <BR>

<INPUT type="checkbox" name="menu" checked value="bat"> Кажан <BR>

<INPUT type="checkbox" name="menu" value="bamboo"> Паростки бамбука <br><br>

<I>Де Ви збираєтеся провести відпустку? </I>

<P> <font face="Times New Roman, Times, serif">

<INPUT type="radio" name="rest" value="sea">

На морі <BR>

<INPUT type="radio" checked name="rest" value="mount">

B горах <BR>

<INPUT type="radio" name="rest" value="cru">

B круїзі <BR>

<INPUT type="radio" name="rest" value="abr">

B закордонної поїздки</font>

</FORM>

Завдання №2.

1. Створіть форму, HTML-код якої поданий нижче, вивчите її елементи

 

<form>

<h2 align="center" > текстові поля</h2><BR>

<label>Уведіть своє прізвище </label><BR>

<input type="text" align="middle" name="text1" value="Іванов"><BR><BR>

<label>Уведіть своє ім'я </label><BR>

<input type="text" align="middle" name="text2" value="Іван"><BR><BR>

<label>Уведіть пароль</label>

<input type="hidden" name=" e-mail" value="anri@rambler.ru"><BR><BR>

<input type="password» name="pass" maxlength="10"><br><BR>

<TEXTAREA name="recipe" cols=50 rows=4>

1.Висипте вміст кожного пакета в окрему ємність.

2.Розчините кожний компонент у невеликій кількості води.

3.Улийте один розчин в інший і долийте води до 1 літра.

</TEXTAREA> <br>

<hr>

<h2 align="center" > кнопки</h2>

<INPUT type="button" value="Пуск" name="start"> <BR><BR>

<INPUT type="submit" value= "Передача" name="trans"><BR><BR>

<INPUT type="reset" value="Повторне уведення"><BR><BR>

<input type="image" src="5.gif» align="middle" name="scr1" height="50"><BR>

<hr>

<h2>Приклади списків</h2>

<SELECT name="list1">

<OPTION value-"0">пісні

<OPTION value="l">танці

<OPTION value="2">застілля

</SELECT> - список, що розкривається,<BR><BR>

<SELECT name="list2" size=3>

<OPTION value="O">Будні

<OPTION value="l">Вихідні

<OPTION value="2">Свята

<OPTION value="3">Торжества

<OPTION value="4">Прикрості

</SELECT>

<SELECT name="prod3" size=4 multiple>

<OPTION value="O">1 курс

<OPTION value="1">2 курс

<OPTION value="2">3 курс

<OPTION value="3">4 курс

<OPTION value="4">5 курс

</SELECT> - список із множинним вибором<BR><BR>

<FIELDSET>

<LEGEND>ФИО</LEGEND>

Прізвище: <INPUT type="text" name="subj" id="surn">

Ім'я: <INPUT type="text" name="subj" id="nam">

По батькові: <INPUT type="text" name="subj" id="patr">

</FIELDSET>

<FIELDSET>

<LEGEND>Освіта</LEGEND>

<INPUT type="radio" value="yes" checked name="educ" id="ss"> Середня<br>

<INPUT type="radio" value="no" name="educ" id="hs"> Вища

</FIELDSET>

</form>

 

2. Перевірте роботу програми:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

<FORM action="http://somesite.com/prog/someprog" method="post">

 <P>

 <SELECT name="ComOS">

<OPTION selected label="none" value="none">None</OPTION>

<OPTGROUP label="PortMaster 3">

  <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>

  <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>

  <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>

</OPTGROUP>

<OPTGROUP label="PortMaster 2">

  <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>

  <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>

</OPTGROUP>

<OPTGROUP label="IRX">

  <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>

  <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>

</OPTGROUP>

 </SELECT>

</FORM>

</body>

</html>

 

3. За аналогією розробіть форму, «Електронна книгарня» з реєстрацією відвідувача, кодом доступу, можливістю вибору розділу літератури, пам'яткою по проведенню покупки й інших полів.

 

Контрольні питання

1. Який тег застосовується для організації взаємодії з користувачем (вікна введення тексту, прапорці, перемикачі, меню тощо)?

2. За допомогою яких тегів створюються кнопки у формах для інтерактивної взаємодії з користувачем?

3. За допомогою яких атрибутів задається розмір текстового вікна для введення інформації?


Лабораторна робота № 8 Аркуші стилів

Мета: отримати первинні відомості про аркуші стилів та CSS правила, опанувати основні принципи побудови аркушів стилів. Вивчити основні стильові властивості та їх значення, навчитися використовувати стильові властивості при створенні HTML-документів.

 


⇐ Предыдущая17181920212223242526Следующая ⇒

Поделиться:


Читайте также:


Где возникла философия и почему?
Относительная высота сжатой зоны бетона
Сущность проекции Гаусса-Крюгера и использование ее в геодезии
Тарифы на перевозку пассажиров


Последнее изменение этой страницы: 2020-12-09; просмотров: 98; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.17.128.129 (0.019 с.)