Собственно вопрос.

Нужно получить нечто вроде, т.е. классическую-каноническую экранную форму.



но чтоб единообразно и хорошо работало под IE11, Chrome, FF, etc: мы указываем в html только label, inputs, а оно само,
считает нужную ширину колонки с label и соотсвественно оступает колонку с inputs, ну и само собой labels, inputs на одном baseline


Попытки заиспользовать grid-layout закончились пшиком, даже Example 24 из https://drafts.csswg.org/css-grid-1/
работает толком только в Chrome, и в целом ситуация с display:grid похоже печальная на еще N лет вперед.

На коленке удалось запилить через самый обычный <table><tr><td><label ..></td><td><input...> </td></tr>
но сразу сомнения, потому что аккуратно впилить <fieldset> не получается (только если его представлять как отдельнй вид <tr>).

Ну и в целом - tables are bad (хотя непонятно почему bad, действительно, почему?)

Поиграться с display:table тоже не сильно получилось - там и вовсе расползается колонка с inputs и опять-же не решается fieldset,
да и по сути это тот-же <table>, только на <div>, чем оно теперь лучше, чем просто <table> не понятно, реально, почему это уже не tables are bad?


Вопрос - как можно красиво и без тонны всякой bootstrap/vue/react ерунды и прочих polyfill/mixin костылей в современных браузерах сделать html формочки?

Лично я бы остался на <table>, если бы не <fieldset>

hVosttdbpatch,

любая CSS Grid библиотека решает твою задачу прям в лоб, например на Bootstrap такая форма делается прям по сетке и получается очень даже приемлимый результат.

без bootstrap и прочей ерунды, ты хочешь изобрести велосипед, чтобы и нефигово выглядело, и работало норм во всех браузерах, и было расширяемо, и было удобно использовать... ну так далее, там ребята делают свои поделки годами, тупицы, чем вообще занимаются? зачем ?

а я не хочу их поделки, из нужно сопровождать и поддерживать (обновлять), не говоря уже об изучении и багфиксах.
при том, что через три года оно окончательно загниет.

спасибо, плавали.

тем боее, эти "ребята" решают обычно "задачи" вроде поддержки IE6, IE9, мне это не интересно, у меня ограничение edge версиями браузеров.

частично магия достижима, вот первый ответ
https://stackoverflow.com/questions/9325426/css-how-to-create-a-label-width-of-the-longest-containing-text

но его решение не покрывает элемент Department выше, ну и в разных fieldset отступы будут разные, мне это не сильно подходит - на Department я бы еще забил, но вот разные отступы в fieldset - нет.

в целом все это как-то странно, уже 23 года прошло, а никак даже обычные forms на html запилить не могут. чем эти ребята из w3c вообще занимаются?

skyANAdbpatchВопрос - как можно красиво и без тонны всякой bootstrap/vue/react ерунды и прочих polyfill/mixin костылей в современных браузерах сделать html формочки?
Раскурить HTML5 semantic elements и сделать.

ты уже раскрурил и сделал? пример покажешь?

hVosttdbpatchЛично я бы остался на <table>, если бы не <fieldset>

flex не пробовал посмотреть?

пробовал, он разве решает проблемы колонок?

все примеры, из просмотренных, напирают на то, чтоб я константой вбивал ширину labels, я такое и без всяких flexbox-ов могу сделать на обычных блоках

вадяdbpatch,

https://habrahabr.ru/company/microsoft/blog/140715/
https://habrahabr.ru/post/325760/
https://habrahabr.ru/company/nixsolutions/blog/326098/
https://habrahabr.ru/company/edison/blog/343796/

Зачем это? это не работает с IE11, от которого по определению отказаться нельзя - в корпоративе он будет жить еще лет 10.

hVosttdbpatchа я не хочу их поделки, из нужно сопровождать и поддерживать (обновлять), не говоря уже об изучении и багфиксах.
при том, что через три года оно окончательно загниет.

на сопровождении проект, который делали ещё давным давно на втором бутстрапе. до сих пор активно используется и поддерживается в работоспособном состоянии.

так что рассказывать сказки не нужно :)

https://jsfiddle.net/251ue64h/

интригующе, но спорно.

я сделал первую метку "First name name name" и растянул форму на 1920px. Вместо того, чтоб расположить все одну строку, он сделал перенос.

Фонарь-с...

Хотя да, интригующе, надо наверное поизучать этот ваш boostrap более детально, хотя первое впечатление было не очень, слишком много кода, чтоб это было сопровождабельно своими силами.

вадяdbpatchЗачем это? это не работает с IE11,
не совсем
https://caniuse.com/#search=CSS Grid
может что-то сработает.

то, что работает - ничем не отличается от обычного <table> или display:table, мотивации это "заюзать" - ноль целых ноль десятых

hVosttdbpatchпробовал, он разве решает проблемы колонок?

все примеры, из просмотренных, напирают на то, чтоб я константой вбивал ширину labels, я такое и без всяких flexbox-ов могу сделать на обычных блоках

вообще-то, ты должен вбивать ширину лабелс. тебе за резиновые лабелс в горизонтальных формах любой UX-дизайнер оторвёт руки по самую шею.

хотя, если программист взялся делать дизайн, катастрофу уже никто не остановит

у меня нет задачи "дизайна". у меня кодогенератор форм от базы данных, что-то вроде Oracle Apex, для сугубо внутренних задач, там невиданные лебедевые красоты не нужны.

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

в конце концов это уже приходится делать, чтоб сделать fixed-header, fixed-footer таблицы, там тоже - иначе никак, кроме как на server-side считать em-ки с запасом 20% чтоб не "налезало", но признаться я не думал, что и в области форм все настолько печально в этом вашем html.

hVosttразработчики взаимозаменяемы. кастомизируется, тысячи решений и ответов на stacjoverflow. как можно этим пренебрегать?

да, есть и такое, бутстрап головного мозга. надо знать меру )
то-же самое говорили и про jQuery, дескать как этим можно пренебрегать?

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

т.е. в случае "протухания" меняем только собственную библиотеку, и все работает :)

но в контексте текущей задачи - вариант посчитать на сервере (в библиотеке) ширину label в em-ках с запасом - мне кажется куда меньшим злом, чем донавешивание еще и boostrap в зависимости