Codex

< Listas | Índice | Frames >

Formulários HTML são usados para selecionar e restringir a entrada de informações do usuário.


Formulários HTML

Os formulários em HTML são usados para passar infomações para o servidor.

Um formulário pode conter diferentes tipos de elementos input como campos de entrada de texto, checkboxes ou caixas de seleção, radio-buttons, botão de submissão e mais. Um formulário também pode conter elementos de lista de seleção, textarea, fieldset, legend, e label.

A tag <form> é usada para criar um formulário em HTML:

Exemplo:


Formulários HTML - O elemento input

O elemento de formulário html mais importante é o input.

O elemento input é usado para selecionar a informação entrada pelo usuário.

Um elemento input pode ser de várias maneiras, dependendo do valor do atributo type (tipo) utilizado. Um elemento input pode ser do tipo text (texto), checkbox (caixa de seleção), password (senha), radio button (botão de rádio), submit button (botão de submissão), e mais.

Os tipos mais usados de input estão descritos abaixo:


Campo de texto ou type='text'

<input type="text" /> Define um campo de input de uma linha onde o usuário pode escrever texto:

Como o código HTML acima aparece em um browser:

Nome:
Sobrenome:

Nota: Veja que o elemento form não é visível. Note também que o tamanho do campo texto é de 20 caracteres por campo, como padrão.


Campo de senha ou type='password'

<input type="password" /> define um campo de senha:

Como o código em html aparece no browser:

Senha:

Nota: Os caracteres no campo password aparecem com uma máscara, apenas indicando quantos caracteres foram digitados, através de um asterisco ou círculos pretos.


Botões de rádio ou type='radio'

<input type="radio" /> define um radio button. Estes botões permitem a seleção de UM e apenas um item de uma lista de possíveis escolhas:

Como o html acima aparece em um browser:

Masculino
Feminino


Checkboxes ou caixas de seleção - type='checkbox'

<input type="checkbox" /> define uma caixa de seleção ou checkbox. Caixas de seleção deixam o usuário escolher um ou mais itens de uma lista de opções.

Como o código acima aparece em um browser:

Eu tenho uma bicicleta
Eu tenho um carro


Botão de submissão de dados ou type='submit'

<input type="submit" /> define um botão de submissão.

O botão de submissão é usado para enviar dados para o servidor assim que clicado.O botão de submissão é utilizado para enviar dados de formulário para o servidor. Os dados são enviados para a página especificada dentro do atributo action na tag form. O arquivo definido no atributo action geralmente faz alguma coisa com os dados recebidos:

Como o html acima é mostrado no browser:

Nome:

Você pode usar o formulário acima e clicar enviar, o resultado será mostrado logo abaixa em verde:

{$?user}

Se você escreveu algum nome no formulário acima e clicou em enviar, O browser irá enviar o que você escreveu para esta página e na seção #resultado. Logo abaixo irá aparecer o que você escreveu na caixa de texto.


Tags de formulário HTML

Tag Descrição
<form> Define um formulário
<input /> Define um campo de entrada, escolha ou submissão de dados
<textarea> Define uma área multi-linha de entrada de texto
<label> Define um label (etiqueta) para o elemento input
<fieldset> Define uma borda em volta de elementos de um formulário
<legend> Define o título para o elemento fieldset
<select> Define uma lista de seleção (lista drop-down)
<optgroup> Defin um grupo de opções relacionadas em uma lista de seleção
<option> Definuma opção em uma lista de seleção
<button> Define um botão


< Listas | Índice | Frames >