Comment mettre les éléments d'un formulaire web sur une nouvelle ligne ?

Question

Comment placer les éléments "input" sur de nouvelles lignes ? Dans l'exemple ci-dessus, tous les éléments sont placés de manière séquentielle, c'est-à-dire table->entrée->table->entrée, etc.

/* ----------- My Form ----------- */
.myform{
    margin:0 auto;
    padding:14px;
}
#stylized{
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:right;
    float:left;
}
#stylized input{
    float:left;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */

    <div id="stylized" class="myform">
        <form id="form" name="form" method="post" action="index.html">
        <h1>Data</h1>
        <label>Name: </label>
        <input type="text" name="name" id="name"/>
        <label>Email: </label>
        <input type="text" name="email" id="email"/>
        <label>Password: </label>
        <input type="text" name="password" id="password"/>
        </form>
    </div>

Answer 1

#stylized input{
    display: block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}

Cela mettra chaque entrée sur une nouvelle ligne. - Suppression de "float : left", ajout de "display : block".

Answer 2

Je les ai mis sous des balises de liste et cela a fonctionné sans changer les styles et l'utilisation d'une balise break est obsolète.

<ul>
   <li><input type = "text" name = "selection" value = "text1" /> Text1</li>
   <li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>

Answer 3

Avez-vous essayé quelque chose d'aussi simple que

<label>Name: </label><br>
        <input type="text" name="name" id="name"/> 
        <label>Email: </label><br>
        <input type="text" name="email" id="email"/>

Answer 4

Je pense que la réponse de l'utilisateur1359163 vous aidera, mais vous voudrez peut-être savoir pourquoi : en utilisant float supprime effectivement l'élément du flux normal du document, un peu comme si l'on modifiait l'attribut z-index permettant à l'élément de passer par-dessus les bordures de div, les étiquettes, les espaces et... ignorer clear les styles.

L'élément se comporte comme s'il flottait au-dessus des autres éléments, donc à cet égard, il reste à l'écart de la gauche et de la droite de tous les autres éléments qui ne flottent pas. Je ne suis pas un expert en CSS, mais cette façon de voir les choses m'a beaucoup aidé à résoudre les problèmes de mise en page déformée que j'ai rencontrés lors de l'utilisation de la commande float , clear y z-index les styles.

Answer 5

Voici JsFiddle pour ça...

Edit :

#stylized label{
    font-size:11px;
    font-weight:bold;
    text-align:right;
}
#stylized input{
    display:block;
    font-size:11px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:70px;
    margin:2px 0 20px 10px;
}​