Множественные поля ввода для форм HTML

• May 10, 2024

Если вы создаете форму на своем веб-сайте и хотите, чтобы ваши посетители выбирали один или несколько предварительно выбранных параметров, то поле ввода с множественным выбором - это то, что вам нужно.

Переключатель является очень распространенным выбором для вариантов с множественным выбором; вы часто будете видеть их в веб-викторинах и аналогичных формах. Эти кнопки используются, когда вы хотите, чтобы ваш посетитель выбрал только один из нескольких вариантов. Например, если вы строите личный опрос на своем веб-сайте и хотите, чтобы посетители выбирали свой любимый основной цвет (красный, синий или желтый), используйте переключатели.

Радиокнопки сгруппированы по их атрибуту «имя». В группе переключателей с одинаковым именем посетители смогут выбрать только одну; нажатие на другую кнопку в группе отменит первоначальный выбор. Атрибут «value» определяет, к какой опции принадлежит радиокнопка, а атрибут «checked» позволяет предварительно выбрать опцию.

В приведенном выше примере вопрос может быть закодирован следующим образом:

Какой ваш любимый основной цвет?

красный

синий

желтый

На вашем сайте вопрос будет выглядеть так:

Какой ваш любимый основной цвет?
красный
синий
желтый

Второе поле с множественным выбором - это раскрывающееся меню. В раскрывающемся списке вы можете разрешить несколько вариантов выбора или только один; раскрывающиеся меню также занимают меньше места на странице, поэтому они позволяют вам представить больше вариантов с меньшим количеством людей.

Выпадающие меню используют тег «select» в качестве основы поля и тег «option» для установки пунктов меню. Вы можете изменить тег «select» с помощью атрибута «size», который указывает, сколько элементов отображается перед тем, как посетитель нажимает кнопку, чтобы открыть меню, и атрибута «множественный», который, если установлен, позволяет посетителю выбирать более одного параметра. , Вы также можете изменить тег «option»; Атрибут «selected» позволяет предварительно выбрать эту опцию.

Вот пример вопроса с использованием выпадающего меню:

Какой твой самый любимый день недели?


Воскресенье
понедельник
вторник
среда
Четверг
пятница
суббота


На вашем сайте вопрос будет выглядеть так:

Какой твой самый любимый день недели?

Воскресенье
понедельник
вторник
среда
Четверг
пятница
суббота


Третий вариант с множественным выбором - флажок. Флажки похожи на переключатели, за исключением того, что они всегда позволяют посетителям выбирать несколько вариантов. Флажки позволяют использовать те же атрибуты, что и переключатели.

Пример вопроса с использованием флажков:

Какие домашние животные у вас есть?

Собака

Кот

птица

мышь

хомяк

аллигатор

Другой


Ваши посетители увидят:

Какие домашние животные у вас есть?
Собака
Кот
птица
мышь
хомяк
аллигатор
Другой

Видео инструкция: Стилизация форм на HTML и CSS (May 2024).