How to align form fields in HTML
Hi, I'm developing a form in HTML. I would like to know 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> 0
Author: Caique Romero, 2017-09-15
1 answers
Man, I don't quite understand what you want to do but let's go.
If you want to take the column between the input and the 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's just alignment itself, in TD it has an attribute align that you can set to left, right ou center. Or even, with css, you can use float:left, etc. In the input itself.
-1
Author: DiegoSantos, 2017-09-15 19:27:27