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

Сама форма створюється за допомогою тега

Перед відправкою даних браузер готує інформацію у вигляді пари "ім'я=значення", де ім'я визначається атрибутом name тега або іншим допустимим тегом у формі, а значення введено користувачем або встановлено в полі форми за замовчуванням. Після натискання користувачем кнопки Submit відбувається виклик обробника форми, який отримує введену у формі інформацію, а далі робить з нею те, що передбачає розробник. Як обробник форми зазвичай виступає програма, задана атрибутом actionтега

Як значення атрибуту action можна вказати також адресу електронної пошти, починаючи його з ключового слова mailto: . При надсиланні форми буде запущено поштова програма, встановлена ​​за замовчуванням. З метою безпеки в браузері встановлено, що відправити непомітно інформацію, введену у формі, поштою неможливо. Для коректної інтерпретації даних використовуйте атрибут enctype зі значенням text/plain у тезі

Браузери неоднозначно працюють із таким кодом. Firefox запропонує список відповідних додатківдля надсилання пошти (рис. 1), Internet Explorerвиведе попередження (рис. 2) і спробує запустити програму, зіставлену з поштою, Opera подібно до Firefox запропонує список варіантів підходящих для відправки пошти (рис. 3).

Рис. 1. Запуск програми у Firefox

Рис. 2. Попередження Internet Explorer

Рис. 3. Вибір програми в Opera

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

Але зрозуміло, що користувачеві іноді потрібно забезпечити власні поля введення. Ці види взаємодії включають:

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

Щоб пристосуватися до цих потреб, HTML пропонує інтерактивні елементи керуванняформи:

• текстові поля (для одного або кількох рядків);
• перемикачі;
• прапорці;
• списки, що випадають;
• віджети для завантаження;
• кнопки надсилання.

Ці елементи управління використовують різні теги HTML, але більшість із них використовує тег . Оскільки це елемент, що самозакриває, тип поля визначається його атрибутом type :

Елемент

є блоковим елементом, який визначає інтерактивнучастина веб-сторінки. Як результат, всі елементи керування (такі як , або <button>) повинні знаходитися <i>всередині</i>елемента <form> .</p><p>Два атрибути HTML <b>необхідні</b>:</p><ul><li>action містить адресу, яка визначає, <i>куди</i>буде надіслано інформацію форми;</li><li>method може бути або GET, або POST і визначає, <i>як</i>буде надіслано інформацію форми.</li> </ul><p>Як правило, інформація форми посилається на <b>сервер</b>. <i>Як</i>ці дані потім будуть оброблені виходить за рамки цього посібника.</p><p>Подумайте про форму як про набір елементів управління, які працюють разом, щоб виконати <b>одну</b>операцію. Якщо ви написали форму входу на сайт, у вас могло бути <b>три</b>поля:</p><ul><li>поле для електронної пошти <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка відправки <input type="submit"> </li> </ul><p>Ці три <a href="/shablony-html-strogii-stil-besplatnye-html-shablony-na-russkom/">елемент HTML</a>будуть укладені всередині однієї форми <span><form action="/login" method="POST"> </span>.</p><p>Ви можете аналогічно додати форму реєстрації на тій же сторінці HTML, в окремому елементі <form> .</p><h2>Текстові поля</h2><p>Майже всім формам потрібно <b>текстовий</b>введення від користувачів, щоб ввести своє ім'я, адресу електронної пошти, пароль, адресу та ін. Текстові поля форми надходять у різних варіантах.</p><p>Хоча ці поля дуже схожі і дозволяють користувачам вводити будь-який текст (навіть неправильний), їх тип забезпечує специфічну <b>семантику</b>для введення, визначаючи, яку інформацію поле <b>повинно</b>утримувати.</p><p>Браузери можуть згодом трохи змінити інтерфейс елемента управління, щоб підвищити <i>інтерактивність</i>або підказати, який вміст очікується.</p><p>Наприклад, поле пароля показує точки замість символів. А поле для чисел дозволяє збільшувати/зменшувати значення за допомогою клавіш вгору та вниз.</p><h2>placeholder</h2><p>Текстові поля можуть відображатись <b>підказуючий</b>текст, який зникне, як тільки буде введено певний текст.</p><p> <input type="text" placeholder="Введіть своє ім'я"> </p><p>Якщо ви починаєте набирати щось, побачите як текст «Введіть своє ім'я» зникне.</p><h2><label></h2><p>Так як елементи форми самі по собі не дуже описові, їм зазвичай передує текстова <b>мітка</b>.</p><p> <label>Email</label> <input type="email"> </p><p>У той час як placeholder вже забезпечує деяку підказку про те, який очікується зміст, мітки мають перевагу, залишаючись видимими в будь-який час і можуть використовуватися поряд з іншими типами елементів форми, таких як прапорці або перемикачі.</p><p>Хоча ви можете застосовувати короткі абзаци для опису елементів форми, використання <label>є семантично більш правильним, тому що вони існують лише у формах. <label>також може бути пов'язаний з <a href="/metody-massivov-javascript-kak-udalit-opredelennyi-element-massiva/">певним елементом</a>форми за допомогою атрибута for відповідного значення id у поля.</p><p> <label for="first_name">Ім'я</label> <input id="first_name" type="text"> </p><p>При натисканні на мітку фокус переходить до текстового поля і поміщає курсор всередину нього. Поки ця зв'язка здається марною, але знадобиться з прапорцями та перемикачами.</p><h2>Прапорці</h2><p><b>Прапорці</b>- це елементи форми, які мають лише два стани: увімкнено або вимкнено. Вони переважно дозволяють користувачеві сказати: «Так» чи «Ні» для чогось.</p><p> <input type="checkbox">Запам'ятати мене</p><p>Оскільки може виявитися складно натиснути на невеликий прапорець, рекомендується помістити прапорець і його опис всередину <label> .</p><p> <label> <input type="checkbox">Я згоден з умовами</label> </p><p>Ви можете натиснути на текст «Я згоден з умовами», щоб переключити прапорець.</p><p>За замовчуванням прапорець вимкнено. Ви можете позначити його увімкненим, просто використовуючи атрибут checked .</p><p> <label> <input type="checkbox" checked>Використати мою платіжну адресу</label> </p><h2>Перемикачі</h2><p>Ви можете надати користувачеві <b>список варіантів</b>на вибір за допомогою перемикачів.</p><p>Для роботи цього елемента форми, ваш HTML-код повинен <b>згрупувати</b>список перемикачів разом. Це досягається за допомогою того самого значення для атрибуту name:</p><p> <label>Сімейний стан</label> <label> <input type="radio" name="status">Неодружений</label> <label> <input type="radio" name="status">Одружений</label> <label> <input type="radio" name="status">Розлучений</label> <label> <input type="radio" name="status">Вдівець</label> </p><p>Оскільки всі перемикачі використовують однакове значення атрибута name (у <a href="/cel-sbora-i-obrabotki-personalnyh-dannyh-poruchenie-na-obrabotku/">даному випадку</a>значення status), вибір одного з варіантів скасує всі інші. Перемикачі є <b>взаємовиключними</b>.</p><h3>Різниця між перемикачами та прапорцями</h3><p>Хоча прапорець існує <b>сам по собі</b>, перемикачі можуть з'являтися лише у вигляді <b>списку</b>(що означає щонайменше два варіанти).</p><p>Крім того, клацання по прапорцю є <b>довільним</b>, в той час як вибір одного з перемикачів <b>обов'язковим</b>. Ось чому неможливо вимкнути перемикач, якщо вибрати найближчий варіант. Зрештою, завжди вибирається один із перемикачів.</p><h2>Випадні меню</h2><p>Якщо кількість варіантів для вибору займає занадто багато місця, ви можете скористатися меню, що випадає <select> .</p><p>Вони працюють подібно до перемикачів, відрізняється тільки компонування.</p><p> <select> <option>Січень</option> <option>Лютий</option> <option>Березень</option> <option>Квітень</option> <option>Травень</option> <option>Червень</option> <option>Липня</option> <option>Серпень</option> <option>Вересень</option> <option>Жовтень</option> <option>Листопад</option> <option>грудень</option> </select> </p><h3>Множинний вибір з меню, що випадає</h3><p>Якщо додати атрибут multiple, ви можете надати можливість вибрати кілька варіантів.</p><p> <label>Якими браузерами ви користуєтесь?</label> <select multiple> <option><a href="/plugin-for-saving-video-in-chrome-save-video-to-your-computer-using-google-chrome/">Google Chrome</a></option> <option>Internet Explorer</option> <option><a href="/soobshchenie-s-veb-stranicy-plagin-nedostupen-ustanovka-plagina-kriptopro-csp-v/">Mozilla Firefox</a></option> <option>Opera</option> <option>Safari</option> </select> </p><p>Виберіть кілька варіантів за допомогою утримання Ctrl (або ⌘) та клацання. Це може бути гарною альтернативою застосуванню кілька прапорців у рядку.</p><h2>Приклад: повна форма реєстрації</h2> <form action="/signup" method="POST"> <p> <label>Звернення</label> <label> <input type="radio" name="title" value="mr">Пан</label> <label> <input type="radio" name="title" value="mrs">Пані</label> </p> <p> <label>Ім'я</label> <input type="text" name="first_name"> </p> <p> <label>Прізвище</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>Пароль</label> <input type="password" name="password"> </p> <p> <label>Підтвердіть пароль</label> <input type="password" name="password_confirm"> </p> <p> <label>Країна</label> <select name="country"> <option>Канада</option> <option>Франція</option> <option>Німеччина</option> <option>Італія</option> <option>Японія</option> <option>Росія</option> <option>Великобританія</option> <option>США</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Я згоден з умовами використання</label> </p> <p> <button>Зареєструватись</button> </p> </form> <p>Також доступні інші елементи форм, але ми розглянули найбільш використовувані.</p> <h3>Опис</h3> <p>Тег <form>встановлює форму на веб-сторінці. Форма призначена для обміну даними між користувачем та сервером. Область застосування форм не обмежена відправкою даних на сервер, за допомогою клієнтських скриптів можна отримати доступ до будь-якого елементу форми, змінювати його та застосовувати на власний розсуд.</p> <p>Документ може містити будь-яку кількість форм, але одночасно на сервер може бути надіслана лише одна форма. З цієї причини ці форми повинні бути незалежними один від одного.</p> <p>Для надсилання форми на сервер використовується кнопка Submit, того ж можна досягти, якщо натиснути клавішу Enter в межах форми. Якщо кнопка Submit відсутня у формі, Enter імітує її використання.</p> <p>Коли форма відправляється на сервер, керування даними передається програмі, заданій атрибутом action тега <form>. Попередньо браузер готує інформацію у вигляді пари "ім'я=значення", де ім'я визначається атрибутом name тега <input>, а значення введено користувачем або встановлено у полі форми за промовчанням. Якщо для надсилання даних використовується метод GET, то <a href="/chastnyi-fotoarhiv-v-kontakte-kak-smotret-zakrytye-fotografii-vkontakte/">адресний рядок</a>може набувати наступного вигляду.</p> <p>http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5</p> <p>Параметри перераховуються після знака запитання, вказаного після адреси CGI-програми і розділяються між собою символом амперсанда (&). Нелатинські символи перетворюються на шістнадцяткове уявлення (у формі %HH, де HH — шістнадцятковий код для значення ASCII-символу), пропуск замінюється на плюс (+).</p> <p>Допускається всередину контейнера <form>розміщувати інші теги, при цьому сама форма ніяк не відображається на веб-сторінці, видно лише її елементи та результати вкладених тегів.</p> <h3>Синтаксис</h3> <form action="URL"> ... </form> <h3>Атрибути</h3>Встановлює кодування, в якому сервер може приймати та обробляти дані. Адреса програми чи документа, що обробляє дані форми. Включає автозаповнення полів форми. Спосіб кодування даних форми. Метод протоколу HTTP. Назва форми. Скасує вбудовану перевірку даних форми на правильність введення. Ім'я вікна або кадру, куди обробник завантажуватиме результат, що повертається. <h3>Закриваючий тег</h3> <p>Обов'язковий.</p> <p>HTML5 IE Cr Op Sa Fx</p><p> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег FORM</title> </head> <body> <form action="handler.php"> <p><b>Як на вашу думку розшифровується абревіатура "ОС"?</b></p> <p><input type="radio" name="answer" value="a1">Офіцерський склад <Br> <input type="radio" name="answer" value="a2"><a href="/besplatnye-operacionnye-sistemy-analogi-microsoft-windows-rossiiskoe-programmnoe-obespechenieoteches/">Операційна система</a><Br> <input type="radio" name="answer" value="a3">Великий смугастий мух</p> <p><input type="submit"></p> </form> </body> </html> </p><p>Результат <a href="/dan-dvumernyi-massiv-primery-resheniya-zadach-s-dvumernymi-massivami/">даного прикладу</a>показано на рис. 1.</p> <p>Рис. 1. Вигляд елементів форми у вікні браузера</p> <br><p>Форми в HTML - це найскладніша, але з іншого боку, мабуть найцікавіша тема в HTML.</p> <p>Веб-форми дозволяють відвідувачам сайту внести до спеціальних полів ту чи іншу інформацію, а розробнику її отримати у зручному для нього вигляді.</p> <p>Прикладом форми може бути гостьова книга, анкета, онлайн тест. Форми заповнюють під час реєстрації на сайті, при оформленні замовлень в інтернет магазині тощо.</p> <p>Користуючись HTML, можна створити каркас форми: текстові поля, меню, списки, кнопки, прапорці і перемикачі. Тобто ті елементи, з яких у форму вноситься певна інформація.</p> <p>Далі, внесені у форму, відправляються на сервер для обробки. Але HTML тут безсилий – над обробкою форми вже працює програма чи скрипт, який до неї прив'язується. Такі програми зазвичай пишуть мовою php чи javascript.</p> <h4>Атрибути форми - тег <form></h4> <p>Форм на веб-сторінці може декілька ( <i>стільки, скільки потрібно розробнику</i>). Кожна з них починається тегом <form>і завершується закриваючим тегом</form> .</p> <p>Атрибут action є обов'язковим для будь-якої форми - він вказує адресу файлу, який обслуговує форму ( <i>обробляє внесені до неї дані</i>).</p> <p>Атрибут метод визначає спосіб відправлення вмісту форми. Існує два методи - GET і POST. Зараз немає сенсу вникати у ці параметри, оскільки тема відправлення інформації методами GET і POST належить до мов обробки даних ( <i>наприклад, PHP</i>). Достатньо знати, що саме метод передачі <a href="/uchimsya-rabotat-s-get-i-post-zaprosami-php-otpravka-dannyh-na-server/">даних POST</a>здебільшого використовується у формах.</p> <p>Атрибут name тега <form>не є обов'язковим. Але якщо у документі кілька форм, то кожна з них має бути якось ідентифікована обробником. Тому наявність атрибута name у разі необхідно - він задає унікально ім'я форми.</p> <p>Можна також встановити кодування для даних, що вводяться - за це відповідає атрибут accept-charset , а також, за допомогою <a href="/target-blank-i-drugie-znacheniya-atributa-target-target-v-css-kak-eto-rabotaet/">атрибута target</a>, визначити вікно, в якому відображатиметься результат обробки відправленої форми ( <i>у новому або у поточному вікні</i>).</p> <p>Але сам собою тег <form>немає сенсу, адже форма передає дані, які спочатку потрібно кудись внести!</p> <h4>Ввід данних. Поля форми - тег <input></h4> <p>Тег <input>це найчастіше що у формах тег. Він призначений для створення різних елементів, що служать для введення даних у форму: текстові поля, кнопки, прапорці, перемикачі.</p> <p>type - це основний атрибут тега <input>. Він встановлює тип поля ( <i>елемента</i>) форми:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Значення атрибуту type="..."</p> </td> <td width="245px"> <p>Результат</p> </td> <td> <p>Опис</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Ваше ім'я..." ></p> </td> <td align="center"> </td> <td><p>Однорядкове поле для введення тексту. Атрибут size визначає ширину поля в символах.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"> </td> <td><p>Текстове поле для введення пароля. <br>Атрибут maxlength встановлює максимальну кількість символів, які можна ввести</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> </td> <td><p>Перемикач. <br>Можливий вибір лише одного варіанта із запропонованих. Атрибут checked визначає заздалегідь позначені поля.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> </td> <td><p>Прапорець. <br>Можливий вибір кількох варіантів.</span>Атрибут <span>checked визначає заздалегідь позначені поля.</p> </td> </tr><tr><td><p><input type="button" value="Кнопка" ></p> </td> <td align="center"> </td> <td><p>Кнопка. <br>Атрибут value встановлює напис на кнопку.</p> </td> </tr><tr><td><p><input type="reset" value="Скинути" ></p> </td> <td align="center"> </td> <td><p>Кнопка скидання. <br>Повертає поля форми до їхнього первісного вигляду. Скидання внесених даних.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"> </td> <td><p>Кнопка для надсилання внесених даних.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"> </td> <td><p>Поле для введення імені файлу, що пересилається.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"> </td> <td><p>Кнопка зображення. <br>Служить також для надсилання даних на сервер. Атрибут src вказує адресу файлу із зображенням.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"> </td> <td><p>Приховане поле – невидиме для користувача.</p> </td> </tr></table><h3>Список, що розкривається - теги <select>і <option></h3> <p>Тег <select>так само як і тег <input>служить для збору інформації - він створює список, з якого можливий вибір одного або кількох елементів. Кожному елементу відповідає будь-яке значення, яке відправляється на сервер для обробки.</p> <p>Вигляд створюваного списку залежить від значення атрибута size: при size="1" ( <i>значення за замовчуванням</i>) список буде розкривається.</p> <p>Інше значення атрибута size буде відповідати кількості відображуваних пунктів списку. Наприклад, при size="3" видимими будуть три елементи. Для перегляду інших пунктів списку ( <i>якщо такі є</i>) слід скористатися вертикальною смугою прокручування, яка додається автоматично.</p> <p>За замовчуванням можливий вибір лише одного списку. Додавання атрибуту multiple до тега <select>дозволяє вибрати кілька пунктів списку за допомогою миші та клавіш Ctrl та Shift.</p> <p>За наявності атрибуту multiple будуть відображені всі пункти списку або їх частина ( <i>залежно від браузера</i>), якщо атрибутом size не встановлена ​​певна кількість видимих ​​пунктів.</p> <p>Обов'язковим елементом списку, що розкривається, є тег <option>. Він розташований усередині тега <select>та створює кожен пункт списку.</p> <p>За допомогою атрибуту name тега <select>списку надається ім'я, а за допомогою атрибуту value тега <option>елементу списку надають значення. Таким чином на сервер відправляється пара "ім'я=значення" - ім'я списку та значення вибраного елемента/ів.</p> <p>Атрибут selected тега <option>визначає заздалегідь виділений пункт списку, а атрибут disabled блокує елемент списку його не можна вибрати.</p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>Сторона світла - один із чотирьох основних напрямків:</p> <br> <select name= "storona" > <br> <option value= "North" >Північ</option><br> <option value= "South" >Південь</option><br> <option value= "West" >Захід</option><br> <option value= "East" >Схід</option> <br> </select><br><p>7 чудес світу!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >Піраміда Хеопса</option><br> <option value= "2" selected> <span>Висячі сади Семіраміди</span> </option><br> <option value= "3" disabled> <span>Статуя Зевса в Олімпії</span> </option><br> <option value= "4" > <span>Храм Артеміди в Ефесі</span> </option><br> <option value= "5" > <span>Мавзолей в Галікарнасі</span> </option><br> <option value= "6" > <span>Колос Родоський</span> </option><br> <option value= "7" > <span>Олександрійський маяк</span> </option><br> </select><br><p> <input type= "reset" value= "Скидання" > </p> <br> </form> </p> <p><img src='https://i2.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <h3>Багатострокове текстове поле - тег <textarea></h3> <p>Тег <textarea>створює багаторядкове текстове поле. У ньому можна робити переноси рядків, які зберігаються при передачі даних обробнику.</p> <p>Атрибут name тега <textarea>є обов'язковим – за допомогою його текстового поля присвоюють ім'я.</p> <p>Атрибут disabled блокує поле - вміст поля не можна змінити, і він недоступний. Атрибут readonly говорить про те, що поле призначене лише для читання – користувач не має можливості редагувати вміст, але він доступний – його можна виділити і, наприклад, скопіювати.</p> <p>Можна задати ширину текстового поля у символах та висоту поля у рядках за допомогою атрибутів cols та rows відповідно.</p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Якщо вміст поля перевищить його розміри – з'явиться бігунок.</span>

Якщо вміст поля перевищить його розміри – з'явиться бігунок.

Приклад використання форми

Тепер подивимося: як працює форма.

Форма замовлення навчального відеоматеріалу:

Ваше ім'я: *

Ваше замовлення:

Відео-урок з HTML
Відео-урок з CSS
Відео-урок з PHP

Виберіть носій:

CD

DVD

USB Flash

Ваш e-mail: *

Ваша адреса: *

2018-06-28

Створюємо форми HTML

Привіт шановний відвідувач!

У попередніх розділах ми створили основні елементи сайту та розглянули питання, пов'язані з наповненням контенту. І тепер можемо перейти до наступної досить важливої ​​та великої теми – до роботи з формами HTML.

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

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

Причому тут також будуть порушені питання роботи з базою даних MySQL. Так як застосування форм у наших прикладах буде нерозривно пов'язане з їхньою взаємодією з таблицями БД. В яких зберігатимуться введені користувачами дані, які використовуються надалі сервером під час обробки запитів.

• Загалом про форми HTML
• форма онлайн замовлення
• Форма авторизації
• форма зворотного зв'язку

Загалом про форми HTML

Форма на веб-сторінці встановлюється блоковим елементом