Hallo Gunnar,

ich bin mit deiner Antwort nicht so glücklich, allerdings befürchte ich auch, dass man mit einer stichfesten Lösung nie wirklich glücklich ist.

Erstens:

Mit Grid geht’s einfacher

Finde ich nur begrenzt richtig. Bei schmalen Viewports kann man im Flexbox-Layout mit flex-wrap arbeiten, bei Grid-Layout braucht man @media- oder @container-Abfragen, und dann wird es wieder umständlicher.

Mit Flex ist es allerdings auch nicht wirklich einfach, wenn man einen Umbruch bei schmalen Viewports bei einer bestimmten Anzahl Zeichen erreichen will. Ob das responsiv als Grid eleganter geht? Ich habe jetzt ziemlich gefummelt und ob das nun didaktisch wertvoll ist, beginne ich zu bezweifeln.

Immerhin ist die gewünschte Feldbreite am Feld zeichengenau einstellbar 😀

Letztlich ist das alles ein Beleg für deine Aussage, dass man keine Felder nebeneinander setzen sollte.

Zweitens: Man sollte darauf hinweisen, dass das Setzen einer Border das automatische Outlining des fokussierten input-Elements abschaltet. Die input-Elemente sollten daher einen outline bekommen, wenn sie fokussiert sind.

.form-field input:focus {
   outline: 2px solid black;
}

Man sollte auch darauf hinweisen, dass der text-transform nur die Anzeige in Großschrift umsetzt. Der Server bekommt nach wie vor die gemischte Schreibweise, d.h. bevor man das in der DB speichert, sollte nochmal in Großschreibung konvertiert werden. In PHP wohl am besten mit mb_strtoupper - es wundert mich gerade, dass die Intl-Funktionen keinen locale-basierendes toUpper für Strings haben.

Drittens: Was ist der Zweck von

label:not(:has(input)) {
	display: block;
	width: fit-content;
}

Labels, die kein input-Element enthalten (hier also alle) sollen display:block sein. Wozu? Die inputs sind so breit wie das Flex-Item, damit stehen sie auch im inline-Modus unter dem Label und fit-content ist implizit. Ein label-Element, dass sein belabeltes Control enthält, wird doch ohnehin nicht empfohlen.

Ich bin ja bekanntlich ein Fiddler, hier ist meine Modifikation.

Rolf