Raketenwilli: Oft bessere Idee: verwende <label> und css

Beitrag lesen

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:

    <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:

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:

@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.)