TGViewer
Будни разработчика Будни разработчика @htmlshit · 14.4K subscribers
Post #3107 3.1K
#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач
Getbootstrap Input group Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
  • 👍 14
  • ❤ 3
  • 👎 1
More from @htmlshit
  1. Oct 14, 2026Атмосфера HolyJS: ради чего стоит приехать на площадку 23–24 октября в Санкт Петербурге и…
  2. Oct 13, 2026#такое дня Сидим, разрабатываем дизайн систему, следуем WCAG, вычитываем эксплейнеры с htt…
  3. Oct 13, 2026🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер 15 октября в 19:00 (МСК)…
  4. Oct 13, 2026#инструмент дня Когда надоело, что ссылки из рабочего Slack открываются в личном профиле C…
  5. Oct 12, 2026#статья дня У vlt.io есть собственный коммерческий реестр npm-пакетов. Казалось бы, зачем…
  6. Oct 11, 2026#дичь дня Лукас Бономи сделал GSS (GPU Style Sheets) — язык, на котором можно создавать по…
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 →