Створення поля введення пароля.

Фрейми

Фрейми дозволяють розбити вікно проглядання браузера на декілька прямокутних підобластей, розташованих одна поряд з одною. У кожну з підобластей можна завантажити окремий HTML-документ, перегляд якого здійснюється незалежно від інших. Між фреймами, також як і між окремими вікнами браузера, при необхідності можна організувати взаємодію, яка полягає в тому, що вибір посилання в одному з фреймів може привести до завантаження потрібного документа в інший фрейм або вікно браузера.

Вибір фреймової структури відображення інформації на WWW виправданий в наступних випадках:

1) при необхідності організувати управління завантаженням документів в одну з підобластей вікна перегляду браузера при роботі в іншій підобласті;

2) для розташування у визначеному місці вікна перегляду інформації, яка повинна постійно знаходитися на екрані незалежно від змісту інших підобластей екрану;

3) для представлення інформації, яку зручно розташувати в декількох суміжних підобластях вікна, кожна з яких може бути видимим незалежно.

Вводячи тег <FRAME>, дизайнер НТМL-сторінки розділяє екран браузера на частини. В результаті людина, що проглядає сторінку, може вивчати тільки однієї її частина, незалежно від решти вмісту. Фактично браузер, що розпізнає фрейми, завантажує різні сторінки в різні секції, або фрейми, екрану. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксований у верхній частині екрану, тоді як решту частини сторінки користувач перегортує звичайним способом. Можна розташувати збоку кнопки навігації, які не переміщуються, коли читач клацає по ним мишкою, так що змінюється тільки частина екрану, а сама смужка навігації залишається нерухомою.

Кожне підвікно, або фрейм, може мати наступні властивості:

Кожен фрейм має свій URL, що дозволяє завантажувати його незалежно від інших фреймів
Кожен фрейм має власне ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейма.
Розмір фрейма може бути змінений користувачем прямо на екрані за допомогою миші (якщо не це заборонено вказівкою спеціального параметра).

Дані властивості фреймів дозволяють створювати просунуті інтерфейсні рішення, такі як:

1) Розміщення статичної інформації, яку автор вважає за необхідне постійно показувати користувачу, в одному статичному фрейме. Це може бути графічний логотип фірми, copyright, набір кнопок керування.

2) Розміщення в статичному фреймі змісту всіх або частини WEB-документів, що містяться на WEB-сервері, що дозволяє користувачу швидко знаходити інформацію, що його цікавить.

3) Створювати вікна результатів запитів, коли в одному фреймі знаходиться власне запит, а в іншому результати запиту.

4) Створювати форми типу "майстер-деталь" для WEB-додатків, обслуговуючих бази даних.

Наведемо простий приклад використання фреймів:

<HTML>

</FRAMESET>

</FRAMESET>

</HTML>

Проте, фрейм-документ є специфічним видом HTML-документа, оскільки не містить елементу BODY і якого-небудь інформаційного навантаження відповідно. Він описує тільки фрейми, які міститимуть інформацію.

Тег <FRAMESET>

Фрейми визначаються в структурі, званій FRAMESET, яка використовується для сторінок, що містять фрейми, замість розділу BODY звичайного документа. Web-сторінки, складені з фреймів, не можуть містити розділ BODY в своєму HTML-коді. У свою чергу, сторінки з розділом BODY не можуть використовувати фрейми.

Контейнер з тегів <FRAMESET> і </FRAMESET> обрамляє кожен блок визначень фрейма. Всередині контейнера <FRAMESET> можуть міститися тільки теги<FRAME> і вкладені теги <FRAMESET>.

Тег <FRAMESET> має два параметри: ROWS (рядки) і COLS (стовпці) і записується в наступному вигляді:

<FRAMESET ROWS="список значень" COLS="список значений">

Можна визначити значення для ROWS або COLS, або обох разом. Необхідно визначити, щонайменше, два значення хоч би одного з цих параметрів. Якщо інший параметр опущений, то його значення приймається рівним 100%.

Порада: Якщо в тегу <FRAMESET> визначено тільки одне значення для ROWS і COLS, то цей тег вважатиметься помилковим і браузер проігнорує його. Іншими словами, не можна визначити <FRAMESET>, що складається тільки з одного фрейма.

Список значень параметрів ROWS і COLS тега <FRAMESET> є розділеним комами списком значень, які можуть задаватися в пікселах, у відсотках або у відносних одиницях. Число рядків або стовпців визначається числом значень у відповідному списку.

Спосіб розбиття фреймової області можна задати одним з наступних способів:

1) абсолютних зачениях в пікселах: <FRAMESET ROWS="100,240,140">

2) відсотках або відносних одиницях: <FRAMESET ROWS="25%,50%,25%">

3) у відносних одиницях: <FRAMESET COLS="*,2*,3*">

Зірочка (*) використовується для пропорційного ділення простору. Кожна зірочка є однією частиною цілого. Складаючи всі значення чисел, що стоять біля зірочок (якщо число опущене, то мається на увазі одиниця), одержимо знаменник дробу. В даному прикладі перший стовпець займе 1/6 частину від загальної ширини вікна, другий стовпець - 2/6 (або 1/3), а останній — 3/6 (або 1/2).

Числове значення без яких-небудь символів визначає абсолютне число пікселів для рядка або колонки. Значення із знаком відсотка (%) визначає частку від загальної ширини (для COLS) або висоти (для ROWS) від вікна перегляду, а значення із зірочкою (*) задає пропорційний розподіл простору, що залишився.

Наведемо приклад, що використовує всі три варіанти завдання значень:

<FRAMESET COLS="100,25%,*,2*">.

В даному прикладі перший стовпець матиме ширину 100 пікселів. Другий стовпець займе 25 відсотків від всієї ширини вікна перегляду, третій стовпець - 1/3 простору, що залишився, і, нарешті, останній стовпець - 2/3.

Абсолютні значення рекомендується призначати першими по порядку зліва направо. За ними слідують процентні значення від загального розміру простору. На закінчення записуються значення, що визначають пропорційне розбиття простору, що залишився.

Якщо використовується тег <FRAMESET>, у якому задані значення і COLS, і ROWS, то буде створена сітка з фреймів. Наприклад:

<FRAMESET ROWS="*,2*,*" COLS="2*, *">

Цей рядок HTML-коду створює сітку фреймів з трьома рядками і двома стовпцями. Перша і остання рядки займають 1/4 висоти кожна, а середній рядок - половину. Перший стовпець займає 2/3 ширини, а другий - 1/3.

Тег <FRAME>

Тег <FRAME> визначає одиночний фрейм. Він повинен розташовуватися всередині пари тегів <FRAMESET> і </FRAMESET>. Цей тег не є контейнером і на відміну від <FRAMESET> не має завершуючого тега. Все визначення одиночного фрейма виконується однією строчкою HTML-коду.

Тег <FRAME> має шість параметрів: SRC, NAME, MARGINWIDTH MARGINHEIGHT, SCROLLING та NORESIZE.

<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>

SRC="url"описує URL документа, який буде відображений всередині даного фрейма. Якщо цей параметр опущений, то фрейм не буде створений, хоча місце під нього буде залишено. Більш того, деякі браузери (наприклад, Microsoft Internet Explorer версії 3 для Windows З.хх) при спробі завантаження документа в такий фрейм видадуть повідомлення про помилку і завершать роботу.

Обов'язковість завдання параметра SRC не піддається логічному поясненню, тому краще всього просто взяти до уваги цей факт. Тоді навіть за відсутності документа, який необхідно завантажувати в даний фрейм із самого початку, слідує в параметрі SRC задати ім'я якого-небудь файлу.

NAME="frame_name"Даний параметр описує ім'я фрейма. Ім'я фрейма може бути використано для визначення дії з даним фреймом з іншого HTML-документа або фрейма (як правило, з сусіднього фрейма цього ж документа). Ім'я обов'язково повинне починатися з символу. Вміст пойменованих фреймів може бути задіяне з інших документів за допомогою спеціального атрибуту TARGET.

MARGINWIDTH="value"Цей атрибут може бути використано, якщо автор документа хоче вказати величину розділових смуг між фреймами збоку. Значення value указується в пікселах і не може бути менше одиниці. За умовчанням дане значення залежить від реалізації підтримки фреймів використовуваним клієнтом браузером.

MARGINHEIGHT="value"Те ж саме, що і MARGINWIDTH, але для верхніх і нижніх величин розділових смуг.

SCROLLING="yes | no | auto" Цей атрибут дозволяє задавати наявність смуг прокрутки у фрейма. Параметр yes указує, що смуги прокрутки будуть у будь-якому випадку присутні у фрейма, параметр no навпаки, що смуг прокрутки не буде. Auto визначає наявність смуг прокрутки тільки при їх необхідності (значення за умовчанням).

NORESIZEДаний атрибут дозволяє створювати фрейми без можливості зміни розмірів. По замовчанню, розмір фрейма можна змінити за допомогою миші так само просто, як і розмір вікна Windows. NORESIZE відміняє дану можливість. Якщо у одного фрейма встановлений атрибут NORESIZE, то у сусідніх фреймів теж не може бути змінений розмір із сторони даного.

<NOFRAMES>Даний тег використовується у випадку, якщо ви створюєте документ, який може бути видимим як браузерами, що підтримують фрейми, так і браузерами, їх що не підтримують. Даний тег поміщується всередині контейнера FRAMESET, а все, що знаходиться всередині тегів <NOFRAMES> і </NOFRAMES> ігнорується браузерами, що підтримують фрейми.

Наведемо приклад створення регулярної прямокутної сітки фреймів:

<HTML>

<HEAD>

</HEAD>

</FRAMESET>

</HTML>

Цей приклад створює сітку фреймів з двома рядками і трьома стовпцями. Оскільки визначений набір з шести фреймів, необхідно також дати шість визначень окремих фреймів <FRAME>. Зверніть увагу, що визначення фреймів даються порядково. Тобто перший тег <FRAME> визначає вміст першої колонки в першому рядку, другий - другої колонки, а третій закінчує визначення даних для останньої колонки першого рядка. Останні три фрейми потім заповнюють стовпці другого рядка.

Відмітимо також, що сума значень відсотків в параметрі COLS рівна не 100, а тільки 90 відсотків. У цьому немає нічого страшного, оскільки браузер автоматично пропорційно змінить ширину колонок, щоб ліквідовувати цю суперечність.

3.2. Організація взаємодії між фреймами.

Взаємодія між фреймами полягає в можливості завантаження документів у вибраний фрейм за командами з іншого фрейма. Для цієї мети використовується параметр TARGET тега <a>. Даний параметр визначає ім'я фрейма або вікна браузера, в яке завантажуватиметься документ, на який вказує дане посилання. По замовчанню за відсутності параметра TARGET документ завантажується в поточний фрейм (або вікно). Це замовчання може бути змінено завданням тега <BASE> з потрібним значенням параметра TARGET. Завдання імені фрейма, в який здійснюється завантаження по замовчанню, дуже зручно для тих випадків, коли велика кількість посилань повинна направляти документи в певний фрейм.

Імена фреймів повинні починатися з латинської букви або цифри. Як ім'я може задаватися ім'я існуючого вікна або фрейма, а може указуватися нове ім'я, під яким буде відкрите нове вікно.

Існує 4 зарезервовані імені, при завданні яких виконуються спеціальні дії. Ці імена починаються з символу підкреслення (_):"_blank", "_self", "_parent" і "_top". Будь-яке інше ім'я, "підкреслення", що починається з символу, неприпустимо.

TARGET="_blank" - забезпечує завантаження документа в нове вікно. Це вікно не матиме імені, а отже, в нього неможливо буде завантажити інший документ.

TARGET="_self" - завантаження документа буде проведене в поточний фрейм (або вікно). Такий запис слід використовувати для обходу замовчання, заданого ТЕГОМ <BASE>.

TARGET="_top" - викликає завантаження документа в повне вікно. Якщо документ вже розташовується в повному вікні, то дане значення діє так само, як "_self".

TARGET="_parent" - викликає завантаження документа в область, займану фреймом-батьком поточного фрейма. За відсутності фрейма-батька дане значення параметра діє так само, як "top".

3.3. Плаваючі фрейми

Браузер Microsoft Internet Explorer дозволяє використовувати унікальний тег <IFRAME>, який реалізує концепцію плаваючих фреймів. На відміну від звичайних фреймів опис плаваючих фреймів може зустрічатися в тексті звичайного HTML-документа. Браузери, що не підтримують тег <IFRAME>, замість фрейма відображатимуть будь-яку інформацію, записану <IFRAME> і </IFRAME>. У тегу <IFRAME> застосовуються такі самі параметри, як і в тегу опису звичайних фреймів <FRAME>. Єдиним виключенням є параметр NORESIZE, застосування якого безглуздо, оскільки розмір плаваючих фреймів у будь-якому випадку не може бути змінений користувачем протягом перегляду документа.

<HTML><HEAD><ТIТLЕ>Приклад використання плаваючих фреймів</TITLE></HEAD>

<BODY>

Ваш браузер не дозволяє відображати плаваючі фрейми

</IFRAME>

Контент документа.

</BODY></HTML>

Браузери, що не підтримують концепцію плаваючих фреймів, для даного прикладу замість відображення вмісту документа float.htm видадуть текст "Ваш браузер не дозволяє відображати плаваючі фрейми".

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

Порада. Зараз застосування плаваючих фреймів обмежується єдиним браузером - Microsoft Internet Explorer версії 3.0 і вище. Слід пам'ятати, що користувачі інших браузерів (зокрема, Netscape) не зможуть побачити вмісту плаваючих фреймів.

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

Опишіть теги та параметри, що використовуються при створенні таблиць. Наведіть відповідний приклад.
Які ви знаєте теги вирівнювання та структурування даних в таблицях, котрі відображаються тільки в Microsoft Internet Explorer? Дайте детальний їх опис.
Опишіть взаємодію типу «запит/відповідь» між Web-браузером і Web-сервером.
Намалюйте схему, з описом подій обробки HTML-форми і місця, де вони відбуваються.
Які елементи HTML-форм ви знаєте? Наведіть приклади.
Проілюструйте на прикладі створення клавіш швидкого доступу для більш зручної навігації по HTML-формі.
Наведіть приклад блокування/розблокування елементів HTML-форм.
Скажіть, в яких випадках краще використати фрейми в дизайні Web-вузла?
Опишіть теги <FRAMESET> та <FRAME> з параметрами та значеннями, що можуть приймати ці параметри. Наведіть певний приклад.
Що таке „плаваючий” фрейм? Коли слід уникати його використання?

Додаток 1. Створення елементів HTML-форм.

Створення на формі однорядкового поля введення.

<input type=”text” name=”firstname” size=”10”>

Кожен дескриптор <input> однорядкового поля введення тексту містить наступні атрибути:

type. Встановлює тип "text", який указує Web-браузеру, що даний елемент форми є однорядковим полем введення тексту.

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

name. Використовується для ідентифікації поля введення тексту. Значення атрибуту name може застосовуватися для посилання на значення поля введення в сценарії, запущеному в середовищі Web-браузера. Значення атрибуту name спільно із значенням поля введення тексту передається Web-серверу при натисненні відвідувачем кнопки Submit.

size. Довжина поля введення тексту в символах.

value. Указує, що браузер повинен помістити в полі введення тексту при його початковій візуалізації на Web-сторінці значення, привласнене атрибуту value.

maxlength. Максимальна кількість символів, яка відвідувач може ввести в поле введення.

readonly. Якщо цей атрибут присутній, поле введення може одержувати фокус, проте, відвідувач не зможе міняти вміст поля.

disabled. Якщо цей атрибут присутній, поле введення не може одержувати фокус і відвідувач не може міняти вміст поля. Більш того, при передачі результатів форми браузер не передає Web-серверу ні імені поля, ні його значення.

tabindex. Використовується для завдання порядку обходу по клавіші табуляції, відповідно до якого елементи форми одержують фокус. Привласнюючи атрибуту tabindex елементів форми значення в зростаючому порядку, ви маєте можливість вказати браузеру, на який елемент переміщати курсор (тобто фокус) при натисненні клавіші табуляції (TAB). При кожному натисненні TAB браузер переміщатиме фокус на елемент, значення атрибуту tabindex якого більше поточного на одиницю.

accesskey.Клавіша, яку відвідувач може натиснути разом з клавішею ALT (або клавішами COMMAND або CONTROL в Macintosh-системі) для переходу (тобто переміщення фокусу) на полі введення.

<input type=”password” name=”firstname” size=”10”>

Тип, повністю аналогічний попередньому, за винятком того, що інформація, що вводиться користувачем в текстове поле, відображатиметься на екрані символами «*», щоб приховати текст від стороннього глядача.

Створення на формі багаторядкового поля введення.

Якщо потрібно, щоб відвідувач сайту міг вводити відразу декілька рядків тексту, вставте між початковим і кінцевим дескрипторами форми (<form></form>) початковий і кінцевий дескриптори текстової області (<textarea> </textarea>). Багаторядкове поле введення тексту має наступні атрибути:

rows. Кількість рядків, яка браузер повинен виводити на екрані при візуалізації багаторядкового поля введення тексту.

cols. Кількість символів, яка браузер повинен виводити на екрані в кожному рядку при візуалізації багаторядкового поля введення тексту.

id. Служить для привласнення полю введення імені. Значення атрибуту id можна використовувати для роботи з вмістом поля введення в сценарії, упровадженому на Web-сторінку.

name. Використовується для ідентифікації поля введення. Значення атрибуту name може застосовуватися для посилання на значення поля введення в сценарії, запущеному в середовищі Web-браузера. Значення атрибуту name спільно із значенням поля введення передається Web-серверу при натисненні відвідувачем кнопки Submit.

Створення на формі прапорців.

Якщо необхідно, щоб відвідувач Web-сайту володів можливістю вибирати один або декілька елементів із списку шляхом установки "галочки", розташованої біля кожного елементу, помістіть на форму дескриптор <input> і встановите значення його атрибуту type рівним "checkbox".

<input type=”checkbox” name=”WinXP” value=”On”>

Як і у випадку з іншими елементами форми, текстові написи перед і/або після прапорців на формі не є частиною HTML-коду елементу. Дескриптор <input> для прапорця може містити наступні атрибути:

type. Встановлює тип "checkbox", який указує Web-браузеру, що даний елемент форми є прапорцем.

id. Використовується для привласнення прапорцю унікального імені. Значення атрибуту id можна використовувати для роботи із станом прапорця в сценарії, упровадженому на Web-сторінку.

name. Використовується для ідентифікації прапорця. Значення атрибуту name може застосовуватися для посилання на стан прапорця в сценарії, що виконується в середовищі Web-браузера. Більш того, Web-браузер передаватиме значення атрибуту name як частину "ім'я" пари ім'я/значення при передачі результатів форми Web-серверу, якщо відвідувач встановить прапорець. Якщо відвідувач сайту не встановлює прапорець, його ім'я і значення (тобто значення, привласнене атрибуту value) серверу передаватися не будуть.

value. Рядок, який передаватиметься Web-серверу як частина "значення" пари ім'я/значення. При передачі результатів форми після натиснення кнопки Submit Web-браузер передає серверу пари ім'я/значення тільки для встановлених (тобто вибраних) прапорців.

checked. Якщо значення цього атрибуту рівне True (тобто checked="true"), Web-браузер при візуалізації прапорця відображатиме "галочку" (тобто прапорець вважається вибраним або встановленим). За умовчанням значення атрибуту checked встановлюється рівним False (тобто прапорець не встановлений або знятий), тому при написанні HTML-коду для невстановленого прапорця вам не потрібно включати в дескриптор < input > атрибут checked="false".

Створення на формі перемикачів.

Якщо необхідно, щоб відвідувач сайту міг вибирати один елемент із списку елементів, створіть список елементів за допомогою дескрипторів <input>,значення атрибутів typeяких рівні "radio".

<input type=”radio” name=”WinXP” value=”On”>

Як і у випадку з іншими елементами форми, текстові написи перед і/або після перемикачів на формі не є частиною HTML-коду елементу. Дескриптор <input> для перемикача може містити наступні атрибути:

type. Встановлює тип "radio", який указує Web-браузеру, що даний елемент форми є перемикачем.

id. Служить для привласнення перемикачу унікального імені. Значення атрибуту id можна використовувати для роботи із станом перемикача в сценарії, впровадженому на Web-сторінку.

name. Використовується для ідентифікації групи перемикачів. При передачі результатів форми Web-серверу після натиснення відвідувачем кнопки Submit Web-браузер передаватиме ім'я групи перемикачів і значення встановленого перемикача у вигляді пари ім'я/значення. Якщо відвідувач сайту не встановив жоден перемикач в групі перемикачів (визначуваної ім'ям групи), при передачі результатів форми Web-серверу браузер не передаватиме для даної групи пару ім'я/значення.

value. Рядок, який передаватиметься Web-серверу як частина "значення" пари ім'я/значення, якщо відвідувач встановив перемикач. Web-браузер при натисненні кнопки Submit передає серверу тільки значення атрибутів name і value (тобто пару ім'я/значення) для кожної групи перемикачів.

checked. Включаючи атрибут checked в дескриптор <input> для перемикача, ви указуєте Web-браузеру при візуалізації форми (і при натисненні кнопки Reset) зображати перемикач вибраним. Якщо у декількох перемикачів буде однакове ім'я – то браузер сприймає їх як групу і дозволяє вибрати тільки один з перемикачів.

Створення на формі випадаючого списку (меню вибору).

Якщо необхідно, щоб відвідувач сайту міг вибирати один або декілька елементів з випадаючого списку елементів, помістіть на форму список елементів між початковим і кінцевим дескрипторами <select></select>.

</select>

Як і раніше, текстовий напис, який описує призначення випадаючого списку Дескриптор <select>випадного списку може містити наступні атрибути:

size. Кількість пунктів меню (або опцій), одночасно видимих на екрані. Якщо наприклад, size="1", тов списку до натиснення кнопки розкриття в правій частині елементу на екрані буде видно всього один пункт. Якщо значення атрибуту size перевищує одиницю, Web-браузер візуалізуватиме випадний список у вигляді списку елементів (із смугою прокрутки, якщо це необхідно), а не у вигляді випадного списку з кнопкою розкриття.

id. Використовується для привласнення випадному списку унікального імені. Значення атрибуту id можна використовувати для роботи з вибраним в списку елементом в рамках упровадженого на Web-сторінку сценарію.

name. Використовується для ідентифікації випадаючого списку на формі. Значення атрибуту name можна використовувати для роботи з вибраним в списку елементом в середовищі сценарію, що виконується Web-браузером. Більш того, Web-браузер передаватиме Web-серверу значення атрибуту name як частина "ім'я" пари ім'я/значення для кожного вибраного відвідувачем елементу списку.

multiple. Якщо в дескрипторі <select>випадного списку присутній атрибут multiple, Web-браузер дозволить відвідувачу сайту вибирати в списку декілька елементів. Інакше при виборі нового елементу Web-браузер автоматично зніматиме виділення з попереднього елементу (якщо такий існує).

Тег <OPTION>

Для вставки елементу у випадний список необхідно помістити текст елементу між початковим і кінцевим дескрипторами опцій (<option> </option>), які, у свою чергу, знаходяться між початковим і кінцевим дескрипторами списку (<select></select>).Дескриптор <option> має наступні атрибути:

value. Рядок, який передаватиметься Web-серверу як частина "значення" пари ім'я/значення, якщо відвідувач вибрав елемент випадаючого списку (або списку вибору). При натисненні кнопки Submit Web-браузер передає тільки значення атрибутів name (випадного списку) і value (опції), тобто пару ім'я/значення для вибраного елементу (або елементів) списку. Якщо дескриптор <option> не містить атрибуту value, Web-браузер як частина "значення" пари ім'я/значення передає серверу текст вибраного елементу (який знаходиться між початковим кінцевим дескрипторами <option></option>).

selected. Указуючи атрибут selected в дескрипторі <option>, ви говорите Web-браузеру при початковій візуалізації форми з випадним списком і після натиснення кнопки Reset вибирати відповідний даному дескриптору <option> елемент як елемент за умовчанням. Web-браузер виділяє вибраний у випадному списку елемент (або елементи) шляхом його (їх) підсвічування. Якщо в дескрипторі <select>не вказаний атрибут multiple, відвідувач може вибирати в списку тільки один елемент. У такому разі при виборі нового елементу Web-браузер автоматично зніматиме виділення з раніше вибраного елементу. Щоб дозволити відвідувачу сайту одночасно вибирати декілька елементів випадного списку, включіть в дескриптор <select>списку атрибут multiple. Більш того, при забезпеченні можливості вибору декількох елементів випадного списку бажано привести текст, наприклад, "виберіть всі потрібні опції" та "для вибору декількох елементів утримуйте натиснутою клавішу Ctrl". (Навіть якщо вибір декількох елементів із списку і дозволений, без утримання в натиснутому стані клавіші Ctrl Web-браузер при виборі нового елементу зніматиме виділення з раніше вибраного елементу.)

Створення кнопки на формі.

<input type=”button” value=”Test”>

Відображає звичайну кнопку натиснення на яку приводить до якої-небудь дії сервера. За допомогою атрибуту NAME даному елементу привласнюється унікальне ім'я, атрибут VALUE дозволяє змінювати напис, що відображається на кнопці.

Створення кнопки відправки даних з форми.

<input type=”Submit” value=”Test”>

Визначає кнопку, після натиснення якої дані з форми передаються серверу. Так само як і у попередньому випадку, напис, що відображається на кнопці, задається атрибутом VALUE.

Створення кнопки очищення даних на формі.

<input type=”button” value=”Test”>

Створює кнопку, яка очищає неправильно заповнену текстову форму. Параметри і значення цієї кнопки не передаються на сервер разом з іншими даними форми. Приклад використання:

Створення кнопки для передачі файлів.

<input type=”file” NAME="picture">

Генерує на екрані кнопку, після натиснення на яку на екрані з'являється Провідник Windows, що дозволяє приєднати до посланих на сервер даних будь-який файл з локального комп'ютера користувача. Даний елемент застосовується в основному у формах відправки з сервера повідомлень електронної пошти для організації вкладень, а також для завантаження зображень на сервер. Звичайно поряд з кнопкою відображається невелике текстове поле, куди автоматично заноситься ім'я посиланого файлу і шлях до нього на локальному диску.

Створення кнопки відсилання, але з використанням графічного зображення.

<INPUT TYPE="IMAGE" SRC="/images/button.giГ ALIGN="BOTTOM" NAME="submit" VALUE="Відправити">

Створює кнопку відсилання, аналогічну елементу SUBMIT, але з використанням графічного зображення, створеного користувачем. Звичайно застосовується у випадках, коли стандартна сіра прямокутна кнопка «не вписується» в дизайн сайту. URL до зображення, що грає роль кнопки, указується атрибутом SRC, причому сам елемент може містити власні атрибути, аналогічні вживаним в теге <IMG>, зокрема ALIGN, ALT і ін. Атрибути NAME і VALUE трактуються так само, як аналогічні атрибути елементу SUBMIT.

Створення прихованих полів форми.

<INPUT TYPE="HIDDEN" NAME="forml" VALUE="c3576-236-2113">

Даний елемент є прихованим і не відображається на екрані монітора користувача. Застосовується він для зберігання і передачі на сервер інформації про поточний стан форми: при натисненні кнопки SUBMIT елемент HIDDEN сформує логічну пару змінних типу «ім.’я=значення», які будуть відіслані серверу за допомогою протоколу HTTP. Елементи HIDDEN служать доступною альтернативою файлам cookies - спеціальним файлам, в яких зберігаються індивідуальні настройки користувача і що дозволяє, наприклад, відновити останній стан форми при повторних відвідинах користувачем сторінки, що містить цю форму.

5rik.ru

Материалы для учебы и работы

Створення поля введення пароля.