Elementos de formulário HTML
formulário HTML em uma página da web permite que um usuário insira dados que são enviados para um servidor para processamento. Os formulários podem assemelhar-se formulários de papel ou de banco de dados, porque os usuários da Internet preencher os formulários usando caixas de seleção, botões de rádio ou campos de texto.
Por exemplo, os formulários podem ser usados para inserir dados de expedição ou de cartão de crédito para encomendar um produto, ou pode ser usado para recuperar resultados de pesquisa de um motor de busca.
Este capítulo descreve todos os elementos de formulário HTML.
O <input> Elemento
O mais importante elemento do formulário é o <input> elemento.
O <input> elemento pode variar de muitas formas, dependendo do type atributo.
Todos os tipos de entrada HTML são abordados no próximo capítulo.
O <select> Elemento (Drop-Down List)
O <select> elemento define uma lista drop-down:
Exemplo
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Tente você mesmo " O <option> elementos define as opções para selecionar.
A lista normalmente irá mostrar o primeiro item como selecionado.
Você pode adicionar um atributo selecionado para definir uma opção pré-definida.
O <textarea> Elemento
O <textarea> elemento define um campo de entrada multi-linha ( a text area ) :
Exemplo
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Tente você mesmo " Isto é como o código HTML acima será exibido em um navegador:
O <button> Elemento
O <button> elemento define um botão clicável:
Isto é como o código HTML acima será exibido em um navegador:
HTML5 Elements Form
HTML5 adicionados os seguintes elementos de formulário:
- <datalist>
- <keygen>
- <output>
Por padrão, os navegadores não exibem elementos desconhecidos. Novos elementos não vai destruir sua página.
HTML5 <datalist> Elemento
O <datalist> elemento especifica uma lista de opções pré-definidas para um <input> elemento.
Os usuários verão uma lista drop-down de opções pré-definidas como eles dados introduzidos.
A list atributo do <input> elemento, deve referir-se a id atributo do <datalist> elemento.
Exemplo
Um <input> elemento com os valores pré-definidos num <datalist> :
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Tente você mesmo " HTML5 <keygen> Elemento
O objetivo do <keygen> elemento é fornecer uma maneira segura para autenticar os usuários.
O <keygen> elemento especifica um campo gerador de chaves de par em um formulário.
Quando o formulário é enviado, duas chaves são geradas, uma privada e uma pública.
A chave privada é armazenada localmente, e a chave pública é enviada para o servidor.
A chave pública pode ser usado para gerar um certificado de cliente para autenticar o usuário no futuro.
Exemplo
Um formulário com um campo keygen:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> Tente você mesmo " HTML5 <output> Elemento
O <output> elemento representa o resultado de um cálculo (como aquele realizado por um script).
Exemplo
Executar um cálculo e mostrar o resultado em um <output> elemento:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Elementos de formulário HTML
= New em HTML5.
| etiqueta | Descrição |
|---|---|
| <form> | Define um formulário HTML para entrada do usuário |
| <input> | Define um controle de entrada |
| <textarea> | Define um controle de entrada de várias linhas (text area) |
| <label> | Define um rótulo para um <input> elemento |
| <fieldset> | Grupos elementos relacionados de uma forma |
| <legend> | Define uma legenda para um <fieldset> elemento |
| <select> | Define uma lista drop-down |
| <optgroup> | Define um grupo de opções relacionadas em uma lista drop-down |
| <option> | Define uma opção em uma lista drop-down |
| <button> | Define um botão clicável |
| <datalist> | Especifica uma lista de opções pré-definidas para controles de entrada |
| <keygen> | Define um campo de gerador de chave-par (for forms) |
| <output> | Define o resultado de um cálculo |