Comment faire apparaître <label> et <input> sur la même ligne sur un formulaire HTML?

94

Je crée un formulaire d'inscription pour un site Web. Je veux que chaque étiquette et son élément d'entrée correspondant apparaissent sur la même ligne.

Voici mon code:

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}
<div id="form">

 <form action="" method="post" name="registration" class="register">
  
  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />
   
   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div>
Développer l'extrait

html css forms Luchxo
la source
J'aime le plus que cette réponse n'ait pas été rejetée parce que vous avez dit que vous ne voulez pas essayer et que vous faites une erreur;)
Anna Klein

Réponses:

72

En supposant que vous vouliez faire flotter les éléments, vous devrez également faire flotter les labeléléments.

Quelque chose comme ça fonctionnerait:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

Afficher l'extrait de code

Alternativement, une approche plus courante consisterait à regrouper les éléments input/ labeldans des groupes:

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

Afficher l'extrait de code

Notez que l' forattribut doit correspondre au idd'un élément étiquetable, pas à son name. Cela permettra aux utilisateurs de cliquer sur labelpour donner le focus à l'élément de formulaire correspondant.

Josh Crozier
la source
1
Merci! c'est exactement ce que je voulais réaliser. Les deux méthodes fonctionnent bien pour moi. 1 question que j'ai, dans le CSS, pourquoi dois-je aligner le texte du formulaire div au centre puis aligner à droite les étiquettes? si je ne centre pas aligner le formulaire div, est-ce que cela gâche mon code?
luchxo
Bonne réponse, surtout dont la mention a clear: both;aidé mon cas.
Sirar Salih
33

J'ai trouvé que le "display:flex"style est un bon moyen de créer ces éléments dans la même ligne. Peu importe le type d'élément de la div. Surtout si la classe d'entrée est form-control, d'autres solutions comme bootstrap, inline-block ne fonctionneront pas bien.

Exemple:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

Plus de détails sur l'affichage: flex:

flex-direction: ligne, colonne

justify-content: flex-end, centre, espace entre, espace autour

align-items: stretch, flex-start, flex-end, center

facebook-100006652272506
la source
pas au courant de l'existence du flex
Espoir Murhabazi
18

aaa ## HTML Je vous suggère de les envelopper dans un div, car vous finirez probablement par les faire flotter dans certains contextes.

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

Ensuite, dans cette division, vous pouvez créer chaque pièce inline-blockafin de pouvoir l'utiliser vertical-alignpour les centrer - ou définir une ligne de base, etc.

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

MISE À JOUR: mi 2016 + avec des requêtes multimédias mobiles et une boîte flexible

C'est ainsi que je fais les choses ces jours-ci.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

shérifderek
la source
dois-je envelopper chaque étiquette et son élément correspondant dans un div différent? ou j'inclus simplement toutes les étiquettes dans cette div
luchxo
J'enroule une étendue pour le «label» et une entrée - dans l' <label>élément maintenant quelques jours.
sheriffderek
5

Ce qui vous manquait était le flotteur: à gauche; voici un exemple juste fait dans le HTML

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

Le moyen le plus efficace pour ce faire est d'ajouter une classe aux étiquettes et de définir le float: left; à la classe en CSS

Disposition
la source
4

En plus d'utiliser des flotteurs, comme d'autres l'ont suggéré, vous pouvez également vous fier à un framework tel que Bootstrap où vous pouvez utiliser la classe "horizontal-form" pour avoir l'étiquette et l'entrée sur la même ligne.

Si vous n'êtes pas familier avec Bootstrap, vous devrez inclure:

  • le lien vers le CSS Bootstrap (le lien du haut où il est dit <- Dernier CSS compilé et minifié ->) , dans la tête, ainsi que d'ajouter quelques divs:
  • div class = "form-group"
  • div class = "col -..."
  • avec class = "col-sm-2 control-label" dans chaque étiquette, comme le montre Bootstrap, que j'ai inclus ci-dessous.
  • J'ai également reformaté votre bouton pour qu'il soit compatible avec Bootstrap.
  • et ajouté une légende, à votre boîte de formulaire, puisque vous utilisiez un fieldset.

C'est très simple et vous n'auriez pas à jouer avec des flotteurs ou une tonne de CSS pour le formatage, comme vous l'avez indiqué ci-dessus.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

Padawan
la source
3

Pour Bootstrap 4, cela pourrait être fait avec class="form-group" style="display: flex" 

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>
Grigory Kislin
la source
3

J'utilise Angular 6 avec Bootstrap 4 et je trouve que cela fonctionne:

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>
W Kenny
la source
1
Simple et efficace.
caram le
2

J'ai fait cela de plusieurs manières différentes, mais le seul moyen que j'ai trouvé qui garde les étiquettes et les données de texte / d'entrée correspondantes sur la même ligne et s'adapte toujours parfaitement à la largeur du parent est d'utiliser display: inline table.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>
Tom Berthold
la source
De toutes les réponses ci-dessus, utiliser display: inline-table comme vous l'avez suggéré a fonctionné pour moi, sans avoir à envelopper mon étiquette et ma zone de saisie dans un div.
coder101 le
2

Enveloppez l'étiquette et l'entrée dans un div bootstraps 

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>
Jay Wright
la source
2

Cette chose fonctionne bien.Il met un bouton radio ou une case à cocher avec l'étiquette dans la même ligne sans css. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

Karan Goyal
la source
1

Afficher l'extrait de code

user7119463
la source
-2

Une autre option consiste à placer une table à l'intérieur du formulaire. (voir ci-dessous) Je sais que les tableaux sont désapprouvés par certaines personnes, mais je pense qu'ils fonctionnent bien en ce qui concerne les mises en page de formulaires réactifs.

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>
échec et mat711
la source
2
Les tableaux ne doivent pas être utilisés pour la mise en page.
Michał Perłakowski
2
1) Tous les casquettes me font mal. 2) Les tableaux, comme @Gothdo l'a dit, ne doivent pas être utilisés dans la mise en page, ils ne doivent être utilisés que dans les données tabulaires goo.gl/V9dRtp
Padawan