Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17236
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Alinhando os inputs do formulário na tabela HTML

17-10-2012 14:03

Geralmente quando usamos tabela para um formulário, colocamos as linhas e colunas assim:

<tr> <td>nome: <input type="text" name="nome" value="" size="20"></td> </tr> <tr> <td>idade: <input type="text" name="nome" value="" size="5"></td> </tr>

Isso acaba fazendo que os inputs do formulário fiquem todos desalinhados, porque como texto de cada campo tem um tamanho, o início da posição de cada tamanho fica em uma posição diferente.

Essa é uma dica para deixar os nomes usado antes do input com um tamanho fixo, para que os inputs fiquem alinhados.

* Obs.: Você deve observar o maior texto no formulário, e se basear por ele para definir o tamanho no CSS.

Segue o CSS do exemplo

<style> span { width:70px; float:left; } </style>

Tabela com os campos do formulário de exemplo

<form action="" method=""> <table> <tr> <td><span>nome </span> <input type="text" name="nome" value="" size="15"></td> </tr> <tr> <td><span>idade </span> <input type="text" name="idade" value="" size="5"></td> </tr> <tr> <td><span>endereço </span> <input type="text" name="endereco" value="" size="30"></td> </tr> <tr> <td><span>Mensagem </span> <textarea cols="50" rows="5"></textarea></td> </tr> </table> </form>

3
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado