Como alinhar formulários de entrada em HTML

117

Sou novo em HTML e estou tentando aprender a usar formulários.

O maior problema que estou tendo até agora é o alinhamento dos formulários. Aqui está um exemplo do meu arquivo HTML atual:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

O problema com isso é que a caixa de campo após 'E-mail' é drasticamente diferente em termos de espaçamento em comparação com o nome e o sobrenome. Qual é a maneira "adequada" de fazer com que eles se "alinhem" essencialmente?

Estou tentando praticar boa forma e sintaxe ... muitas pessoas podem fazer isso com CSS. Não tenho certeza, só aprendi o básico de HTML até agora.

html forms alignment

— yoshyosh
fonte

há uma luta constante entre quando tabelas (se houver), as respostas à sua pergunta não são a exceção, o ponto médio parece ser que <tables> é para dados tabulares, veja mais aqui: stackoverflow.com/questions/83073 /…

— Trufa

Exatamente a mesma pergunta, mas a resposta sugere o uso da tag <table> com a citação de W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Outro exemplo, este usa CSS, eu simplesmente coloco o formulário em uma div com a classe container. E especificou que os elementos de entrada contidos devem ter 100% da largura do contêiner e não ter nenhum elemento em nenhum dos lados.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Expandir trecho

— serialk
fonte

2

Perfeito, acabou de me salvar de muita confusão.

— nulo

Também está expandindo meu botão "enviar" para a largura do contêiner.

— Saurabh Rana

4

Esta solução parece não funcionar. Os elementos de entrada não são alinhados à esquerda. A solução da tabela abaixo funciona.

— johny porque

1

Não sou um grande fã de definir uma largura explícita, quando você pode fazer sem ela (veja minha resposta abaixo)

— Clément

1

Isso dá resultados estranhos com botões de rádio. O rótulo do botão de opção mostra a linha após o botão de opção real.

— palavras da mesma forma

134

A resposta aceita (definir uma largura explícita em pixels) torna difícil fazer alterações e quebra quando seus usuários usam um tamanho de fonte diferente. Usar 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>

Expandir trecho

Aqui está um JSFiddle: http://jsfiddle.net/DaS39/1/

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

EDITAR: Mais uma nota rápida: as tabelas CSS também permitem brincar com colunas: por exemplo, se você quiser que os campos de entrada ocupem o máximo de espaço possível, você pode adicionar o seguinte em seu formulário

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

você pode querer adicionar white-space: nowrapao labelsnesse caso.

— Clemente
fonte

4

Eu gosto dessa solução. Isso significa que não preciso me preocupar com a inevitável mudança de largura das colunas conforme a página evolui no desenvolvimento. +1

— Tom Lord

9

@MuhammadUmer Porque as tabelas confundem leitores de tela e muitos dispositivos assistivos, enquanto as tabelas CSS separam a apresentação e o conteúdo. Assim, seu formulário permanece facilmente analisável por um leitor de tela ou assistente de leitura e, ainda assim, é exibido de maneira adequada.

— Clément

3

Bem, o rótulo adequado em td sugere que faz parte de dados tabulares organizados, como gráficos; não é o caso aqui. Além disso, o uso de tabelas HTML torna mais difícil alterar o layout no futuro ou adaptá-lo a vários tamanhos de tela (pense em telefones celulares e tablets).

— Clément de

4

Tenho resistido fortemente à estrutura de tabelas CSS com o mesmo argumento que @MuhammadUmer estava fazendo, até hoje! Eu cedi e decidi tentar e finalmente ver o valor da troca! Além disso, seu CSS facilita as coisas a longo prazo

— BillyNair

2

Como você pode expandir colunas com esta solução? Para centralizar o botão de envio.

— eugenekr

31

Uma solução simples para você, se você é novo em HTML, é 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>

— Amonett
fonte

43

Solução rápida e simples. Deixe os debates religiosos sobre CSS para o intervalo do almoço e faça o trabalho.

— Emmanuel Bourg,

3

@ClarkeyBoy - quem se importa, contanto que esteja fazendo o trabalho.

— SolidSnake

1

@ClarkeyBoy - comentário mais ignorante? lol .. Eu não quero entrar em uma discussão com você aqui .. se você quiser fazer do jeito divs faça. Se você quiser fazer isso nas tabelas, depende de você. mas não presuma que todos os clientes ou pessoas se importarão com isso. a maioria deles se preocupa em fazer o trabalho ..

— SolidSnake

2

@ClarkeyBoy - Leia esta resposta e a postagem de W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: Não é exatamente para isso que as tabelas CSS se destinam? Obtendo um layout semelhante a uma tabela sem confundir os leitores de tela? O layout que o OP pede é realmente muito fácil de conseguir usando tabelas CSS (veja abaixo )

— Clément

17

Acho muito mais fácil alterar a exibição dos rótulos para inline-block e definir uma largura

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

— Byron
fonte

9

Você deve usar uma mesa. Por uma questão de estrutura lógica os dados são tabulares: é por isso que você quer alinhá-los, pois quer mostrar que os rótulos não estão relacionados apenas às suas caixas de entrada, mas também entre si, em uma estrutura bidimensional.

[considere o que você faria se tivesse strings ou valores numéricos para exibir em vez de caixas de entrada.]

— Rua Collin
fonte

2

Agradeço sua abordagem.

— Jono

2

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

Algo assim resolveria o problema:

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

Uma desvantagem, entretanto: você pode ter que escolher a largura de rótulo certa para cada formulário, e isso não é fácil se seus rótulos puderem ser dinâmicos (rótulos I18N, por exemplo).

— Samuel EUSTACHI
fonte

1

Sou um grande fã de usar listas de definição.

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

Eles são fáceis de estilizar usando CSS e evitam o estigma de usar tabelas para layout.

— Andrew
fonte

Isso é facilmente realizado com divs (a ddapenas tem uma margem esquerda de aproximadamente 40 px) e evita qualquer confusão semântica. Além disso, nenhum desses alinha os rótulos / entradas na mesma linha.

— Hollister

1

usando css

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

isso dá a você algo como:

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

— Gjaa
fonte

Você também deve usar clearpara evitar que os formulários se amontoem para, digamos, larguras menores

— TheMaster de

0

O método tradicional é usar uma mesa.

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>

No entanto, muitos argumentariam que as tabelas são restritivas e preferem CSS. A vantagem de usar CSS é que você pode usar vários elementos. De divs, lista ordenada e não ordenada, você pode obter o mesmo layout.

No final, você vai querer usar o que achar mais confortável.

Dica: as tabelas são fáceis de começar.

— Soluções OV Web
fonte

1

+1 por afirmar que eles são fáceis de começar ... mas na verdade os desenvolvedores devem apenas recorrer a tabelas para dados (veja meu comentário em outra resposta para o discurso completo!)

— ClarkeyBoy

1

Usar tabelas CSS é igualmente fácil e não tem os problemas de acessibilidade associados. Veja minha resposta abaixo.

— Clément

0

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

O que você pode usar são técnicas de flutuação CSS.

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 do IE7: problemas de flutuação certa do IE7

— mauris
fonte

obrigado pelos exemplos, entretanto o formulário HTML ainda não resolve o problema. Se você alterar o 'Nome' em um deles para apenas 'Nome', por exemplo, acabo com o mesmo problema que tive da primeira vez

— yoshyosh

Já trabalhei com isso de designers e é um pouco frágil, IME. Para este layout básico, funcionará 98% das vezes. Tente ser muito complexo, por exemplo, layout de duas colunas ou rótulos de várias linhas, e fica difícil.

— estática em

1

@staticsan - se você entende floats, clears e divs, trabalhará bem com esse layout e, na verdade, eles renderizam mais rápido e são mais flexíveis em comparação com as tabelas dos navegadores modernos.

— mauris

Bem, eu pensei que entendia floats, clears e divs, mas eu não poderia estender a forma que me foi dada sem quebrar. Fosse uma falha no meu entendimento ou na implementação do designer, o fato era que era frágil. (Curiosamente, a próxima versão ul

— terá

0

Sei que isso já foi respondido, mas encontrei uma nova maneira de alinhá-los bem - com um benefício extra - consulte http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

Basicamente, você usa o elemento label em torno da entrada e alinha usando:

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

e então com css você simplesmente alinha:

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 nenhuma barra bagunçada para quebras de linha - o que significa que você pode realizar rapidamente um layout de várias colunas dinamicamente
toda a linha é clicável. Especialmente para caixas de seleção, isso é uma grande ajuda.
Mostrar / ocultar dinamicamente as linhas do formulário é fácil (basta pesquisar a entrada e ocultar seu pai -> o rótulo)
você pode atribuir classes a todo o rótulo, tornando-o mais claro a entrada de erro (não apenas em torno do campo de entrada)

— Niko
fonte

Bom, mas precisa de largura de etiqueta fixa. O texto do rótulo grande substitui a entrada.

— mauretto

0

A resposta de Clément é de longe a melhor. Aqui está uma resposta um pouco melhorada, mostrando diferentes alinhamentos possíveis, incluindo botões alinhados esquerda-centro-direita:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Expandir trecho

Eu adicionei um pouco de preenchimento à direita de todos os rótulos ( padding-right:8px) apenas para tornar o exemplo um pouco menos horrível, mas isso deve ser feito com mais cuidado em um projeto real (adicionar preenchimento a todos os outros elementos também seria uma boa ideia).

— Cyberknight
fonte

-1

css eu costumava 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 registro 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>

É muito simples e estou apenas começando, mas funcionou muito bem

— PA_Commons
fonte

-1

Insira tags de entrada dentro de uma lista não ordenada. Torne o tipo de estilo nenhum. Aqui está um exemplo.

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

Funcionou para mim!

— Vivek Iyer
fonte

Isso nunca funcionaria. ULiria apenas recuar o conteúdo da margem, sem alinhar nada. Colocar os inputs LIapenas adicionaria um marcador antes deles (sim, eles seriam alinhados, como uma lista, não contra os rótulos). Além disso, "Input2" ficaria com o inputelemento anterior , porque os LInão estão fechados (não há </li>) e não há início <li>para esse "rótulo", então ele será tratado como deveria, texto comum, portanto, concatenado ao elemento anterior. Por último, o código tem um erro, o fechamento <ul/>deveria ser </ul>.

— Cyberknight

-2

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

No CSS, você deve declarar rótulo e entrada como display: inline-block e fornecer largura de acordo com seus requisitos. Espero que isso ajude você. :)

— kta
fonte

-4

Basta adicionar

<form align="center ></from>

Basta alinhar na tag de abertura.

— Zak Gill
fonte

Isso não funcionaria, pois formnão tem alignatributo (e mesmo se tivesse, seria obsoleto para o uso de estilo / CSS). Além disso, a tag de fechamento está errada, deveria estar </form>. É possível definir style="text-align:center"dentro do form, o que alinharia todo o conteúdo do formulário no centro, mas não era sobre isso que a pergunta original era. Isso nunca alinharia os rótulos com seus campos de entrada (sim, testei no Firefox 75, só para ter certeza).

— Cyberknight