TGViewer
WebDev+ | Веб-разработка WebDev+ | Веб-разработка @webdev_plus · 7.9K subscribers
Post #1156 934
Перестаньте использовать <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
More from @webdev_plus
  1. Oct 8, 2026Как работают очереди в контексте HTTP-запросов Разбираются основные стратегии очередей: FI…
  2. Oct 7, 2026Разработчики Next.js: добавьте эти 4 строки в ваш .vscode/settings.json, чтобы сразу прока…
  3. Oct 7, 2026Полезное расширение для Chrome «Responsive Viewer» Помогает веб-разработчикам и дизайнерам…
  4. Oct 6, 2026Laravel / PHP: как предпочитаете отправлять письма — описывать их прямо в месте вызова или…
  5. Oct 6, 2026Этот HTML-косяк непростителен. Не использовать атрибут inputmode в элементах input — серьё…
  6. Oct 5, 2026Работает!? Не трогай 🎯
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →