<select multiple> для выбора нескольких значений. Это худший контрол в HTML для таких задач. К счастью, есть паттерн получше и он вовсе не странный.Самые заметные проблемы у
<select multiple>:* Нужно зажимать Ctrl/Cmd для выбора сразу нескольких (немногие вообще знают об этом)
* Маленькое окно, плохо сканируется взглядом
* Один неправильный клик и можно снять все выделения
* Внешний вид сильно зависит от ОС
* Стилизовать почти нереально
Гораздо понятнее использовать
<fieldset> с чекбоксами:* Интеракция очевидна (галка = выбрано)
* Все варианты сразу видны и легко сравнимы
* Случайно убрать выбор сложнее
* Стилизуется как угодно
* Отличная доступность для скринридеров
<fieldset>
<legend>Выберите интересы</legend>
<label>
<input type="checkbox" name="interests" value="css">
CSS
</label>
<label>
<input type="checkbox" name="interests" value="html">
HTML
</label>
<!-- ... -->
</fieldset>
На бэкенде вы получаете массив значений, так же как и с
<select multiple>.Например, в Rails это будет примерно так:
{ interests: ["css", "html"] }По обработке данных ничего не меняется. Меняется только UX — и в лучшую сторону.
А поскольку это чекбоксы, стилизовать можно как угодно:
* чипсы/теги
* карточки
* тумблеры
* любые кастомные варианты под дизайн
Попробуйте сделать что-то подобное с
<select multiple>.В следующий раз, когда потянетесь к
<select multiple>, остановитесь.Используйте
fieldset + checkboxes. Пользователям будет проще@WebDev_Plus
