Ausrichtung von Formularelementen

[Rolf b]

Vielleicht habe ich ja was nicht verstanden....

Das verlinkte Formular im Fiddle zeigt schön ausgerichtete Eingabefelder und Submit-Buttons (soll ein Testformular für einen Rest-Service werden). Was ich dafür aber machen musste, empfinde ich als blöde Fummelei. In den „guten“ alten Zeiten mit Table-Layout hätte ich einfach eine rahmenlose Table verwendet und der Brauser hätte es alles automatisch ausgerichtet.

<form id="form1" method="post">
    <h1>Testaufrufe</h1>
    <fieldset>
        <legend>Aufrufparameter</legend>
        <label><span>Telefonnummer:</span><input name="telefonnummer" type="text" required pattern="00\d{5,}" /></label>
        <label><span>Buchungszeitpunkt:</span><input name="buchung" type="datetime" /></label>
        <label><span>Neue Zustellung:</span><input name="zustellung" type="datetime" /></label>
        <div class="buttons">
            <button name="received">Received</button>
            <button name="accepted">Accepted</button>
            <button name="completed">Completed</button>
            <button name="reset">Reset</button>
        </div>
    </fieldset>
</form>

label {display: block;  margin: 5px }

label span {display: inline-block; width: 12em; }

label input { font: inherit; width: 20em; padding: 1px}

div.buttons {margin-left: calc(5px + 12em);margin-top:20px;  }

Ist das, was ich gemacht habe, für neueres HTML idiomatisch richtig? Oder geht's eigentlich anderes?

Und bitte - keine Diskussionen über Accessibility, falsch konstruierte CSS Selektoren oder ähnliche Grundsatzthemen. Das Fiddle ist eine Bastelseite für EIN konkretes Thema und vernachlässigt darum den Rest.

Rolf