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

Vous évitez les nouvelles lignes en sélectionnant une mise en page flottante offrant suffisamment d'espace pour tous les éléments.

Essayez ça :

Echantillon http://jsfiddle.net/8yZff/

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

Answer 2

Pour les données tabulaires, telles qu'un tableau de paires étiquette/champ, utilisez une balise table . Vous trouverez le coiffage beaucoup plus facile, et l'apparence non coiffée bien meilleure.