Como alinhar os formulários de entrada em HTML

A resposta aceite (definindo uma largura explícita em pixels) torna difícil fazer alterações e quebras quando os utilizadores usam um tamanho de letra diferente. Usando tabelas CSS, por outro lado, funciona muito bem:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

E se precisar dos rótulos alinhados à direita, basta adicionar text-align: right aos rótulos: http://jsfiddle.net/DaS39/

Editar: mais uma rápida Nota: as tabelas CSS também lhe permitem jogar com colunas: por exemplo, se quiser que os campos de entrada ocupem o máximo de espaço possível, pode adicionar o seguinte no seu formulário

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

Pode querer adicionar white-space: nowrap Ao labels nesse caso.

Uma solução simples para você se você é novo para HTML, é apenas usar uma tabela para alinhar tudo.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

Acho muito mais fácil mudar a visualização das legendas para bloco em linha e definir uma largura

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

Deve usar uma tabela. Como uma questão de estrutura lógica os dados tabulares: é por isso que você deseja alinhar, porque você quer mostrar que as etiquetas não estão relacionados exclusivamente às suas caixas de entrada, mas também uns aos outros, em uma estrutura bidimensional.

[Considere o que faria se tivesse um texto ou valores numéricos para mostrar em vez de campos de entrada.]

Para isso, eu prefiro manter uma semântica HTML correta, e usar um CSS o mais simples possível.

label{
  display: block;
  float: left;
  width : 120px;    
}

Uma desvantagem no entanto: você pode ter que escolher a largura de etiqueta certa para cada formulário, e isso não é fácil se as suas etiquetas podem ser dinâmicas (etiquetas I18N, por exemplo).

Utilizar css

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

           label1 |input box             |
    another label |another input box     |

Bem, para o básico você pode tentar alinhá-los na mesa. No entanto, o uso da tabela é ruim para o layout, uma vez que a tabela é destinada para o conteúdo.

Código CSS

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Um artigo elaborado que escrevi pode ser encontrado respondendo à questão do problema de flutuação IE7: IE7 problemas de flutuação direita

Basicamente, você usa o elemento label em torno da entrada e alinhar com isso:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

E depois com o css você simplesmente alinhar:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

• Você não precisa de nenhum br confuso deitado por aí para linebreaks-o que significa que você pode rapidamente realizar um layout multi-colunas dinamicamente
• toda a linha é click-able. Especialmente para caixas de cheques isso é uma grande ajuda.
• Mostrar/esconder dinamicamente as linhas do formulário é fácil (basta procurar a entrada e esconder o seu pai -> a legenda)
• Você pode atribuir classes a toda a legenda, fazendo-a mostrar a entrada de erros muito mais clara (não só em torno do campo de entrada)

O método tradicional é utilizar um quadro.

Exemplo:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

O Css que usei para resolver este problema, semelhante ao Gjaa, mas com um estilo melhor

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Aqui está o meu HTML, usado especificamente para um formulário de registo simples sem código php

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

Inserir marcas de entrada dentro de uma lista não ordenada.Fazer o estilo-Tipo Nenhum. Aqui está um exemplo.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

No CSS tem de declarar tanto a etiqueta como a entrada como a apresentação: bloco de entrada e dar a largura de acordo com os seus requisitos. Espero que isto te ajude. :)

<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>

Pode adicionar algum enchimento ou flutuar o conteúdo da célula para que pareça mais espaçoso.

Basta adicionar

<form align="center ></from>