Інтерактивні web-сторінки

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

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

Форма - це блоковий елемент, описуваний парним тегом

.Теги, що задають поля форми, можна використовувати тільки всередині цього елемента. Хто відкриває тег визначає спосіб обробки форми за допомогою декількох атрибутів. Атрибут METHOD = визначає спосіб передачі представлених користувачем даних.

Мал. 7. Приклад форми Web-сторінки

Усередині елемента форми розташовуються поля форми. Вони задаються за допомогою різних тегів. Ось ті, які використовуються найчастіше.

• Непарний тег дозволяє створювати різні елементи управління, в тому числі текстові поля і командні кнопки.

• Парний тег визначає текстові області.</p> <p>• Парний тег <SELECT> дозволяє створювати звичайні та розкривних списків. Окремі пункти задаються за допомогою парного тега <OPTION>, який допустимо тільки всередині даного елемента (закриває тег </OPTION> можна опускати).</p><p>тег <INPUT> повинен містити обов'язковий атрибут TYPE =, що визначає конкретний тип елемента управління. Ось основні можливі значення цього атрибута:</p> <p>• "TEXT" - створюється текстове поле;</p> <p>• "PASSWD" - створюється текстове поле, але інформація, що вводиться не відображається на екрані ( «текстове поле для введення пароля»);</p> <p>• "CHECKBOX" - створюється прапорець, який може бути встановлений або скинутий</p> <p>• "RADIO" - створюється перемикач (з групи перемикачів може бути включений тільки один);</p> <p>• "SUBMIT" - створюється кнопка відправки форми; IMAGE "- створюється графічна кнопка відправки;</p> <p>• "RESET" - створюється кнопка очищення форми, клацання на якій повертає форму до її вихідного стану.</p> <p>Організація передачі даних, введених в форму, здійснюється наступним чином. Кожен з тегів, які задають поля форми, повинен мати атрибути NAME = і VALLUE. Атрибут NAME = визначає ім'я поля форми, атрибут VALUE = - значення поля. Для текстового поля і текстової області атрибут VALUE = набуває значення, відповідне вмісту цього поля, заданому користувачем. Для елемента SELECT атрибут VALUE = відповідає вмісту обраного елемента "OPTION. Всі перемикачі однієї групи повинні мати однакові значення атрибута NАМЕ = і різні значення атрибута VALUE =.</p> <p>Після клацання на кнопці відправки дані з форми передаються у вигляді пар поточних значень атрибутів NAME = і VALUE =, з'єднаних знаком рівності. Інформація про прапорці передається тільки в тому випадку, якщо він встановлений. Якщо атрибути NAME = і VALUE = визначені для використаної кнопки відправки, відповідні дані також передаються (це дозволяє включати в форму кілька кнопок відправки). Дані, що надходять в такому вигляді, зручні як для ручної, так і для автоматичної обробки.</p> <p>Створюючи форми, слід мати на увазі, що інформацію, передану по електронній пошті, не можна вважати конфіденційною. Більшість браузерів може попередити користувача про можливість стороннього доступу до інформації, що передається. Цю особливість треба враховувати як при створенні Web-сторінок, що містять форми, так і при заповненні форм на Web-сторінках, які зустрілися в Інтернеті.</p></div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/divitisja-serial-ostannij-korabel-2018-vsi-serii.html">Дивитися серіал останній корабель (2018) всі серії підряд безкоштовно на кіного</a></li> <li><a href="/articles/z-chogo-robljat-zubni-implantati.html">З чого роблять зубні імплантати</a></li> <li><a href="/articles/chi-varto-pochinati-boks-v-30-rokiv-peregljad-temi.html">Чи варто починати бокс в 30 років - перегляд теми</a></li> <li><a href="/articles/divitisja-film-vtechu-iz-zamku-koldic-onlajn.html">Дивитися фільм втечу із замку Колдіц онлайн безкоштовно в хорошій якості</a></li> <li><a href="/articles/shho-robiti-jakshho-zagubleni-pasporti-na.html">Що робити, якщо загублені паспорти на лічильники води 2019</a></li> <li><a href="/articles/poradi-po-avid-media-composer-dlja-migrantiv-z-fcp.html">Поради по avid media composer для мігрантів з fcp</a></li> <li><a href="/articles/federacija-sportivnoi-gimnastiki-pskovskoi-oblasti.html">Федерація спортивної гімнастики псковської області - загальні правила спортивної гімнастики</a></li> <li><a href="/articles/stvorennja-stavka-z-vannoju-na-dachi-svoimi-rukami.html">Створення ставка з ванною на дачі своїми руками фото і відео</a></li> <li><a href="/articles/ahmetov-m-harchovi-i-navchalno-metodichnij.html">Ахметов м, Харчові і, навчально-методичний посібник, журнал «хімія» № 28</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/jaki-problemi-chekajut-vlasnikiv-taunhausiv.html">Які проблеми чекають власників таунхаусів</a></li> <li><a href="/articles/prisnivsja-ogirok-do-chogo-ce-shho-oznachae-uvi.html">Приснився огірок до чого це, що означає уві сні огірок</a></li> <li><a href="/articles/sibirske-zdorov-ja-skargi-nechesna-kompanija.html">Сибірське здоров’я скарги - нечесна компанія, сторінка 2</a></li> <li><a href="/articles/prirechenij-na-dovichne.html">Приречений на довічне</a></li> <li><a href="/articles/znachok-veb-sajtu-ce.html">Значок веб-сайту - це</a></li> <li><a href="/articles/cholovik-odnoljub-shhastja-chi-neshhastja-pid.html">Чоловік однолюб - щастя чи нещастя під одним дахом, журнал - по-жіночому</a></li> <li><a href="/articles/istivni-gribi-foto-i-nazva-vidi-opis.html">Їстівні гриби - фото і назва, види, опис</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2026</p> <ul> <li><a href="/articles/do-pobachennja-po-anglijski.html">До побачення по-англійськи</a></li> <li><a href="/articles/ponjattja-i-vidi-pravovih-stimuliv-stimuli-i.html">Поняття і види правових стимулів - стимули і обмеження в праві</a></li> <li><a href="/articles/samohidna-vantazhnij-vizok-elektrichna.html">Самохідна вантажний візок електрична, гідравлічна та багатофункціональна</a></li> <li><a href="/articles/jak-zupiniti-shlunkovo-kishkovi-krovotechi.html">Як зупинити шлунково-кишкові кровотечі</a></li> <li><a href="/articles/morski-tatujuvannja-znachennja-foto-eskizi-1.html">Морські татуювання значення, фото, ескізи 1</a></li> </ul> </div> </footer></div> <style> #cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden} </style> <div id="cookieNoticeOverlay"> <div id="cookieNoticeBox" role="dialog" aria-modal="true"> <h2>Cookie на сайті</h2> <p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p> </div> </div> <script> (function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}} function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}} if(getAcceptedUntil()>now){return} var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return} function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')} function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')} okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return} var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})() </script></body> </html>