Formulários e entrada de dados em HTML

<form>
.
input elements
.
</form>

Formulários HTML – O elemento Input

O elemento mais importante de um formulário é o elemento <input>. O elemento <input> é usado para obter informações do usuário.
Um elemento <input> pode variar de muitas formas, dependendo do atributo  type. Um elemento <input> pode ser tanto um campo de texto, quando uma caixa de verificação, quanto um campo de senha, dentre outros.
Os tipos de input mais comuns são descritos a seguir:

Campos de texto

<input type=”text”> define um campo de texto de uma linha onde o usuário pode digitar um texto:

<form>
First name:
<input type="text" name="firstname"><br>
Last name:
<input type="text" name="lastname">
</form>

O código acima irá ser exibido no navegador da seguinte forma:

Nota: O formulário propriamente dito não é visível. Note também que o comprimento padrão de um campo de texto é de 20 caracteres.

Campo de senha

<input type=”password”> define uma campo de senha:

<form>
Password:
<input type="password" name="pwd">
</form>

O código  HTML acima irá ser exibido no navegador da seguinte forma:

Nota: Os caracteres digitados em um campo se senha são mascarados (mostrados como asteriscos ou círculos).

Botões de Radio

<input type=”radio”> define um botão de Radio. Botões de Radio permitem que o usuário selecione APENAS UM de um número limitado de escolhas:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

O código HTML acima será exibido no navegador da seguinte forma:

Caixas de verificação

<input type=”checkbox”> define uma caixa de verificação. Caixas de verificação permitem que o usuário selecione ZERO ou MAIS opções de um número limitado e escolhas.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

O código HTML acima será exibido no navegador da seguinte forma:

Botão de submissão

<input type=”submit”> define um botão de submissão.
Um botão de submissão é usado para enviar os dados do formulário para um servidor. Os dados são enviados para a página especificado com o atributo action do formulário. O arquivo definido nesse atributo normalmente faz alguma coisa com a entrada recebida:

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

O código acima será exibido no navegador da seguinte forma:

 
Se você digitar alguns caracteres no campo de texto acima e clicar no botão “Submit”, o navegador irá enviara sua entrada para uma página chamada “html_form_action.asp”. Essa página irá exibir a entrada recebida.

Mais exemplos de entrada

Radio buttons Como criar botões de radaio.
Checkboxes Como criar caixas de verificação, O usuário pode marcar ou desmarcar uma caixa de verificação.
Simple drop-down list Como criar uma lista drop-drown simples.
Drop-down list with a pre-selected value Como criar uma lista drop-drown com valores pré-selecionados.
Textarea Como criar um controle de entrada de texto multi-linhas. Em uma área de texto o usuário pode escrever uma quantidade ilimitada de caracteres.
Create a button Como criar um botão.

Exemplos de formulário

Fieldset around form-data Como criar uma borda em torno dos elementos de um formulário.
Form with text fields and a submit button Como criar um formulário com dois campos de texto e um botão de submissão.
Form with checkboxes Como criar um formulário com duas caixas de verificação e um botão de submissão.
Form with radio buttons Como criar um formulário com dois botões de radio e uma botão de submissão.
Send e-mail from a form Como enviar e-mail a partir de um formulário.

Tags de formulário HTML

New : Novas tags do HTML5.

Traduzido de w3schools.com