Formulários e Entradas (inputs) em HTML

Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário.

Exemplos

Campos de texto
Este exemplo demonstra como criar campos de texto em uma página HTML. Um usuário pode escrever o texto em um campo de texto.

Campos de senha
Este exemplo demonstra como criar um campo de senha em uma página HTML.

(Você encontrará mais exemplos no final desta página.)

Formulários

Um formulário é uma área que pode conter elementos de formulário.

Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário.

Um formulário é definido pela tag <form>.

<form>
  <input>
  <input>
</form>

Entrada (Input)

A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo.

Campos de Texto

Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário.

<form>
Primeiro nome: 
<input type="text" name="firstname">
<br>
Último nome: 
<input type="text" name="lastname">
</form>

Como aparece no navegador:

Observe que o formulário propriamente não está visivel. Também observe que em muitos navegadores, o comprimento do campo de texto é de 20 caracteres por padrão (default).

Botões Radiais

Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada de escolhas.

<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form>

Como aparece no navegador:

Observe que somente uma opção pode ser escolhida.

Caixas de Seleção

As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou mais opções de uma quantidade limitada de escolhas.

<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>

Como aparece no navegador:

O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)

Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.

<form name="input" action="html_form_action.asp"
method="get">
Nome do Usuário: 
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>

Como aparece no navegador:

Se você digitar alguns caracteres no campo de texto acima, e clicar no botão Enviar", você irá enviar a sua entrada para a página chamada "html_form_action.asp". Esta página irá mostrar-lhe a entrada recebida.

Mais Exemplos

Caixas de Seleção (Checkboxes)
Este exemplo demonstra como criar caixas de seleção numa página HTML. Um usuário pode selecionar ou deselecionar uma caixa de seleção.

Botões Radiais (Radiobuttons)
Este exemplo demonstra como criar botões radiais numa página HTML.

Caixa drop down Simples
Este exemplo demonstra como criar uma caixa drop down simples numa página HTML. A caixa drop-down é uma lista selecionável.

Outra caixa drop down
Este exemplo demonstra como criar uma caixa drop down simples com um valor pré-selecionado.

Área de Texto
Este exemplo demonstra como criar uma área de texto (um controle de entrada de texto multi-linhas). Um usuário pode escrever texto na área de texto. Numa área de texto você pode escrever uma quantidade ilimitada de caracteres.

Criar um botão
Este exemplo demonstra com criar um botão. No botão você pode definir o seu próprio texto.

Conjunto de campo em torno dos dados
Este exemplo demonstra como desenhar uma borda com um título em torno dos seus dados.

Exemplos de Formulários

Formulário com campos de entrada e um botão de envio
Este exemplo demonstra como adicionar um formulário em um apágina. O formulário contém dois campos de entrada e um botão de envio.

Formulário com caixas de seleção
Este formulário contém duas caixas de seleção, e um botão de envio.

Formulário com botões radiais
Este formulário contém dois bot~es radiais, e um botão de envio.

Enviar e-mail de um formulário
Este exemplo demonstra como enviar um e-mail de um formulário.

Tags de Formulário