WebUniverseВведення в форми. Частина 2.
Пояснення:
Групування полів – тег <fieldset>
За допомогою тегу <fieldset></fieldset> можна об’єднати декілька полів форми в логічну групу.Це допомагає структурувати форму і зробити її більш зрозумілою для користувача.Додатково можна використовувати тег <legend></legend>, щоб підписати цю групу.Сам по собі <fieldset> відображається на сторінці у вигляді рамки навколо полів, які в ньому містяться.
Тег <input type="radio"> – перемикачі
За допомогою тегу <input type="radio"> створюються кнопки-перемикачі, з яких користувач може вибрати лише один варіант із групи.Атрибут name="" об’єднує кнопки в одну групу, а атрибут value="" зберігає значення вибраного варіанту.Ці кнопки часто використовують для вибору статі, способу доставки або відповіді на питання з однією правильною відповіддю.
Тег <input type="checkbox"> – прапорці
За допомогою тегу <input type="checkbox"> створюються прапорці, які дозволяють користувачу вибрати один або кілька варіантів одночасно.Атрибут name="" і value="" зберігають інформацію про вибрані опції.Ці прапорці часто використовують для погодження з умовами, вибору інтересів або підписки на розсилку.
Тег <select> – випадаючий список
За допомогою тегу <select></select> створюється випадаючий список з декількох варіантів для вибору.Всередині списку використовують тег <option></option>, щоб додати конкретні варіанти.
Атрибут disabled
Якщо у <option> або самому <select> встановити disabled, елемент стає неактивним і користувач не може його обрати.
Атрибут selected
Якщо у <option> встановити selected, цей варіант буде обраний за замовчуванням при завантаженні сторінки.
Атрибут multiple
Якщо у <select> додати атрибут multiple, користувач зможе обирати одразу кілька варіантів зі списку, утримуючи Ctrl або Shift.
Атрибут size
Атрибут size визначає, скільки рядків списку видно одночасно без прокручування. Якщо size="1", список виглядає як стандартний випадаючий; більше значення робить його багаторядковим.
Таблиця:
| № | Тема | Приклад коду | Підсумок |
|---|---|---|---|
| 1 | fieldset та legend | | fieldset створює рамку для групи елементів форми. legend — підпис цієї групи. |
| 2 | input type="radio" | | Радіокнопки дозволяють вибрати тільки один варіант із групи. Всі кнопки з однаковим name об’єднані. |
| 3 | input type="checkbox" | | Галочки дозволяють вибрати кілька варіантів одночасно. |
| 4 | select і option | | select створює випадаючий список. option — кожен варіант у списку. |
| 5 | selected | | selected робить певний варіант у списку обраним за замовчуванням. |
| 6 | disabled | | disabled робить поле неактивним, користувач не може його змінити. |
| 7 | multiple size="5" | | multiple дозволяє обирати кілька варіантів одночасно. size="5" показує список одразу з 5 рядків. |
| 8 | element1:focus + element2 | | Застосовує стилі до елемента, який йде одразу після елемента у фокусі. Змінює рамку, якщо поле вводу у фокусі. |
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC