Dropdowns
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 43 de 60.
No HTML, um menu suspenso (dropdown) é uma lista de itens que aparece quando um usuário clica ou passa o mouse sobre um elemento. Dropdowns são comumente usados para apresentar uma lista de escolhas de forma compacta. Para criar um dropdown, você usa a tag <select> junto com as tags <option> para os itens individuais.
Aqui está a sintaxe básica para criar um dropdown em HTML:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: A tag que define o menu suspenso.
name: Um atributo que dá ao dropdown um nome, que é usado para identificar o valor selecionado quando o formulário é enviado.
<option>: Uma tag que define um item na lista suspensa.
value: Um atributo que especifica o valor associado à opção. Este valor é enviado para o servidor quando o formulário é enviado.
Option text: O texto visível que aparece na lista suspensa para cada opção.
Aqui está um exemplo de como criar um dropdown com três opções:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Neste exemplo, temos um dropdown com o nome "colors" e três opções: Red, Green e Blue.
Desafio
FácilCrie um documento HTML que inclua um formulário com um menu suspenso. O formulário deve ter os seguintes elementos:
- Um menu suspenso com o name "fruits".
- O menu suspenso deve ter quatro opções com os seguintes valores e textos:
- Value: "apple", Text: "Apple"
- Value: "banana", Text: "Banana"
- Value: "orange", Text: "Orange"
- Value: "grape", Text: "Grape"
Folha de consulta
Para criar um menu suspenso (dropdown) em HTML, use a tag <select> com tags <option> para os itens individuais:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Define o menu suspensoname: Identifica o menu suspenso quando o formulário é enviado<option>: Define cada item do menu suspensovalue: O valor enviado ao servidor quando a opção é selecionada- Texto da opção: O texto visível exibido no menu suspenso
Exemplo de menu suspenso com opções de cores:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé9Formulários e Inputs Parte 2
Radio ButtonsCheckboxesDropdownsBotõesBotões em FormuláriosRecapitulação - Formulários #1Recapitulação - Formulários #2