You are on page 1of 2

Marcao de formulrios em HTML

O formulrio um elemento HTML <form>. Tal como <div> ou <p> ele envolve outros elementos.
Os elementos dentro de <form> sero os campos de insero de valores. Um tpico formulrio de
contato poderia ser escrito assim:
<form action="/mail.php" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>

O elemento form precisa receber os atributos action e method para auxiliar em sua configurao.
Em action entra a URL da pgina que receber as informaes recebidas pelo formulrio.
Caso essa informao no seja preenchida ela por padro retorna as informaes para
mesma pgina onde se encontra o formulrio.
em method selecionada maneira com a informao ser enviada (get ou post).
A opo get transmite as informaes dos campos por meio de uma URL, no sendo til
para transmitir informaes confidenciais como senhas.
A opo post transmite informaes dentro do protocolo HTTP o que no limita a
quantidade de dados trafegados e protege a informao.
Obs: Para a prova prtica do IBGE no dever ser necessrio incluir uma action no formulrio visto
que isso implementado com programao avanada. O mtodo recomendado o post devido
presena de um campo de senha.
Os campos que recebem as informaes do usurio podem ser compostos por variados tipos de
elementos HTML sendo o mais comum o elemento <input> que varia conforme seu atributo type.
<form>
<input type="text">
<input type="email">
<input type="password">
<input type="submit" value="Enviar">
</form>

No Exemplo acima o elemento formulrio composto de 4 inputs. Cada um tem um atributo type o
que d a eles comportamentos diferentes.

O input type=text permite que o usurio insira texto simples em uma linha. Pode ser usado
para incluso de um nome por exemplo.
O input type=email s aceita valores no formato e-mail, ou seja, o texto deve ter um valor
prximo a seuemail@.com ou retornar um erro.
O input type=password oculta os valores inclusos no campo substituindo os por bolinhas.
Por fim o input type=submit ao ser clicado enviar os dados dos formulrios para o
servidor mas antes o navegador faz uma validao de campos impedindo o envio em caso de
erros.

O uso do elemento Label


Um importante item de acessibilidade em um formulrio est na correta rotulao dos campos por
meio do elemento <label>. O processo bastante simples.
<label for="name">Name:</label>
<input type="text" id="name" />

O elemento <label> precisa se relacionar ao input que ele ir rotular. Para isso usado o atributo for
que dever ter valor idntico ao id do input. O valor da label inclusa entre as tags <label></label>
e normalment aparece ou a esquerda ou acima do elemento input na pgina HTML.

Tornando um Campo Obrigatrio


Para tornar um campo obrigatrio em um formulrio basta inserir o atributo required. Feito isso,
quando o usurio clicar no submit e o campo requerido estiver vazio, ser emitido um sinal de
alerta e o envio ser cancelado.
<input type="text" id="name" required />

Complementando
Existem vrios outros input types (alguns introduzidos pelo HTML 5). Caso tenha interesse em
saber mais visite esse site:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

You might also like