Elementos dos Formulários em HTML

1. Múltipla escolha e listas

Os formulários HTML oferecem várias opções para interação dos usuários com a página web. Além de campos de texto e botões, os formulários suportam elementos de múltipla escolha e listas, que ajudam a criar interfaces mais flexíveis e convenientes para entrada de dados. Hoje vamos conhecê-los.

Em HTML os formulários fornecem diversas formas para criar elementos que permitem escolha em listas. Os elementos mais comuns para esse propósito são <select> e <option>, assim como checkboxes e botões de rádio.

Lista suspensa: <select> e <option>

A tag <select> cria uma lista suspensa, enquanto <option> é usada para adicionar as opções dentro dessa lista. O usuário pode escolher uma ou várias opções da lista.

Escolha única: Por padrão, <select> permite selecionar apenas uma opção.

<label for="country">Escolha um país:</label>
<select id="country" name="country">
  <option value="ru">Rússia</option>
  <option value="us">EUA</option>
  <option value="de">Alemanha</option>
</select>

<label for="country">Escolha um país:</label>
<select id="country" name="country">
<option value="ru">Rússia</option>
<option value="us">EUA</option>
<option value="de">Alemanha</option>
</select>

Múltipla escolha: Se você adicionar o atributo multiple, o usuário poderá selecionar várias opções ao mesmo tempo, segurando a tecla Ctrl (no Windows) ou Cmd (no Mac) enquanto clica.

<label for="languages">Escolha os idiomas:</label>
<select id="languages" name="languages" multiple>
  <option value="ru">Russo</option>
  <option value="en">Inglês</option>
  <option value="de">Alemão</option>
</select>

<label for="languages">Escolha os idiomas:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russo</option>
<option value="en">Inglês</option>
<option value="de">Alemão</option>
</select>

Nesse caso, os dados de várias opções selecionadas são enviados ao servidor como um array de valores.

Checkboxes: <input type="checkbox">

Checkboxes são elementos que permitem ao usuário selecionar uma ou mais opções de uma lista. Cada checkbox é criado usando a tag <input type="checkbox">.

<label><input type="checkbox" name="interests" value="sports"> Esporte</label>
<label><input type="checkbox" name="interests" value="music"> Música</label>
<label><input type="checkbox" name="interests" value="travel"> Viagens</label>

<label><input type="checkbox" name="interests" value="sports"> Esporte</label>
<label><input type="checkbox" name="interests" value="music"> Música</label>
<label><input type="checkbox" name="interests" value="travel"> Viagens</label>

Se todos os checkboxes tiverem o mesmo atributo name, ao enviar o formulário os dados de cada checkbox marcado serão enviados como um array.

Botões de rádio: <input type="radio">

Botões de rádio permitem que o usuário selecione apenas uma opção de um grupo. Botões de rádio com o mesmo valor no atributo name são agrupados, e o usuário só pode selecionar uma opção nesse grupo.

<p>Escolha o gênero:</p>
<label><input type="radio" name="gender" value="male"> Masculino</label>
<label><input type="radio" name="gender" value="female"> Feminino</label>

<p>Escolha o gênero:</p>
<label><input type="radio" name="gender" value="male"> Masculino</label>
<label><input type="radio" name="gender" value="female"> Feminino</label>

Botões de rádio são práticos para escolher entre várias opções fixas, como "Sim" ou "Não", gênero, faixa etária, etc.

1

Pesquisa/teste

Fundamentos de HTML, nível 29, lição 4

Indisponível

Fundamentos de HTML

Fundamentos de HTML

Abrir