Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gardenajj

[Resolvido] Alinhar formulario

Por , em Desenvolvimento frontend

Recommended Posts

Gardenajj    0

Gardenajj
Postado

Galera tive somente 2 aulas de html ate agora em um curso de PHP que estou fazendo, e tenho que aprender a alinhar formularios, como posso alinhar ele?

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    <body>
    <form name="formulario" action="processa.php" method="get">
        <table>
        <tr>
        <th colspan="2">Formulário de contato</th>
        </tr>
        <tr>
        <td><label>Nome:</label></td>
        <td><input type="text" name="nome"  size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Sexo:</label></td>
        <td><input type="radio" name="sexo" value="m"checked>Masculino</td>
        <td><input type="radio" name="sexo" value="f">Feminino</td>
        <td><input type="radio" name="sexo" value="e">Emo</td>
        </tr>

        <tr>
        <td><label>E-mail:</label></td>
        <td><input type="text" name="email" size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Login:</label></td>
        <td><input type="text" name="login" size="40" maxlength="10"></td>
        </tr>

        <tr>
        <td><label>Senha:</label></td>
        <td><input type="password" name="senha" size="40" maxlength="20"></td>
        </tr>

        <tr>
        <td><label>Telefone:</label></td>
        <td><input type="text" name="ddd" size="2" maxlength="2"></td>
        <td><input type="text" name="numero" size="8" maxlength="8"></td>
        </tr>

        <tr>
        <td><label>Endereço:</label></td>
        <td><input type="text" name="endereco" size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Obeservações:</label></td>
        <td><textarea name="observacoes" cols="40" rows="5" > </textarea>
        </tr>

        <tr>
        <td><label>Interesse:</label></td>
        <td><input type="checkbox" name="interesses1" value="php"> PHP</td>
 <td><input type="checkbox" name="interesses2" value="java"> Java</td>
        <td><input type="checkbox" name="interesses3" value="javascript"> Java Script</td>
 <td><input type="checkbox" name="interesses4" value="rubyonrails"> Ruby on rails</td>
 <td><input type="checkbox" name="interesses5" value="python"> Python</td>
 <td><input type="checkbox" name="interesses6" value="c"> C</td>
        <td><input type="checkbox" name="interesses7" value="c++"> C++</td>
        </tr>

    </form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Weber    0

Vinicius Weber
Postado

Cara, o melhor jeito de alinhar formulários é usando CSS e classes para os parametros do form, eu costumo criar classes e jogar a classe para o form.

 

ou senao voce fazer desse modo.

 

<input type="text" name="exemplo" style="width:150px; height:20px;" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

CarlosMarx    4

CarlosMarx
Postado

Não sei exatamente de que tipo de alinhamento você está falando, mas, sei que dessa forma aqui todos os campos ficarão alinhados corretamente.

 


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
    <body>
    <form name="formulario" action="processa.php" method="get">
        <table>
        <tr>
        <th colspan="2">Formulário de contato</th>
        </tr>
        <tr>
        <td><label>Nome:</label></td>
        <td><input type="text" name="nome"  size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Sexo:</label></td>
        <td><input type="radio" name="sexo" value="m" checked="checked" />Masculino
        <input type="radio" name="sexo" value="f" />Feminino
        <input type="radio" name="sexo" value="e" />Emo</td>
        </tr>

        <tr>
        <td><label>E-mail:</label></td>
        <td><input type="text" name="email" size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Login:</label></td>
        <td><input type="text" name="login" size="40" maxlength="10"></td>
        </tr>

        <tr>
        <td><label>Senha:</label></td>
        <td><input type="password" name="senha" size="40" maxlength="20"></td>
        </tr>

        <tr>
        <td><label>Telefone:</label></td>
        <td><input type="text" name="ddd" size="2" maxlength="2">
        <input type="text" name="numero" size="8" maxlength="8"></td>
        </tr>

        <tr>
        <td><label>Endereço:</label></td>
        <td><input type="text" name="endereco" size="40" maxlength="30"></td>
        </tr>

        <tr>
        <td><label>Obeservações:</label></td>
        <td><textarea name="observacoes" cols="40" rows="5" > </textarea>
        </tr>


        <tr>
        <td><label>Interesse:</label></td>
        <td><input type="checkbox" name="interesses1" value="php"> PHP
        <input type="checkbox" name="interesses2" value="java"> Java
        <input type="checkbox" name="interesses3" value="javascript"> Java Script
        <input type="checkbox" name="interesses4" value="rubyonrails"> Ruby on rails
        <input type="checkbox" name="interesses5" value="python"> Python
        <input type="checkbox" name="interesses6" value="c"> C
        <input type="checkbox" name="interesses7" value="c++"> C++</td>
        </tr>

    </form>

</body>
</html>

 

Qualquer dúvida posta aí.

Obs: Já que está trabalhando com tabelas procure mais informações sobre o comportamento das linhas e colunas de tabelas HTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gardenajj    0

Gardenajj
Postado

===================================================================================================================

===================================================================================================================

 

CARLOSMARX valeu você ajudou mesmo, assim acabei descobrindo que uma das formar pra corrigir um erros como o do campo "telefone" que ficava desalinha era simplesmente não colocar assim 

  
<tr>
        <td><label>Telefone:</label></td>
        <td><input type="text" name="ddd" size="2" maxlength="2"></td>
        <td><input type="text" name="numero" size="8" maxlength="8"></td>
</tr>

 

 

E sim da sua forma retirando alguns <td>!

        <tr>
        <td><label>Telefone:</label></td>
        <td><input type="text" name="ddd" size="2" maxlength="2">
        <input type="text" name="numero" size="8" maxlength="8"></td>
        </tr>

 

No fim acabou ficando assim a minha tabela com a ajuda de vcs!

 

Só a cor do corpo <body> que não ficou bem ajustada , mas valeu !

 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario</title>
</head>

<body >
<form>

<table bgcolor="#F0FFGFF">
     <tr>
        <td colspan="2"><h4>Formulario de cadastro</h4></td>
     </tr>
     <tr>
        <td colspan="2"><hr /></td>
     </tr> 
     <tr>
        <td>Nome:</td>
        <td><input type="text" name="nome" size="70" maxlength="60"/></td>
     </tr> 
     <tr>
     <td>Sexo:</td>
     <td><input name="sexo" type="radio" value="Masculino" checked="checked" />Masculino
         <input name="sexo" type="radio" value="Feminino" />Feminino <span class="style1"></span> </td>
     </tr>
     <tr>
        <td>E-mail:</td>
        <td><input type="text" name="email" maxlength="30"/></td>
     </tr>
     <tr>
     <td>DDD:</td>
     <td><input name="ddd" type="text" id="ddd" size="4" maxlength="2" />
         Telefone:
         <input type="text" name="telefone"  id="telefone" />
         <span class="style3">Apenas números</span> </td>
     </tr>
     <tr>
     <td>Endereço:</td>
     <td><input type="text" name="endereco" id="endereco" size="70" maxlength="70" />
     <span class="style1">*</span></td>
     </tr>   
     <tr>
     <td>Cidade:</td>
     <td><input type="text" name="cidade" id="cidade" maxlength="20" />
     <span class="style1">*</span></td>
     </tr>
     <tr>
     <td>Estado:</td>
     <td><select name="estado" id="estado">
        <option>Selecione...</option>
        <option value="ac">AC</option>
        <option value="al">AL</option>
        <option value="ap">AP</option>
        <option value="am">AM</option>
        <option value="ba">BA</option>
        <option value="ce">CE</option>
        <option value="es">ES</option>
        <option value="df">DF</option>
        <option value="ma">MA</option>
        <option value="mt">MT</option>
        <option value="ms">MS</option>
        <option value="mg">MG</option>
        <option value="pa">PA</option>
        <option value="pb">PB</option>
        <option value="pr">PR</option>
        <option value="pe">PE</option>
        <option value="pi">PI</option>
        <option value="rj">RJ</option>
        <option value="rn">RN</option>
        <option value="rs">RS</option>
        <option value="ro">RO</option>
        <option value="rr">RR</option>
        <option value="sc">SC</option>
        <option value="sp">SP</option>
        <option value="se">SE</option>
        <option value="to">TO</option>          
           </select>
        <span class="style1">*</span></td>
     </tr>
     <tr>
     <td>Bairro:</td>
     <td><input type="text" name="bairro" id="bairro" maxlength="20" />
        <span class="style1">*</span></td>
     </tr>      
     <tr>
     <td>País:</td>
     <td><input type="text" name="pais" id="pais" maxlength="20" />
        <span class="style1">*</span></td>
     </tr>
     <tr>
     <td>Interesses:</td>
     <td><input type="checkbox" name="interesses1" value="php">PHP
      <input type="checkbox" name="interesses2" value="java">Java
      <input type="checkbox" name="interesses3" value="javascript">Java Script
      <input type="checkbox" name="interesses4" value="rubyonrails">Ruby on rails
      <input type="checkbox" name="interesses5" value="python">Python
      <input type="checkbox" name="interesses6" value="c">C
         <input type="checkbox" name="interesses7" value="c++">C++
         <input type="checkbox" name="interesses8" value="mono">Mono
     </td>    
     </tr>
     <tr>
     <td><label>Obeservações:</label></td>
     <td><textarea name="observacoes" cols="40" rows="5" > </textarea></td>
     </tr>
     <tr>
     <td>Login:</td>
     <td><input type="text" name="login" id="login" maxlength="10" />
        <span class="style1">*</span></td>
     </tr>
     <tr>
     <td>Senha:</td>
     <td><input type="password" name="senha" id="senha" maxlength="30" />
        <span class="style1">*</span></td>
     </tr>   
     <tr>
     <td colspan="2"><input type="checkbox" name="rec_novidades" id="rec_novidades" value="ATIVO" checked="checked" />
     Desejo receber novidade e informações via e-mail. </td>
     </tr>
     <tr>
     <td colspan="2"><p>
        <input type="submit" name="cadastrar" id="cadastrar" value="Concluir cadastro" />

        <input type="reset" name="limpar" id="limpar" value="Limpar campos preenchidos!" />

        <span class="style1">Campo com * são obrigatorios</span></p>
      </td>
      </tr>  



</table>


</form>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito