Мова HTML Уроки 9 10 Актуалізація опорних

Мова HTML Уроки 9, 10

Актуалізація опорних знань Усне опитування 1. 2. 3. 4. 5. Що таке фрейм? Як задають фрейми? Як розбити сторінку на вертикальні ділянки? Як розбити сторінку на горизонтальні ділянки? Як для останньої ділянки не вводити значення розміру?

Актуалізація опорних знань Усне опитування 6. 7. 8. Які є способи встановлення значення розміру ділянки вводу фрейму? Як підключити документ на сторінку? Як задати “ім'я” створеної області?

Інтерактивні Web-сторінки є інтерактивними по своїй природі, тому що вони використовують гіперпосилання. Але це пасивна інтерактивність, яка жорстко задана в рамках структури Webвузла. Інтерактивність, яка дозволяє отримувати відвідувачів Web-сторінки довільні дані, досягається шляхом використання форм.

Інтерактивні Web-сторінки Форми на Web-сторінці це набір полів, які можна також розглядати як елементи керування Відвідувач у процесі роботи з Web-сторінкою заповнює форму, після чого відправляє її Далі дані, що надійшли, за звичай передають спеціальній програмі, яка має призначення для їх обробки (програмі або сценарію CGI)

Створення форми Форма – це блочний елемент, який описують тегом

Атрибути тега : l l l l METHOD – визначає спосіб передачі даних користувача Значення ”GET” вказує, що дані будуть передані програмі або сценарію CGI; Значення ”POST” вказує, що дані будуть відправлені по пошті ACTION – адреса URL програми, або адреса електронної пошти (з вказівкою протоколу mailto: ) ENCTYPE – значення якого визначає тип МІМЕ якщо атрибут не заданий то браузер встановлює його в режимі замовчування, ENСTYPE = application/x-www-form-urlencoded; вручну краще використовувати тип text/plain

Створення форми В середині форми розташовують поля форми. Їх задають при допомозі різних тегів Далі теги, які використовують частіше всього: l – непарний тег, що дозволяє створювати різні елементи керування, у тому числі текстові поля та командні кнопки l – парний тег для визначення текстових областей l<SELECT> – парний тег для створення звичайних та списків, що розкриваються l окремі пункти задають за допомогою парного тегу <OPTION>, який можна використовувати тільки в середені даного елементу l тег </OPTION> можна опускати </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибут TYPE= тега <INPUT>: l l l l TEXT– створити текстове поле PASSWORD –" src="https://present5.com/presentation/62529762_174147398/image-9.jpg" alt="Атрибут TYPE= тега <INPUT>: l l l l TEXT– створити текстове поле PASSWORD –" /> Атрибут TYPE= тега <INPUT>: l l l l TEXT– створити текстове поле PASSWORD – створення текстового поля для введення паролю інформація не відображається CHECKBOX – створюється прапорець Може бути встановленим або скинутим RADIO – створюється перемикач з групи перемикачів може бути увімкненим тільки один </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Атрибути тега <INPUT>: l l SUBMIT – створює “кнопку відправлення форми” IMAGE – створення" src="https://present5.com/presentation/62529762_174147398/image-10.jpg" alt="Атрибути тега <INPUT>: l l SUBMIT – створює “кнопку відправлення форми” IMAGE – створення" /> Атрибути тега <INPUT>: l l SUBMIT – створює “кнопку відправлення форми” IMAGE – створення графічної кнопки відправлення RESET – створюється кнопка очищення форми клацання по кнопці повертає форму у первинний стан </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Організація передачі даних Дані введені у форму передаються таким чином Кожен тег повинен мати" src="https://present5.com/presentation/62529762_174147398/image-11.jpg" alt="Організація передачі даних Дані введені у форму передаються таким чином Кожен тег повинен мати" /> Організація передачі даних Дані введені у форму передаються таким чином Кожен тег повинен мати атрибути: l NAME= l визначає ім'я поля форми l. VALUE= l l l визначає значення поля для елемента SELECT відповідає вмісту вибраного елемента OPTION всі перемикачі повинні мати одне значення атрибуту NAME та різні значення атрибуту VALUE </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Приклад форми <html> <head> <title>Пример Формы</title> </head> <body bgcolor="#ff 00 ff" text="#000000"> <h 1>" src="https://present5.com/presentation/62529762_174147398/image-12.jpg" alt="Приклад форми <html> <head> <title>Пример Формы</title> </head> <body bgcolor="#ff 00 ff" text="#000000"> <h 1>" /> Приклад форми <html> <head> <title>Пример Формы</title> </head> <body bgcolor="#ff 00 ff" text="#000000"> <h 1> Форма для приветов</h 1> <form> <pre> <!--><input type=hidden name=Hidden. Text value="Это скрытый текст"<--> Фамилия <input type=text name= Fname size=30 maxlength=30> Имя <input type=text name= Name size=30 maxlength=30> Пароль <input type=password name= Psw size=30 maxlength=30> Оценка <input type=text name= Mark size=10 maxlength=10> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Приклад форми Тип <select name=Mark. Type size=1> <option selected>12 <option>11 <option>10 <option>9 <option>8 <option>7" src="https://present5.com/presentation/62529762_174147398/image-13.jpg" alt="Приклад форми Тип <select name=Mark. Type size=1> <option selected>12 <option>11 <option>10 <option>9 <option>8 <option>7" /> Приклад форми Тип <select name=Mark. Type size=1> <option selected>12 <option>11 <option>10 <option>9 <option>8 <option>7 <option>6 <option>5 <option>4 <option>3 <option>2 <option>1 <option>0 </select> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Приклад форми Уровень <input type=radio name=ur value=h> Высокий <input type=radio name=ur value=d checked> Достаточный" src="https://present5.com/presentation/62529762_174147398/image-14.jpg" alt="Приклад форми Уровень <input type=radio name=ur value=h> Высокий <input type=radio name=ur value=d checked> Достаточный" /> Приклад форми Уровень <input type=radio name=ur value=h> Высокий <input type=radio name=ur value=d checked> Достаточный <input type=radio name=ur value=m> Средний <input type=radio name=ur value=s> Низкий Подтвердить <input type=checkbox name=reseip value=Yes> Дополнительная информация: <textarea name=Instraction rows=2 cols=60>

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

Домашнє завдання Створити сторінку для відвідувачів і підключити її до сайту про себе.