Formulários · Html · Codex
< Listas | Índice | Frames >
Formulários HTML são usados para selecionar e restringir a entrada de informações do usuário.
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:
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:
Nome: &lt;input type="text" name="nome" /&gt;&lt;br /&gt;
Sobrenome: &lt;input type="text" name="sobrenome" /&gt;
Como o código HTML acima aparece em um browser:
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:
Senha: &lt;input type="password" name="senha" /&gt;
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.
&lt;input type="checkbox" name="veiculo" value="bicicleta" /&gt; Eu tenho uma bicicleta&lt;br /&gt;
&lt;input type="checkbox" name="veiculo" value="carro" /&gt; Eu tenho um carro
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:
&lt;form name="input" action="Formulários#resultado" method="get"&gt;
Nome: &lt;input type="text" name="user" /&gt;
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.