Formulários e Entradas (inputs) em HTML

HOME

HTML Básico
HTML INÍCIO
HTML & WWW
Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário.
HTML Introdução
HTML Elementos
HTML Tags Básicas
Exemplos
HTML Formatação
HTML Entidades Campos de texto
HTML Links Este exemplo demonstra como criar campos de texto em uma página HTML. Um usuário pode escrever o texto
HTML Frames em um campo de texto.
HTML Tabelas
HTML Listas Campos de senha
HTML Formulários Este exemplo demonstra como criar um campo de senha em uma página HTML.
HTML Imagens
HTML Background (Você encontrará mais exemplos no final desta página.)

HTML Avançado
HTML Layout Formulários
HTML Fontes
HTML Porque 4.0? Um formulário é uma área que pode conter elementos de formulário.
HTML Estilos
HTML Head Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto,
HTML Meta campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário.
HTML URLs
HTML Scripts Um formulário é definido pela tag <form>.
HTML Webserver
<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:

Primeiro nome:
Último nome:

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:

 Masculino
Feminino

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:

Eu tenho uma bicicleta

Eu tenho um carro

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:

Nome do Usuário: Enviar

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

Tag Descrição
<form> Define um formulário para entradas do usuário
<input> Define um campo de entrada
<textarea> Define uma área de texto (um controle de entrada de texto multi-linhas)
<label> Define um rótulo para um controle
<fieldset> Define um conjunto de campos
<legend> Define um título para um conjunto de campos
<select> Define uma lista selecionável (uma caixa drop-down)
<optgroup> Define um grupo de opção
<option> Define uma opção em uma caixa drop-down
<button> Define um botão para pressionar
<isindex> Desaprovada. Use <input> em vez