Ausrichtung von Formularelementen

[Rolf b]

Ihr seid sehr motiviert und habt mir dabei viel Stoff zum Nachdenken gegeben. Danke schön dafür. Aber ich möchte doch bitten, nicht zu sehr auf die Mängel des gezeigten Markups einzugehen.

Es ist ein reduziertes Markup - nur für die Fragestellung der Label/Input Ausrichtung. Deswegen argumentiert ihr ohne Kenntnis des eigentlichen Formulars.

Dazu kommt, dass das eine interne Testaufrufseite für einen internen Webservice wird. Deswegen kennt ihr die Rahmenbedingungen nicht, die zu dem Pattern führen (wobei das Thema "dem User das Pattern vorab klarmachen" durchaus wichtig ist), und die DatenDas Pattern an der Telefonnummer ist relevant für valide Eingaben. Andere Nummern können gar nicht in der Datenbank stehen, mithin würde der Service keine Daten finden. Der Webservice normalerweise wird nicht von Menschen, sondern von Programmen aufgerufen, und denen kann ich ein Date-Format fix vorgeben, statt zu erraten, was sie wohl gemeint haben könnten. Für die Testseite ist eine freie Wahl des Datumsformats daher nicht relevant.

Dass man ein vorausgesetztes Pattern auf der Formularseite erläutern muss, steht außer Frage und ich schlage mich auch gerade mit dem Thema herum, aus HTML5-Validierungen aussagekräftigere Fehlermeldungen zu produzieren als das, was der Browser anzeigt. Mir was das Thema bisher neu und darum muss ich dazu noch einlesen.

Die Buttons sind englisch beschriftet, weil das die Methodennamen des Webservice sind, die durch den Button ausgelöst werden.

Aber da ich das Bestreben vieler hier kenne, eine ganzheitliche Antwort zu liefern, hatte ich bewusst auf die Themen hingewiesen, die ich nicht diskutieren wollte. Weil das gezeigte Markup vorsätzlich soweit reduziert war, dass es NUR um das kleine Detail gehen sollte, wie man ordentlich und ohne sinnloses Extra-Markup Labels und Eingabefelder ausrichtet. Ergebnis war: nebeneinander anordnen ist doof für viele Leute und damit wurde die Frage für obsolet erklärt.

Die Flexbox-Lösung habe ich mir angeschaut. Danke für die Demonstration.

Die Frage mit der div-Klammerung um ein Label-Input Pärchen finde ich aber wieder sehr interessant. Ich hatte das für mich als DIV-Überschuss gesehen. Wozu Gruppen bilden, wenn da keine sind. Andererseits findet man dieses Pattern auf vielen Webseiten (aber deswegen muss es nicht gut oder best-practice sein). Mit Labels als eigenem Element muss ich den Input-Elementen eine Id und einen Namen geben, das fand ich lästig und hatte deshalb bewusst die Input-Elemente in die Labels eingebettet. Ist die <div> Lösung die allgemein favorisierte?

Gruß
Rolf