Styling Form avec Label au-dessus des entrées

Question

Je voudrais produire le formulaire ci-dessous style:

Nom E-Mail
[.................] [.................]

Sujet
[.................]

Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

Le code HTML que j'ai est:

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

Au moment où il est produit:

Nom [...................]
E-mail [...................]
Sujet [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]

Quelle serait la meilleure façon de le faire? Je reçois dans un méli-mélo de mes flotteurs!

Answer 1

Je créerais à la fois les éléments input et label display: block , puis scindrais l'étiquette du nom et l'entrée, ainsi que l'étiquette du courrier électronique et l'entrée en div's et les faire flotter les uns à côté des autres.

HTML:

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

CSS

 input, label {
    display:block;
}
 

Answer 2

Vous pouvez essayer quelque chose comme

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

puis css comme

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

Answer 3

Je préférerais ne pas utiliser un élément HTML5 uniquement, tel que <section> . Le regroupement des champs de saisie peut également s'avérer difficile si vous essayez de générer le formulaire avec du code. Il est toujours préférable de produire un balisage similaire pour chacun et de ne changer que les noms de classe. Par conséquent, je recommanderais une solution qui ressemble à ceci:

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>