Традиційно термін «форма» стосується друкованого документа, який містить місця для заповнення інформації. HTML запозичив концепцію форми для позначення різних елементів, які дозволяють збирати інформацію від відвідувачів сайту. Незалежно від того, додаєте ви просте вікно пошуку на свій веб-сайт чи вам потрібно створити складніші функціональні можливості, HTML-форми надають вам набір елементів для збору даних від ваших користувачів. В теоретичному блоці будуть розглянуті усі необхідні елементи для створення форми.
Для додавання форми на сторінку використовується елемент form. Form обгортає всі елементи, включені у форму. До даного елемента можна застосувати декілька різних атрибутів, найпоширенішими з яких є action та method. Атрибут action містить URL-адресу, за якою інформація, включена у форму, буде надіслана для обробки сервером. Атрибут method — це метод HTTP, який браузери мають використовувати для надсилання даних форми. Обидва ці атрибути стосуються надсилання та обробки даних.
Одним із основних елементів, які використовуються для отримання тексту від користувачів, є елемент input. Даний елемент використовує атрибут type, щоб визначити тип інформації, яка має бути захоплена в елементі керування. Найпопулярнішим значенням атрибута type є text, який позначає один рядок для введення тексту. Також поширеними значеннями атрибуту type є password, email, tel, які призначені, відповідно, для введення паролю, емейл-адреси та телефонного номеру.
Разом із встановленням атрибута type, найкраще надати елементу input атрибут name. Значення атрибута name використовується як ім’я елемента керування та надсилається разом із вхідними даними на сервер.
See the Pen Форми_Значення атрибуту type by first_code (@maryna_kriukova) on CodePen.
Іншим елементом, який використовується для захоплення текстових даних, є елемент textarea. Цей елемент відрізняється від елемента input тим, що він може приймати більші фрагменти тексту, що охоплюють кілька рядків. Оскільки елемент textarea приймає лише один тип значення, атрибут type тут не застосовується, але атрибут name усе ще використовується.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Радіокнопки – це простий спосіб дозволити користувачам зробити швидкий вибір із невеликого списку варіантів, при цьому можна обрати лише один варіант. Для створення радіокнопки, елемент input використовується зі значенням атрибута type="radio".
Кожен елемент радіокнопки повинен мати однакове значення атрибута name, якщо ці кнопки за змістом прив'язані до одного певного питання.
Також радіокнопки мають атрибут value. Він вказує на значення, яке надсилається на сервер для вибраної опції. Значення атрибуту value, на відміну від атрибуту name, повинні бути різними (щоб сервер знав, який саме варіант вибрав користувач).
Та радіокнопки мають опціональний атрибут checked. Він використовується для задання початкового стану радіокнопки. Якщо атрибут checked встановлений, то радіокнопка буде відображатися як вибрана за замовчуванням при завантаженні сторінки. Тільки одна радіокнопка у групі повинна використовувати цей атрибут.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Прапорці дуже схожі на радіокнопки. Вони використовують однакові атрибути (value, name, checked), за винятком того, що атрибут прапорця має значення type="checkbox". Прапорці, на відміну від радіокнопок, дозволяють користувачам вибирати кілька значень і прив’язувати їх усі до однієї назви елемента керування.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Випадаючі списки забезпечують ідеальний формат для довгого списку вибору. Для створення випадаючого списку використовуються елементи select та option. Елемент select охоплює всі параметри меню, і кожен параметр меню позначається за допомогою елемента option.
Щодо атрибутів. Атрибут name знаходиться в елементі select, а атрибут value знаходиться в елементах option, вкладених в елемент select. Елемент option також має опціональний атрибут selected, який використовується для вказівки значення, яке буде вибране за замовчуванням. Це значення буде виділене в списку, коли сторінка завантажується.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Даний список практично ідентичний по синтаксису до випадаючого списку. Його відрізняє використання атрибуту multi, який дозволяє користувачеві вибирати більше ніж одну опцію зі списку одночасно. Крім того, використання даного атрибуту для кількох елементів option у меню призведе до попереднього вибору кількох параметрів.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Користувачі натискають кнопку «Надіслати», щоб обробити дані після заповнення форми. Кнопка надсилання створюється за допомогою елемента input зі значенням атрибуту type="submit". Атрибут value використовується для визначення тексту, який з’являється на кнопці.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Маркуванням форми виступають підписи або заголовки для елементів керування форми. Маркування створюється за допомогою елемента label. Даний елемент може містити атрибут for. Значення атрибута for має збігатися зі значенням атрибута id в елементі керування форми, якому відповідає маркування. Зіставлення значень атрибутів for та id зв’язує два елементи разом, дозволяючи користувачам клікнути на елемент label, щоб перевести фокус на відповідний елемент форми. Цей підхід робить форму більш доступною та зручною для використання користувачами.
Набори полів групують елементи керування форми та маркування в упорядковані розділи. Для цього використовується елемент fieldset. Це елемент блочного рівня, який обертає пов'язані елементи, зокрема всередині елемента form, заради кращої організації.
Легенда містить заголовок для елементу fieldset. Елемент legend обертає текст, який описує елементи керування форми, що потрапляють у набір полів. Розмітка повинна включати елемент legend відразу після тега fieldset. На сторінці легенда з'явиться у верхній лівій частині границі полів.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Атрибут placeholder. Даний атрибут підказує користувачу, що саме потрібно ввести в поле вводу, нанаприклад, формат електронної адреси. Значення цього атрибуту зникає, коли користувач починає вводити текст.
Атрибут required. Даний атрибут додається обов'язковим полям форми. Якщо поле з таким атрибутом не є заповненим, тоді при відправленні форми браузер покаже попередження та, звичайно, форма не відправиться.
See the Pen ФОрми_placeholder_required by first_code (@maryna_kriukova) on CodePen.
У секцію під назвою "Зв'язок з нами" додається форма. Всі елементи та атрибути, з яких складається форма, розглянуті в блоці із теорією. Для організації та групування елементів форми використані елементи fieldset, legend та label. Серед елементів керування на формі присутні: input, textarea, select. Серед значень атрибутів type елементів input застосовані наступні: text, email, tel, radio, checkbox, submit. Для заповнення форм правильно, тобто безпомилково, використані атрибути required та placeholder.
Можна побачити, що до частини коду із радіокнопками та чекбоксами додано по два вже знайомих елементи span до кожного пункту. Перші елементи span, які ще не мають вмісту, створені для подальшої стилізації чекбоксів та радіокнопок. Другі – для вмісту назв пунктів, щоб їх було зручніше стилізувати.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми розібралися, як створювати форми із різноманітними елементами керування.