Вхідні поля з множинним вибором для HTML-форм

• Квітня 26, 2024

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

Перемикач - дуже поширений вибір для варіантів з декількома варіантами; ви часто бачите їх, які використовуються у веб-вікторинах та подібних формах. Ці кнопки використовуються, коли ви бажаєте, щоб ваш відвідувач обрав лише один із декількох варіантів. Наприклад, якщо ви будували особисту вікторину на своєму веб-сайті і хотіли, щоб відвідувачі обрали свій улюблений основний колір (червоний, синій або жовтий), ви використовували б перемикачі.

Радіо кнопки групуються за атрибутом "ім'я". У групі радіо кнопок, що мають одне ім’я, відвідувачі зможуть вибрати лише одну; натискання на іншу кнопку в групі скасує вибір оригінального вибору. Атрибут "value" визначає, до якої опції належить перемикач, а атрибут "check" дозволяє попередньо вибрати параметр.

У наведеному вище прикладі питання може бути зашифровано наступним чином:

Який ваш улюблений основний колір?

Червоний

Синій

Жовтий

На вашому веб-сайті питання виглядатиме так:

Який ваш улюблений основний колір?
Червоний
Синій
Жовтий

Друге поле з декількома варіантами - це випадаюче меню. За допомогою випадаючого меню ви можете дозволити кілька виборів або лише один; випадаючі меню також займають менше місця на сторінці, тому вони дозволяють представити більше варіантів із меншою скупченістю.

У спадному меню використовується тег "select" як основа поля, а тег "option" - для встановлення елементів меню. Ви можете змінити тег "select" за допомогою атрибута "size", який визначає, скільки предметів видно до того, як відвідувач натисне, щоб відкрити меню, та атрибутом "multiple", який, якщо встановлено, дозволяє відвідувачеві вибрати більше одного параметра . Ви також можете змінити тег "параметр"; атрибут "вибраний" дозволяє попередньо вибрати цей параметр.

Ось зразок запитання за допомогою спадного меню:

Ваш найменш улюблений день тижня?


Неділя
Понеділок
Вівторок
Середа
Четвер
П’ятниця
Субота


На вашому веб-сайті питання виглядатиме так:

Ваш найменш улюблений день тижня?

Неділя
Понеділок
Вівторок
Середа
Четвер
П’ятниця
Субота


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

Зразок запитання за допомогою прапорців:

Якого домашнього улюбленця у вас є?

Собака

Кіт

Птах

Миша

Хом'як

Алігатор

Інший


Ваші відвідувачі побачать:

Якого домашнього улюбленця у вас є?
Собака
Кіт
Птах
Миша
Хом'як
Алігатор
Інший

Відео Інструкція: Week 9 (Квітня 2024).