Материал: Опорний кнспект
3 Вкладені набори фреймів
Число рівнів вкладеності фреймів не обмежене. У наступному прикладі зовнішній елемент FRAMESET| розділяє доступний простір на три рівні стовпці. Внутрішній елемент FRAMESET| розділяє другу область на два рядки нерівної висоти.
<FRAMESET| cols=| «33%, 33%, 34%»>
.зміст першого фрейма.
<FRAMESET| rows=| «40%, 50%»>
.зміст другого фрейма, перший рядок.
.зміст другого фрейма, другий рядок.
</FRAMESET>
.зміст третього фрейма.
</FRAMESET>
У наступному прикладі документа HTML агент користувача повинен завантажувати кожен файл в окремий розділ. Вміст фрейма і його визначення не повинні знаходитися в одному документі|:
<HTML>
<HEAD> <TITLE>Документ з фреймами</TITLE> </HEAD>
<FRAMESET cols= "33%, 33%, 33%">
<FRAMESET rows= "*, 200">
<FRAME src= "Fr_1.html">
<FRAME src= "smile3.jpg">
</FRAMESET>
<FRAME src= "Fr_1.html">
<FRAME src= "Fr_3.html">
</FRAMESET>
</HTML>
Лекція 6
Тема: Форми на веб-сторінках
Мета: вивчити основны теги для створення елементів форм у HTML –документі, розглянути приклади написання кодів для різних елементів, навчитися створювати комбіновану форму.
План
1. Поняття форми
2. Елементи формі в HTML
1. Поняття форми
Форма HTML – це розділ документа, в якому містяться звичайна інформація, розмітка і спеціальні елементи, звані управляючими (керуючими) елементами (прапорці, кнопки із залежною фіксацією, меню і так далі), а також мітки цих елементів. Зазвичай користувачі «заповнюють» форму, модифікуючи елементи (вводячи текст, вибираючи пункти меню і так далі), що управляють, перед тим, як надати форму агентові користувача для обробки (наприклад, на Web-сервер, на поштовий сервер і так далі)
Користувачі взаємодіють з формами за допомогою іменованих управляючих елементів.
«Ім'я елементу» задається атрибутом name. .
Кожен управляючий елемент, має початкове і поточне значення, обидва вони є символьними рядками. Інформацію про початкові значення і можливі обмеження на значення. У загальному випадку «початкове значення» елементу, що управляє, може задаватися за допомогою атрибуту value.
Проте початкове значення елементу TEXTAREA задається його вмістом, а початкове значення елементу OBJECT у формі визначається реалізацією об'єкту (тобто лежить поза областю, що розглядається в даній специфікації).
«Поточне значення» управляючого елементу, спочатку встановлюється рівним початковому значенню. Потім поточне значення може змінюватися користувачем або початкове значення управляючого елементу не змінюється. Таким чином при скиданні форми кожне поточне значення встановлюється рівним початковому значенню. Якщо управляючий елемент не має початкового значення, результат скидання форми непередбачуваний.
Створення форм
У мові HTML форми застосовуються для відправки даних із сторінки на обробку в яку-небудь програму, встановлену на сервері. Користувач заповнює форму і натискає кнопку Send (відправити), обробка даних виконується спеціальною програмою (скриптом) на сервері, і ми отримуємо на адресу техпідтримки питання користувачів.
Створення форм починається з елементу <form> </form>
У елементу форми form існують два обов'язкові атрибути metod і `.
-
metod - атрибут визначає спосіб, за допомогою якого здійснюватиметься зв'язок між формою і Web сервером. Атрибут може приймати значення "get" і "post".
-
action - значенням атрибуту action є конкретна адреса скрипта, що обробляє дані. Атрибути записуються в тег <form> , наприклад так:
<form method= "get" action= "http://www.myserver.com/cgi-bin/mailscript">
У даній лекції розглядається тільки створення елементів форм, їх види. Для того, щоб форма запрацювала, її необхідно запрограмувати.
2. Елементи форми в html
Текстове поле
Для створення поля введення використовують елемент input з атрибутом type. Type може приймати різні значення. Для найпростішого поля введення тексту атрибут type матиме значення text.
<input type=text параметри>
Наприклад, html код
<form method= "get" action="/cgi-bin/handler.cgi"> <b>Зaповніть Ваші дані:</b> Ім'я: <input type=text maxlength=25 size=20> Прізвище:<input type=text maxlength=25 size=20> </form>
Можливо задавати значення параметрів
|
Параметр |
Опис |
|
size=... |
Ширина поля. |
|
maxlength=... |
Максимальна кількість символів дозволених в тексті. Якщо цей параметр опустити, то можна вводити рядок довше самого поля. |
|
name=... |
Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле. |
|
value=... |
Початковий текст містить в полі. |
|
align=... |
Вирівнювання поля. Можливі значення: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат їх використання такий самий, як і у зображень. |
Поле для пароля
Поле для пароля — звичайне текстове поле, але відрізняється тим, що всі символи показуються зірочками, щоб ніхто не підглянув пароль, що вводився.
Задається кодом
<input type=password параметри>
Наприклад:
<form method= "get" action="/cgi-bin/handler.cgi"> <b>Логин: </b>
<input type=text maxlength=25 size=20 name="text"> <b>Пароль:</b>
<input type=password maxlength=15 size=20 name="pass"> </form>
Спробуйте ввести в поля "Логін" і "Пароль" дані.
Багаторядковий текст
Для можливості введення в полі декілька рядків тексту використовуємо тег textarea. Наприклад:
<form method= "get" action="/cgi-bin/handler.cgi"> <b>Введіть ваш відгук: </b> <textarea rows=10 cols=45></textarea> </form>
Цей код на сторіночці можна побачити у вигляді поля, в яке можна ввести великий текст.
Для тега textarea використовуються наступні параметри:
|
Параметр |
Опис |
|
name=... |
Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле. |
|
cols=... |
Кількість стовпців тексту. |
|
rows=... |
Число рядків тексту. |
|
value=... |
Значення поля визначає, що буде відправлене на сервер. |
|
wrap=... |
Параметри перенесення рядків. Можливі значення: off— відключає перенесення рядків; virtuals — показує перенесення рядків, але відправляє текст як він введений; physical — перенесення рядків вставляються де вказано і у такому вигляді текст відправляється. |
Кнопки
Кнопка — це елемент інтерфейсу, на який потрібно натискати.
Використовуваний type=button, "button" переводиться як "кнопка".
<input type=button параметри>
Код html
<form method= "get" action="/cgi-bin/handler.cgi"> <p align=center>
<input type=button name=press value=" Натисни мене"> </form>
Для кнопок використовуються наступні параметри:
|
Параметр |
Опис |
|
name=... |
Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле. |
|
value=... |
Напис на кнопці, а також її значення. |
|
align=... |
Вирівнювання поля. Можливі значення: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат їх використання такий самий, як і у зображень. |
Кнопка submit
При натисненні на кнопку SUBMIT дані форми відправляються на сервер і обробляються програмою, вказаною параметром action тега form. Використовуваний type=submit Наприклад
<tr><td> <form action="/cgi-bin/handler.cgi"> <p><input type=submit value="Отправить дані">
На сторінці ми побачимо наступне:
Кнопка reset
При натисненні на цю кнопку, дані форми повертаються в первинне значення. Використовуваний type=reset
Приклад коди
<form action="/cgi-bin/handler.cgi"> <input type=text width=20> <input type=reset value="Скинути дані"> </form>
Відображення на сторіночці
Спробуйте вписати дані і скинути їх!