Formular - Felder anordnen

[Bernd]

Hallo Felix,

Dann hast Du meine Vorschläge nicht so umgesetzt, wie ich es beschrieben habe.

Ich habe es jetzt so umgesetzt

<form>
    <label for="name">
        <input type="text" id="name" name="name" placeholder="Name" class="contact-textbox">
    </label>

    <label for="email">
        <input type="email" id="email" name="email" placeholder="eMail Adresse" class="contact-textbox">
    </label>
                           
    <label for="text">
        <input type="text" id="text" name="text" placeholder=Betreff" class="contact-textbox">
    </label>

    <label for="betreff">
        <input type="text" id="betreff" name="betreff" placeholder="Betreff" class="contact-textbox">
    </label>

    <label for="nachricht">
        <textarea name="nachricht" placeholder="Nachricht" class="contact-textbox"></textarea>
    </label>
                            
    <input type="submit" name="message" value="Nachricht abschicken" class="contact-button">
                                
</form>

[for="name"] {
  width: 48%;
  display: inline-block;
  margin-bottom: 1em;
  margin-top: 2em;
}

[for="email"] {
  width: 48%;
  display: inline-block;
  margin-left: 2em;
}

[for="betreff"] {
  margin-bottom: 2em;
  display: block;
}

Das ganze sieht dann so aus

Wiebitte?? Kannst Du das genauer beschreiben oder besser gleich in Deinem Fiddle vorführen? Im ersten Moment klang das für mich wie barer Unsinn...

Ich hätte meine Beschriftungen gerne in den Feldern um etwas platz zu sparen. Das Formular soll sehr minimalistisch rüber kommen. Hab auch vielen Seiten schon gesehen wenn man rein klickt wandert die Beschriftung nach oben und ich kann im Feld schreiben und weiß noch immer wo ich bin. Deshalb habe ich in meinem ersten Posting auch gefragt ob ich ein <label> benötige oder ob es auch anderes geht.

Meines Wissens ist es gültig, aber nicht semantisch. Wenn Du im Browser die Darstellung auf "ohne Stil" schaltest, wirst Du merken, dass es nur schwer benutzbar ist. Und das placeholder-Attribut ist keine sinnvolle Beschriftung. Diese gehört ins label-Element!

Zum Thema <label> habe ich gerade etwas geschrieben. Also ich soll um die Labels noch <p> leben? Dann habe ich doch wieder unnötiges HTML?