Menu
CoddyTech

Recapitulação - Formulários #1

Parte da seção Fundamentos do Journey de HTML da Coddy. Lição 46 de 60.

challenge icon

Desafio

Fácil

Vamos criar um formulário simples para pedir bebidas usando HTML, como mostrado na imagem abaixo.

Veja o que incluir:

  1. Uma tag <form> para envolver tudo.
  2. Um grupo de botões de opção (name: "drink") para permitir que os usuários escolham a bebida. Os rótulos devem ser "Water", "Coke" ou "Sprite". Dê a cada botão de opção um id que seja seu rótulo em letras minúsculas: "water", "coke", "sprite".
  3. Um grupo de caixas de seleção (name: "extras") para adicionais opcionais. Os rótulos devem ser "Ice", "Lemon" ou "Sugar". Dê a cada caixa de seleção um id que seja seu rótulo em letras minúsculas: "ice", "lemon", "sugar".
  4. Um menu suspenso (name: "size") para escolher o tamanho da bebida. As opções devem ser "Small", "Medium" ou "Large".
  5. Um botão de envio com o rótulo "Place Order".
  6. Um botão de redefinição com o rótulo "Clear".

⚠️ Importante: Use apenas uma tag <form>. HTML não permite tags <form> aninhadas: colocar uma tag <form> dentro de outra tag <form> é inválido e fará com que seus campos de entrada sejam detectados fora do formulário, causando falha nos testes. Coloque todos os botões de opção, caixas de seleção, menu suspenso e botões diretamente dentro da única tag <form> externa: não envolva as seções em tags <form> extras.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- Escreva o código aqui -->
            
            <p>Select extras: </p>
            <!-- Escreva o código aqui -->
            
            <p>Select size: </p>
            <!-- Escreva o código aqui -->
            
        </form>
    </body>
</html>

Todas as lições de Fundamentos

Pratique por conta própria: Playground de Web