web-dev-qa-db-fra.com

Formulaire HTML avec champs de saisie côte à côte

J'ai un formulaire html qui est essentiellement vertical mais je n'ai vraiment aucune idée de comment créer deux champs de texte sur la même ligne. Par exemple, le formulaire suivant ci-dessous je veux le prénom et le nom sur la même ligne plutôt que l'un en dessous de l'autre.

    <form action="/users" method="post"><div style="margin:0;padding:0">


            <div>
                <label for="username">First Name</label>
                <input id="user_first_name" name="user[first_name]" size="30" type="text" />

            </div>

            <div>
                <label for="name">Last Name</label>
                <input id="user_last_name" name="user[last_name]" size="30" type="text" />
            </div>
            <div>
                <label for="email">Email</label>
                <input id="user_email" name="user[email]" size="30" type="text" />
            </div>
            <div>
                <label for="pass1">Password</label>
                <input id="user_password" name="user[password]" size="30" type="password" />
            </div>
            <div>
                <label for="pass2">Confirm Password</label>

                <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />

            </div>
htmlcssforms
16
Matt Elhotiby

Le style d'affichage par défaut pour un div est "bloc". Cela signifie que chaque nouveau div sera sous le précédent.

Vous pouvez:

Remplacez le style de flux en utilisant float comme le suggère @Sarfraz.

ou

Changez votre html pour utiliser autre chose que des divs pour les éléments que vous voulez sur la même ligne. Je vous suggère de laisser de côté les divs pour le champ "last_name"

<form action="/users" method="post"><div style="margin:0;padding:0">
  <div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30" type="text" />

    <label for="name">Last Name</label>
    <input id="user_last_name" name="user[last_name]" size="30" type="text" />
  </div>
  ... rest is same
8
Larry K

Mettez style="float:left" sur chacune de vos divs:

<div style="float:left;">...........

Exemple: 

<div style="float:left;">
  <label for="username">First Name</label>
  <input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>

<div style="float:left;">
  <label for="name">Last Name</label>
  <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

Pour mettre un élément sur une nouvelle ligne, mettez ce div en dessous:

<div style="clear:both;">&nbsp;</div>

Bien sûr, vous pouvez également créer des classes dans le fichier CSS:

.left{
  float:left;
}

.clear{
  clear:both;
}

Et puis votre html devrait ressembler à ceci:

<div class="left">
  <label for="username">First Name</label>
  <input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>

<div class="left">
  <label for="name">Last Name</label>
  <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

Pour mettre un élément sur une nouvelle ligne, mettez ce div en dessous:

<div class="clear">&nbsp;</div>

Plus d'informations:

19
Sarfraz

Par souci d'économie de bande passante, nous ne devons pas inclure <div> pour chacun des <label> et <input> paire

Cette solution peut mieux vous servir et peut augmenter la lisibilité

<div class="form">
            <label for="product_name">Name</label>
            <input id="product_name" name="product[name]" size="30" type="text" value="4">
            <label for="product_stock">Stock</label>
            <input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
            <label for="price_amount">Amount</label>
            <input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>

Le CSS pour le formulaire ci-dessus serait

.form > label
{
  float: left;
  clear: right;
}

.form > input
{
  float: right;
}

Je crois que la sortie serait la suivante:

Demo

5
Le Duc Duy

Vous devez mettre l'entrée pour le nom de famille dans le même div où vous avez le prénom.

<div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30" type="text" />
    <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

Ensuite, dans votre CSS, donnez votre hauteur #user_first_name et #user_last_name et faites-les flotter vers la gauche. Par exemple:

#user_first_name{
    max-width:100px; /*max-width for responsiveness*/
    float:left;
}

#user_lastname_name{
    max-width:100px;
    float:left;
}
1
Arwen

J'irais avec la solution de Larry K, mais vous pouvez également définir l'affichage sur inline-block si vous voulez les avantages des éléments block et inline.

Vous pouvez le faire dans la balise div en insérant:

style="display:inline-block;"

Ou dans une feuille de style CSS avec cette méthode:

div { display:inline-block; }

J'espère que cela aide, mais comme mentionné précédemment, je choisirais personnellement la solution de Larry K ;-)

1
Mathias Bak