Elementos de Formulário HTML

Este capítulo descreve todos os elementos de formulário HTML.

O elemento <input>

O elemento mais importante do formulário é <input> elemento.

O elemento <input> varia dependendo do type O atributo, que pode mudar para várias formas.

Nota:O próximo capítulo explica todos os tipos de entrada HTML.

O elemento <select> (lista suspensa)

<select> O elemento defineLista suspensa:

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>

Experimente você mesmo

<option> O elemento <option> define as opções a serem escolhidas.

Normalmente, a primeira opção da lista é exibida como a opção selecionada.

Você pode definir uma opção pré-definida adicionando o atributo selected.

Exemplo

<option value="fiat" selected>Fiat</option>

Experimente você mesmo

O elemento <textarea>

<textarea> O elemento <textarea> define um campo de entrada de múltiplas linhas (Área de texto）：

Exemplo

<textarea name="message" rows="10" cols="30">
O gato estava brincando no jardim.
</textarea>

Experimente você mesmo

O seguinte código HTML é exibido no navegador:

O gato estava brincando no jardim.

O elemento <button>

<button> O elemento define um botão clicávelBotão:

Exemplo

<button type="button" onclick="alert('Hello World!')">Clique em Mim!</button>

Experimente você mesmo

O seguinte código HTML é exibido no navegador:

Elementos de Formulário do HTML5

O HTML5 adicionou os seguintes elementos de formulário:

  • <datalist>
  • <keygen>
  • <output>

Nota:Por padrão, os navegadores não mostram elementos desconhecidos. Novos elementos não danificam sua página.

Elemento <datalist> do HTML5

<datalist> O elemento define uma lista de opções pré-definidas para o elemento

O usuário verá uma lista suspensa com opções pré-definidas enquanto inserem dados.

do elemento list O atributo deve referenciar o elemento id Atributo

Exemplo

Definir elementos de entrada <input> com valores pré-definidos usando <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>

Experimente você mesmo