Styling-Formular mit Beschriftung über den Eingaben

75

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!

html css Xylar
quelle
Check out display: inline-blockIch bevorzuge es sehr, um Formulare auszulegen. Achten Sie auf den Abstand zwischen Ihren Elementen. Mit Django verwende ich {% spaceless %}einen integrierten Vorlagenmechanismus.
Henry

Antworten:

98

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>
Erweitern Sie das Snippet

fin1te
quelle
4
es ist so einfach - erstelle eine Geige: jeez .... jsfiddle.net/ua61vq4u - das funktioniert übrigens wunderbar - und es reagiert .
zero_cool
1
Was? Sie können ein <br>Tag stylen?!
Ashleedawg
6

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; }
ErsatzRyan
quelle
4

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>
Diadistis
quelle
Wenn Sie SCSS verwenden möchten, können Sie es wie folgt verschachteln: ul.form {width: 500px; Polsterung: 0px; Rand: 0px; Listenstil-Typ: keine; li {Breite: 500px; Eingabe {Breite: 200px; } Textbereich {Breite: 450px; Höhe: 150px; } & .twoColumnPart {float: left; Breite: 250px; }}}
Nathan Meyer
4

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>
Chris
quelle
2

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/

Tomanek1
quelle
0

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/

MingXiao
quelle