Formulários sem tabelas

https://www.daviferreira.com/posts/formularios-sem-tabelas/

Se você é um cara antenado, já deve saber que não é correto utilizar tabelas para layouts
de páginas HTML. Tabelas devem ser usadas apenas para seu propósito original:
tabulação de dados. Para o restante, como alinhamento de textos, imagens e qualquer
outro elemento em uma página, existem as folhas de estilo.

Aprenda a montar corretamente um formulário web utilizando CSS, evitando o uso de

tabelas para o alinhamento de textos e campos.

Vamos começar falando de tags HTML esquecidas na grande maioria dos formulários
encontrados na web, são elas: fieldset, legend e label. Observe o form abaixo:

<form>
<table>
<tr>
<td colspan="2">Login:</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td>Usuário:</td>
<td><input type="text" name="usuario"/></td>
</tr>
<tr>
<td>Senha:</td>
<td><input type="password" name="senha"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="enviar"/></td>
</tr>
</table>
</form>

Agora vejamos o mesmo formulário utilizando as tags nativas do HTML para forms,
eliminando o uso da tabela:

<form>
<fieldset>
<legend>Login:</legend>
<label for="usuario">Usuário:</label>
<input type="text" name="usuario" id="usuario"/><br />
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha"/><br />
</fieldset>
<input type="submit" value="enviar"/>
</form>

A tag label vem acompanhada do parâmetro “for” (para) contendo o “id” do campo a que
se refere (precisa ser o “id” e não o “name”). Note que alguns tipos de input já vem com
 uma label embutida, como os botões. Neste caso você declara a label no parâmetro
value, diretamente na tag.

Fieldset indica um grupo de campos associados a um mesmo tema. No nosse exemplo, o

fieldsetlogin possui os campos usuário e senha. Finalizando, legend está para fieldset
como label está para input, ou seja, é um rótulo do conjunto de campos.

O código ficou bem mais simples, mas ainda falta alinhar o texto com os campos, como
no formulário com tabelas. Nada que um pouco de CSS não resolva:

label, input {
display: block;
float: left;
}

label {
text-align: right;
width: 35px;
padding-right: 20px;
padding-bottom: 10px;
}

fieldset {
border: solid 1px #000;
}

br {
clear: left;
}

Observe as possibilidades de formatação com a utilização de CSS e das tags fieldset,

legend e label. O formulário fica muito mais organizado e pode ter uma apresentação
muito mais agradável, basta caprichar nas bordas e espaçamentos. Hora de conferir um
pouco mais sobre algumas das propriedades CSS utilizadas neste exemplo:

• display: block - Como o próprio nome sugere, exibe o elemento como um bloco,
permitindo maior flexibilidade na hora de alinhá-lo com outros elementos na página.

• float: left - A propriedade float move um elemento para a esquerda ou direita de seu
elemento “pai”. Por exemplo, um elemento com a propriedade float:left é interpretado
como um bloco e é sempre alinhado à esquerda (até encontrar um outro elemento com
float ou clear). Caso você esteja iniciando agora na montagem de páginas com CSS, fique
ligado nesta propriedade, pois ela será muito utilizada para criação de colunas,
posicionamento de imagens etc.

• clear: left - No nosso caso, a tag br com a propriedade clear: left impede com que
elementos com float: left sejam alinhados à sua esquerda. Funciona, basicamente, como
o início de uma nova linha no que se refere a elementos flutuantes.