How to align form fields in HTML

Asked

Viewed 1,484 times

0

Hi, I’m developing an HTML form. I wonder how I can align the text boxes to fill?

    <html>
    <head>
    
    <form>
    <title>Formulário</title>
    
    </img src "C:/Users\ASUS/Desktop/APRESENTAÇÃO/images"
    width="50" height="50"/>
    </p>
    
    <table border>
    
    <h1><b>Recrutamento e Seleção</b></h1>
    
    <table border>
    <tr>
    <td><label>Vaga Pretendida:</label></td>
    <td><input type=text name=vaga maxlength=26 size=23>
    <td>Data de Seleção:</td>
    <td><input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Pretensão Salarial:</td>
    <td><input type=text name=pretensao maxlength=8 size=6>
    </table>
    
    <table border>
    <tr>
    <td>Nome:</td>
    <td><input type=text name=nomecompleto maxlength=90 size=97>
    <br>
    </table border>
    
    <table border>
    <td>RG:</td>
    <td><input type=text name=rg maxlength=15 size=20>
    <td>Data de Expedição:</td>
    <td><input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>CPF:</td>
    <td><input type=TEXT name=cpf maxlength=11 size=31 >
    </tr>
    </table>
    
    <tr>
    <table border>
    <td>Sexo:
    <INPUT TYPE="RADIO" NAME="sexo" VALUE="Feminino">Feminino
    <INPUT TYPE="RADIO" NAME="sexo" VALUE="Masculino">Masculino </td>
    
                               <td>Estado Civil:</td>
                               <td> <select name="estado civil"> 
                                                                <option value="value" selected></option>
    															<option value="value1">Solteiro(a)</option>															
    															<option value="value2" >Casado(a)</option>
    															<option value="value3">União Estável</option>
    															<option value="value4">Divorciado(a)</option> 
    															<option value="value5">Viúvo(a)</option>
    						</select></td>
    <td>Data de Nascimento </td>
    <td> <input type="text" name="da" size="1" maxlength="2" value=""> 
    <input type="text" name="ms" size="1" maxlength="2" value=""> 
    <input type="text" name="an" size="1" maxlength="4" value="">
    </td>
    </table>
    </tr>
    
    <table border>
    <td>Nome do pai:</td>
    <td><input type=text name=nomepai maxlength=89 size=89>
    <tr>
    
    <td>Nome da mãe:</td>
    <td><input type=text name=nomemae maxlength=89 size=89>
    </table></tr>
    
    <table border>
    <tr>
    <td>Telefone:</td>
    <td><input type=text name=fone maxlength=11 size=15></td> 
    <td>Celular:</td>
    <td><input type=text name=cel maxlength=11 size=15></td>   
    <td>Email:</td>
    <td><input type=text name=email maxlength=35 size=30></td>
    </tr>
    </table>
    
    <table border>
    					<td>Endereço:</td>
    					<td><input type name=endereco maxlength=50 size=45></td>
    					<td>Número:</td>		
    					<td><input type=text name=numero maxlength=6 size=5></td>
    					</table> 
    <table border>					
    					<td>Complemento</td>
                        <td><input type=text name=complemento maxlength=12 size=10></td>				
                       <td>Bairro:</td>
                       <td><input type=text name=CEP maxlength=35 size=30></td>
    				   <td>Cep</td>
                        <td><input type=text name=cep maxlength=5 size=3> - <input type=text name=cep size=1 maxlength=3>
    					<br>
    					</table>
    					
    					<table border>
    <td>Cidade:</td>
                        <td><input type=text name=cidade maxlength=30 size=22></td>
    
                                                                <td>Estado:</td>
                                                                <td> <select name="estado"> 
                                                                <option value="valor" selected></option>
    															<option value="valor1">AC</option>															
    															<option value="valor2" >AL</option>
    															<option value="valor3">AP</option>
    															<option value="valor4">AM</option> 
    															<option value="valor5">BA</option>
    															<option value="valor6">CE</option>
    															<option value="valor7">DF</option>
    															<option value="valor8">ES</option>
    															<option value="valor9">GO</option> 
    															<option value="valor10">MA</option>
    															<option value="valor11">MT</option>
    															<option value="valor12">MS</option>
    															<option value="valor13">MG</option>
    															<option value="valor14">PA</option> 
    															<option value="valor15">PB</option>
    															<option value="valor16">PE</option>
    															<option value="valor17">PR</option>
    															<option value="valor18">PI</option>
    															<option value="valor19">RJ</option> 
    															<option value="valor20">RN</option>
    															<option value="valor21">RS</option>
    															<option value="valor22">RO</option>
    															<option value="valor23">RR</option>
    															<option value="valor24">SC</option>
    															<option value="valor25">SP</option>
    															<option value="valor26">SE</option>
    															<option value="valor27">TO</option>
    															
    															
                                   </select></td>
    </table>
    
    <table border>
    <tr>
    
    <h3>RESPONDA</h3>
    
    <table border>
    <td>Possui disponibilidade de horário <br>
    <INPUT TYPE="RADIO" NAME="horario" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="horario" VALUE="Não">Não </td>
     <td>Se <b>NÃO</b>, informar o período: <br>
    Matutino<input type=checkbox name=matut value=1>
           Vespertino<input type=checkbox name=vesper value=2>
    Noturno<input type=checkbox name=notur value=3></td>
    </table>
    
    <table border>
    <td>Início Imediato: <br>
    <INPUT TYPE="RADIO" NAME="inicio" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="inicio" VALUE="Não">Não </td>
    <td>Residência: <br>
    <INPUT TYPE="RADIO" NAME="resid" VALUE="Pr">Própria
    <INPUT TYPE="RADIO" NAME="resid" VALUE="Al">Alugada </td>
    <td>Valor do Aluguel:<br>	
    					<input type=text name=alug maxlength=8 size=15></td>
    					</table> 
    
    <table border>
    <td>Reside com quantas pessoas:		<br>
    					<input type=text name=resid maxlength=4 size=25></td>		
    <td>Renda Familiar:<br>	
    					<input type=text name=renda maxlength=8 size=13></td>
    					<td>Filhos/Dependentes: <br>
    <INPUT TYPE="RADIO" NAME="filho" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="filho" VALUE="Não">Não </td>					 			
    <td>Se <b>SIM</b>, qual a idade:<br>		
    					<input type=text name=resid maxlength=25 size=35></td>
    					</table>
    
    <table border>					
    <td>Possui Veículo Próprio:<br>
    <INPUT TYPE="RADIO" NAME="vec" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="vec" VALUE="Não">Não </td>
    <td>Qual veículo?	<br>	
    					<input type=text name=renda maxlength=15 size=12></td>
    <td>Dirige na rodovia:<br>
    <INPUT TYPE="RADIO" NAME="vec" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="vec" VALUE="Não">Não </td>
    </table>					
    
    <h3> INFORMAÇÕES PARA SAÚDE OCUPACIONAL </h3>
    
    <table border>
    <td>Tabagista: <br>
    <INPUT TYPE="RADIO" NAME="tab" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="tab" VALUE="Não">Não </td>
    <td>Ingestão de bebida alcóolica: <br>
    <INPUT TYPE="RADIO" NAME="ing" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="ing" VALUE="Não">Não </td>
    <td>Uso de medicamento: <br>
    <INPUT TYPE="RADIO" NAME="med" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="med" VALUE="Não">Não </td>
    <td>Nome do Medicamento	<br>	
    					<input type=text name=renda maxlength=42 size=40></td>
    					</table>
    
    <table border>
    <td>Acidente de trabalho: <br>
    <INPUT TYPE="RADIO" NAME="acidente" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="acidente" VALUE="Não">Não </td>
    <td>Cirurgia: <br>
    <INPUT TYPE="RADIO" NAME="cirurgia" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="cirurgia" VALUE="Não">Não </td>
    <td>Afastamento pelo INSS: <br>
    <INPUT TYPE="RADIO" NAME="inss" VALUE="Sim">Sim
    <INPUT TYPE="RADIO" NAME="inss" VALUE="Não">Não </td>
    </table>
    
    <table border>
    Em caso de Acidente, cirurgia ou afastamento, comente:<br>
    <textarea name=comentario rows=5 cols=50></textarea>
    </table>
    
    <h3> INFORMAÇÕES PROFISSIONAIS</h3>
    
    <h4> Empregos Anteriores</h4>
    <h4><i> Último</i> </h4>
    
    <table border>
    <td>Empresa<br>
    <input type=text name=empresa maxlength=80 size=77>
    </table></td>
    
    <table border>
    <td>Função <br>
    <input type=text name=function maxlength=50 size=47></td>
    </table>
    
    <table border>
    <td>Data Admissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Data Demissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Motivo da saída<br>
    <input type=text name=motivo maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Último Salário<br>
    <input type=text name=salario maxlength=8 size=7> </td>
    <td>Benefícios Recebidos<br>
    <input type=text name=benefi maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Qtde de funcionários equipe <br>
    <input type=text name=funcionario maxlength=4 size=3></td>
    <td>Maior dificuldade encontrada<<br>
    <input type=text name=dificult maxlength=20 size=15></td>
    <td>Qtde de refeições<br>
    <input type=text name=refei maxlength=6 size=6></td>
    <td>Nome Supervisor/Gerente<br>
    <input type=text name=namesup maxlength=10 size=9></td>
    </table>
    
    </table border>
    <td> Informações que julgue necessário comentar: <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>                                                                  
    
    <h4><i>Penúltimo</i> </h4>
    
    <table border>
    <td>Empresa<br>
    <input type=text name=empresa maxlength=80 size=77>
    </table></td>
    
    <table border>
    <td>Função<br>
    <input type=text name=function maxlength=50 size=47></td>
    </table>
    
    <table border>
    <td>Data Admissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Data Demissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Motivo da saída<br>
    <input type=text name=motivo maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Último Salário<br>
    <input type=text name=salario maxlength=8 size=7> </td>
    <td>Benefícios Recebidos<br>
    <input type=text name=benefi maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Qtde de funcionários equipe <br>
    <input type=text name=funcionario maxlength=4 size=3></td>
    <td>Maior dificuldade encontrada<br>
    <input type=text name=dificult maxlength=20 size=15></td>
    <td>Qtde de refeições<br>
    <input type=text name=refei maxlength=6 size=6></td>
    <td>Nome Supervisor/Gerente<br>
    <input type=text name=namesup maxlength=10 size=9></td>
    </table>
    
    </table border>
    <td> Informações que julgue necessário comentar: <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>                                                                  
    
    <h4><i>Antepenúltimo</i> </h4>
    
    <table border>
    <td>Empresa<br>
    <input type=text name=empresa maxlength=80 size=77>
    </table></td>
    
    <table border>
    <td>Função<br>
    <input type=text name=function maxlength=50 size=47></td>
    </table>
    <table border>
    <td>Data Admissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Data Demissão:<br>
    <input type="text" name="dia" size="1" maxlength="2" value=""> 
    <input type="text" name="mes" size="1" maxlength="2" value=""> 
    <input type="text" name="ano" size="1" maxlength="4" value=""> </td>
    <td>Motivo da saída<br>
    <input type=text name=motivo maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Último Salário<br>
    <input type=text name=salario maxlength=8 size=7> </td>
    <td>Benefícios Recebidos<br>
    <input type=text name=benefi maxlength=26 size=23></td>
    </table>
    
    <table border>
    <td>Qtde de funcionários equipe <br>
    <input type=text name=funcionario maxlength=4 size=3></td>
    <td>Maior dificuldade encontrada<br>
    <input type=text name=dificult maxlength=20 size=15></td>
    <td>Qtde de refeições<br>
    <input type=text name=refei maxlength=6 size=6></td>
    <td>Nome Supervisor/Gerente<br>
    <input type=text name=namesup maxlength=10 size=9></td>
    </table>
    
    </table border>
    <td> Informações que julgue necessário comentar: <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>                                                                  
    
    <h3> COMENTE </h3>
    
    </table border>
    <td> Fale sobre seus pontos <b>FORTES</b> e pontos <b>FRACOS</b>. <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>    
    <br>             
    
    </table border>
    <td> Quais os objetivos para sua vida pessoal? <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>                 
    <br>
    </table border>
    <td> Porque esta empresa deveria te contratar? <br>
    <textarea name=comentario rows=5 cols=50></textarea> </td>
    </table>                 
    
    <br>
    
    <input type="submit" value ="Enviar">
    
    <input type="reset" ="cancelar">
    
    </table>
    </form>
    </body>
    </html>

html form
  • 1

    What are you not getting on board with? Please note what you have already done in HTML, if you are wondering how to get started read this link: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Meu_formulario_HTML

  • Good! I saw that you added HTML to the question, now could specify how you want to align your form?

  • I hate using table to align elements or forms. It’s horrible to work in various screen formats. Mostly cellular. I strongly recommend using the display property: inline-block; it is much easier to work the layout break for various screen sizes.

  • What kind of alignment you want?

1 answer

-1

Man, I don’t quite understand what you want to do but come on.

If you want to take the column between input and label, just use the colspan attribute in the label column, for example. See document: https://www.w3schools.com/tags/att_td_colspan.asp

If it is only alignment, TD has an attribute align that you can set as left, right ou center. Or even, with css, you can use float:left, etc. In the input itself.

  • That doesn’t answer the question.

Browser other questions tagged html form

You are not signed in. Login or sign up in order to post.