Come fare in modo che <label> e <input> appaiano sulla stessa riga in un modulo HTML?

94

Sto creando un modulo di registrazione per un sito web. Voglio che ogni etichetta e il suo corrispondente elemento di input appaiano sulla stessa riga.

Ecco il mio codice:

#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>
Espandi lo snippet

html  css  forms 
— luchxo
fonte
Mi piace di più che questa risposta non sia stata sottovalutata perché hai detto che non vuoi provare a sbagliare;)
— Anna Klein

Risposte:

72

Supponendo che tu voglia far fluttuare gli elementi, dovresti anche far fluttuare gli labelelementi.

Qualcosa del genere funzionerebbe:

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

Mostra snippet di codice

In alternativa, un approccio più comune sarebbe racchiudere gli elementi input/ labelin gruppi:

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

Mostra snippet di codice

Nota che l' forattributo dovrebbe corrispondere al iddi un elemento etichettabile, non al suo name. Ciò consentirà agli utenti di fare clic su labelper evidenziare l'elemento del modulo corrispondente.

— Josh Crozier
fonte
1
Grazie! questo è esattamente ciò che volevo ottenere. Entrambi i metodi funzionano bene per me. 1 domanda che ho, nel css, perché allineare il testo del modulo div al centro e quindi allineare a destra le etichette? se non allineo al centro il modulo div, rovina il mio codice?
— luchxo
Buona risposta, soprattutto la cui menzione ha clear: both;aiutato il mio caso.
— Sirar Salih
33

Ho trovato che lo "display:flex"stile è un buon modo per mettere questi elementi sulla stessa linea. Non importa quale tipo di elemento nel div. Specialmente se la classe di input è form-control, altre soluzioni come bootstrap, inline-block non funzioneranno bene.

Esempio:

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

Maggiori dettagli sul display: flex:

flex-direction: riga, colonna

justify-content: flex-end, center, space-between, space-around

elementi di allineamento: stretch, flex-start, flex-end, center

— facebook-100006652272506
fonte
non era a conoscenza dell'esistenza del flex
— Espoir Murhabazi
18

aaa ## HTML Ti suggerirei di racchiuderli in un div, poiché probabilmente finirai per fluttuarli in determinati contesti.

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

CSS

Quindi, all'interno di quel div, puoi creare ogni pezzo in inline-blockmodo da poterlo utilizzare vertical-alignper centrarli o impostare la linea di base ecc. (Le tue etichette e input potrebbero cambiare dimensioni in futuro ...

.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

AGGIORNAMENTO: metà 2016 + con media query mobile first e flex-box

È così che faccio le cose in questi giorni.

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

— sceriffo
fonte
devo avvolgere ogni etichetta e il suo elemento corrispondente in un div diverso? o includo semplicemente tutte le etichette in questo div
— luchxo
Metto un intervallo per l '"etichetta" e un input - <label>nell'elemento ora un giorno.
— sheriffderek
5

Quello che ti mancava era il galleggiante: a sinistra; ecco un esempio appena fatto in 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>

Il modo più efficiente per farlo è aggiungere una classe alle etichette e impostare il float: left; alla classe in CSS

— Fornitura
fonte
4

Oltre a usare i float, come altri hanno suggerito, puoi anche fare affidamento su un framework come Bootstrap dove puoi usare la classe "horizontal-form" per avere l'etichetta e l'input sulla stessa riga.

Se non hai familiarità con Bootstrap, dovresti includere:

  • il link al Bootstrap CSS (il link in alto dove dice <- Ultimo CSS compilato e minimizzato ->) , in testa, oltre ad aggiungere alcuni div:
  • div class = "form-group"
  • div class = "col -..."
  • insieme a class = "col-sm-2 control-label" in ogni etichetta, come mostra Bootstrap, che ho incluso di seguito.
  • Ho anche riformattato il tuo pulsante in modo che sia compatibile con Bootstrap.
  • e ha aggiunto una legenda, alla casella del modulo, poiché stavi utilizzando un fieldset.

È molto semplice e non dovresti perdere tempo con float o un sacco di CSS per la formattazione, come hai elencato sopra.

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

Per Bootstrap 4 potrebbe essere fatto con 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
fonte
3

Sto usando Angular 6 con Bootstrap 4 e trovo che questo modo funzioni:

<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
fonte
1
Semplice ed efficace.
— caramello
2

L'ho fatto in molti modi diversi, ma l'unico modo che ho trovato che mantiene le etichette e i dati di testo / input corrispondenti sulla stessa riga e si avvolge sempre perfettamente alla larghezza del genitore è usare 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
fonte
Di tutte le risposte sopra, usando display: inline-table come hai suggerito ha funzionato per me, senza dover avvolgere la mia etichetta e la casella di input in un div.
— coder101
2

Avvolgi l'etichetta e l'input all'interno di 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
fonte
2

Questa cosa funziona bene Metti il ​​pulsante di opzione o la casella di controllo con l'etichetta nella stessa riga senza alcun css. <label><input type="radio" value="new" name="filter">NEW</label> <label><input type="radio" value="wow" name="filter">WOW</label>

— Karan Goyal
fonte
1

Mostra snippet di codice

— user7119463
fonte
-2

Un'altra opzione è posizionare una tabella all'interno del modulo. (vedi sotto) So che le tabelle sono disapprovate da alcune persone, ma penso che funzionino bene quando si tratta di layout di moduli reattivi.

<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>
— checkmate711
fonte
2
Le tabelle non devono essere utilizzate per il layout.
— Michał Perłakowski
2
1) Tutto maiuscolo mi fa male. 2) Le tabelle, come ha detto @Gothdo, non devono essere utilizzate nel layout, devono essere utilizzate solo nei dati tabulari goo.gl/V9dRtp
— Padawan
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.