Como fazer <label> e <input> aparecerem na mesma linha em um formulário HTML?

99

Estou criando um formulário de registro para um site. Quero que cada rótulo e seu elemento de entrada correspondente apareçam na mesma linha.

Este é meu código:

#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>
Expandir snippet

html css forms Luchxo
fonte
Eu gosto mais que esta resposta não foi rejeitada porque você disse que não queria tentar e errar;)
Anna Klein

Respostas:

72

Assumindo que você deseja fazer os elementos flutuarem, você também terá que flutuar os labelelementos.

Algo assim funcionaria:

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

Exibir trecho de código

Como alternativa, uma abordagem mais comum seria envolver os elementos input/ labelem grupos:

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

Exibir trecho de código

Observe que o foratributo deve corresponder ao idde um elemento rotulável, não ao seu name. Isso permitirá que os usuários cliquem labelem para colocar o foco no elemento de formulário correspondente.

Josh Crozier
fonte
1
obrigado! isso é exatamente o que eu queria alcançar. Ambos os métodos funcionam bem para mim. Tenho 1 pergunta, no css, por que alinho o texto do formulário div ao centro e, em seguida, alinho os rótulos à direita? Se eu não centralizar o alinhamento do div do formulário, isso bagunça meu código?
luchxo
Boa resposta, especialmente a menção de clear: both;que ajudou meu caso.
Sirar Salih
37

Achei que o "display:flex"estilo é uma boa maneira de fazer esses elementos na mesma linha. Não importa que tipo de elemento no div. Especialmente se a classe de entrada for de controle de formulário, outras soluções como bootstrap e bloco embutido não funcionarão bem.

Exemplo:

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

Mais detalhes sobre display: flex:

direção flexível: linha, coluna

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

itens de alinhamento: alongar, flex-start, flex-end, center

facebook-100006652272506
fonte
não sabia da existência de flex
Espoir Murhabazi
20

aaa ## HTML Eu sugiro que você os envolva em um div, já que provavelmente você vai acabar flutuando-os em certos contextos.

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

CSS

Então, dentro desse div, você pode fazer cada peça inline-blockpara que possa usá-la vertical-alignpara centralizá-la - ou definir a linha de base, etc. (seus rótulos e entrada podem mudar de tamanho no 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

ATUALIZAÇÃO: meados de 2016 + com consultas de mídia mobile-first e flex-box

É assim que faço as coisas hoje em dia.

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

xerifederek
fonte
eu tenho que envolver cada rótulo e seu elemento correspondente em uma div diferente? ou apenas incluo todos os rótulos neste div
luchxo
Eu envolvo um intervalo para o 'rótulo' e uma entrada - no <label>elemento hoje em dia.
sheriffderek
5

O que estava faltando era o flutuador: esquerda; aqui está um exemplo feito apenas no 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>

A maneira mais eficiente de fazer isso é adicionar uma classe aos rótulos e definir o float: left; para a aula em CSS

Provisão
fonte
4

Além de usar floats, como outros sugeriram, você também pode contar com uma estrutura como Bootstrap, onde você pode usar a classe "horizontal-form" para ter o rótulo e a entrada na mesma linha.

Se você não estiver familiarizado com o Bootstrap, deverá incluir:

  • o link para o CSS Bootstrap (o link superior onde está escrito <- CSS compilado e minimizado ->) , no cabeçalho, bem como adicionar alguns divs:
  • div class = "form-group"
  • div class = "col -..."
  • junto com class = "col-sm-2 control-label" em cada rótulo, como mostra o Bootstrap, que incluí abaixo.
  • Também reformatei seu botão para que seja compatível com Bootstrap.
  • e adicionou uma legenda à sua caixa de formulário, já que você estava usando um fieldset.

É muito simples e você não teria que mexer com floats ou uma tonelada de CSS para formatação, como você listou acima.

  <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

Para Bootstrap 4, isso poderia ser feito com 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

Estou usando o Angular 6 com Bootstrap 4 e descobri que esta maneira funciona:

<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
Simples e eficaz.
caram
2

Eu fiz isso de várias maneiras diferentes, mas a única maneira que descobri que mantém os rótulos e os dados de texto / entrada correspondentes na mesma linha e sempre se ajustam perfeitamente à largura do pai é usar 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
De todas as respostas acima, usar display: inline-table como você sugeriu funcionou para mim, sem ter que envolver meu rótulo e caixa de entrada em um div.
coder101
2

Envolva o rótulo e a entrada em um 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

Isso funciona bem. Coloca o botão de rádio ou a caixa de seleção com rótulo na mesma linha sem nenhum 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

Exibir trecho de código

user7119463
fonte
-2

Outra opção é colocar uma tabela dentro do formulário. (veja abaixo) Eu sei que as tabelas são desaprovadas por algumas pessoas, mas acho que elas funcionam bem quando se trata de layouts de formulários responsivos.

<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
As tabelas não devem ser usadas para layout.
Michał Perłakowski de
2
1) Todas as letras maiúsculas me machucam. 2) Tabelas, como @Gothdo disse, não devem ser usadas em layout, devem ser usadas apenas em dados tabulares goo.gl/V9dRtp
Padawan