HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> <br> <label for="sendbutton"></label> <button id="sendbutton">senden</button> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname], label[for=sendbutton] { display: inline-block; width: 10rem; } ~~~ Ein Vorteil ist auch, dass die Ausgabe auf einem schmalen Screen (Smartphone!) umgebrochen wird, wenn beides nicht auf eine Zeile passt. Möglicherweise willst Du das aber für alle erzwingen (Manche Inputs sind ja schmal…): Dann kannst Du mit Media-Rules hantieren: ~~~CSS @media all { label[for=nachname], label[for=vorname] { display: block; } } @media only screen and (min-width: 60rem) { label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } label[for=sendbutton] { display: none; } } ~~~ (Ich habe das „blind“, also ohne Tests notiert. Der Quelltext kann fehlerhaft sein, die Werte musst Du sowieso anpassen.)

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> <br> <label for="sendbutton"></label> <button id="sendbutton">senden</button> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname], label[for=sendbutton] { display: inline-block; width: 10rem; } ~~~ Ein Vorteil ist auch, dass die Ausgabe auf einem schmalen Screen (Smartphone!) umgebrochen wird, wenn beides nicht auf eine Zeile passt. Möglicherweise willst Du das aber für alle erzwingen (Manche Inputs sind ja schmal…): Dann kannst Du mit Media-Rules hantieren: ~~~CSS @media all { label[for=nachname], label[for=vorname] { display: block; } } @media only screen and (min-width: 60rem) { label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } label[for=sendbutton] { display: none; } } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> <br> <label for="sendbutton"></label> <button id="sendbutton">senden</button> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname], label[for=sendbutton] { display: inline-block; width: 10rem; } ~~~ Ein Vorteil ist auch, dass die Ausgabe auf einem schmalen Screen (Smartphone!) umgebrochen wird, wenn beides nicht auf eine Zeile passt. Möglicherweise willst Du das aber für alle erzwingen (Manche Inputs sind ja schmal…): Dann kannst Du mit Media-Rules hantieren: ~~~CSS @media all { label[for=nachname], label[for=vorname] { display: block; } } @media only screen and (min-width: 60rem) { label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } label[for=sendbutton] { display: none; } } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~ Ein Vorteil ist auch, dass die Ausgabe auf einem schmalen Screen (Smartphone!) umgebrochen wird, wenn beides nicht auf eine Zeile passt. Möglicherweise willst Du das aber für alle erzwingen (Manche Inputs sind ja schmal…): Dann kannst Du mit Media-Rules hantieren: ~~~CSS @media all { label[for=nachname], label[for=vorname] { display: block; } } @media only screen and (min-width: 60rem) { label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~ Ein Vorteil ist auch, dass die Ausgabe auf einem schmalen Screen (Smartphone!) umgebrochen wird, wenn beides nicht auf eine Zeile passt. Möglicherweise willst Du das aber für alle erzwingen (Manche Inputs sind ja schmal…): Dann setze kannst Du mit Media-Rules hantieren: ~~~CSS @media all { label[for=nachname], label[for=vorname] { display: block; } } @media only screen and (min-width: 60rem) { label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Nachname:</label> <input type="text" name="nachname" id="nachname" maxlength="40"> <br> <label for="zuname">Vorname:</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=nachname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Zuname</label> <input type="text" name="zuname" id="zuname" maxlength="40"> <br> <label for="zuname">Vorname</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=zuname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden, was vor allem dann gilt, wenn die Tabelle nur missbraucht wird, um die Einrückungen vorzunehmen. HTML: ~~~HTML <label for="zuname">Zuname</label> <input type="text" name="zuname" id="zuname" maxlength="40"> <label for="zuname">Vorname</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=zuname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Oft ist es besser, `<label>` zu verwenden. HTML: ~~~HTML <label for="zuname">Zuname</label> <input type="text" name="zuname" id="zuname" maxlength="40"> <label for="zuname">Vorname</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=zuname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~

HTML-Formal nicht falsch, aber die Semantic ist fürchterlich, die Sprachausgabe ein Grauen. Besser ist es, `<label>` zu verwenden. HTML: ~~~HTML <label for="zuname">Zuname</label> <input type="text" name="zuname" id="zuname" maxlength="40"> <label for="zuname">Vorname</label> <input type="text" name="vorname" id="vorname" maxlength="40"> ~~~ (Das „for“ bezieht sich auf die ID des Input-Elements) CSS: ~~~CSS label[for=zuname], label[for=vorname] { display: inline-block; width: 10rem; } ~~~