Formulários 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 todo 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 fieldset login 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.

Legal, não? Neste link você encontra alguns exemplos avançados de formulários CSS. Espero que tenham gostado e até a próxima!