LMMD-MUS LMMD-MUS LMMD-MUS

home HOME

HTML Básico
HTML INÍCIO
HTML & WWW
HTML Introdução
HTML Elementos
HTML Tags Básicas
HTML Formatação
HTML Entidades
HTML Links
HTML Frames
HTML Tabelas
HTML Listas
HTML Formulários
HTML Imagens
HTML Background

HTML Avançado
HTML Layout
HTML Fontes
HTML Porque 4.0?
HTML Estilos
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Webserver

Formulários e Entradas (inputs) em HTML

Anterior Próxima

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:

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:

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


Anterior Próxima