Styling-Formular mit Beschriftung über den Eingaben

Ich möchte folgenden Formularstil erstellen:

Name E-Mail
[.................] [.................]

Gegenstand
[.................]

Botschaft
[.........................................]
[.........................................]
[.........................................]
[.........................................]

Der HTML-Code, den ich habe, ist:

<form name="message" method="post">
    <section>
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
    </section>
    <section>
    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">
    </section>
</form>

Im Moment produziert es:

Name [...................]
Email [...................]
Gegenstand [...................]
Botschaft
[.........................................]
[.........................................]
[.........................................]
[.........................................]

Was wäre der beste Weg, dies zu tun? Ich gerate immer wieder in Unordnung mit meinen Schwimmern!

Ich würde sowohl das inputals auch die labelElemente display: blockerstellen und dann das Namensetikett und die Eingabe sowie das E-Mail-Etikett und die Eingabe aufteilen div'sund sie nebeneinander schweben lassen.

input, label {
    display:block;
}

<form name="message" method="post">
    <section>

  <div style="float:left;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
  </div>

  <div style="float:left;">
    <label for="email">Email</label>
    <input id="email" type="text" value="" name="email">
  </div>

  <br style="clear:both;" />

    </section>

    <section>

    <label for="subject">Subject</label>
    <input id="subject" type="text" value="" name="subject">
    <label for="message">Message</label>
    <input id="message" type="text" value="" name="message">

    </section>
</form>

Sie könnten so etwas versuchen

<form name="message" method="post">
    <section>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" value="" name="name">
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="text" value="" name="email">
    </div>
    </section>
    <section>
    <div>
      <label for="subject">Subject</label>
      <input id="subject" type="text" value="" name="subject">
    </div>
    <div class="full">
      <label for="message">Message</label>
      <input id="message" type="text" value="" name="message">
    </div>
    </section>
</form>

und dann css es wie

form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }

Ich würde es vorziehen, kein HTML5-Element wie z <section>. Auch das Gruppieren der Eingabefelder kann schmerzhaft sein, wenn Sie versuchen, das Formular mit Code zu generieren. Es ist immer besser, für jedes ein ähnliches Markup zu erstellen und nur die Klassennamen zu ändern. Daher würde ich eine Lösung empfehlen, die so aussieht:

CSS

label, input {
    display: block;
}
ul.form {
    width  : 500px;
    padding: 0px;
    margin : 0px;
    list-style-type: none;
}
ul.form li  {
    width : 500px;
}
ul.form li input {
    width : 200px;
}
ul.form li textarea {
    width : 450px;
    height: 150px;
}
ul.form li.twoColumnPart {
    float : left;
    width : 250px;
}

HTML

<form name="message" method="post">
    <ul class="form">
        <li class="twoColumnPart">
            <label for="name">Name</label>
            <input id="name" type="text" value="" name="name">
        </li>
        <li class="twoColumnPart">
            <label for="email">Email</label>
            <input id="email" type="text" value="" name="email">
        </li>
        <li>
            <label for="subject">Subject</label>
            <input id="subject" type="text" value="" name="subject">
        </li>
        <li>
            <label for="message">Message</label>
            <textarea id="message" type="text" name="message"></textarea>
        </li>
    </ul>
</form>

Ich weiß, dass dies eine alte mit einer akzeptierten Antwort ist, und diese Antwort funktioniert großartig. WENN Sie nicht den Hintergrund stylen und die endgültigen Eingaben nach links schweben lassen. Wenn dies der Fall ist, enthält der Formularhintergrund keine schwebenden Eingabefelder.

Um dies zu vermeiden, machen Sie die Divs mit den kleineren Eingabefeldern inline-block anstatt links zu schweben.

Dies:

<div style="display:inline-block;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
</div>

Eher, als:

<div style="float:left;margin-right:20px;">
    <label for="name">Name</label>
    <input id="name" type="text" value="" name="name">
</div>

Es ist nicht erforderlich, einen zusätzlichen Div-Wrapper hinzuzufügen, wie andere vorschlagen.

Am einfachsten ist es, das Eingabeelement in ein zugehöriges Beschriftungs-Tag einzuschließen und den Eingabestil auf festzulegen display:block.

Verdienter Bonuspunkt: Jetzt müssen Sie das Label- forAttribut nicht mehr festlegen . Weil jedes Label auf die verschachtelte Eingabe abzielt.

<form name="message" method="post">
    <section>
        <label class="left">
            Name
            <input id="name" type="text" name="name">
        </label>
        <label class="right">
            Email
            <input id="email" type="text" name="email">
        </label>
    </section>
</form>

https://jsfiddle.net/Tomanek1/sguh5k17/15/

Vor 10 Minuten hatte ich das gleiche Problem mit der Ortsbezeichnung über der Eingabe

dann habe ich eine kleine hässliche Auflösung bekommen

<form>
    <h4><label for="male">Male</label></h4>
    <input type="radio" name="sex" id="male" value="male">
</form>

Der Nachteil ist, dass zwischen Beschriftung und Eingabe ein großer Leerraum ist. Natürlich können Sie das CSS anpassen

Demo unter: http://jsfiddle.net/bqkawjs5/