Passo 19

Instruções

Quando você deseja que um usuário selecione múltiplas opções de uma lista, você pode usar caixas de seleção. Aqui está um exemplo de como trabalhar com caixas de seleção lidando com opções de alimentos:

<fieldset>
  <legend>Food Options</legend>
  <input type="checkbox" id="pizza" name="food" value="pizza">
  <label for="pizza">Pizza</label>
  <input type="checkbox" id="burger" name="food" value="burger">
  <label for="burger">Burger</label>
</fieldset>

O atributo value é usado para especificar o valor que o servidor receberá quando o formulário for enviado. Abaixo do seu elemento legend, adicione um input do tipo checkbox com os atributos id e value definidos como "ads" e o atributo name definido como "choice". Abaixo do seu input de checkbox, adicione um elemento label com o texto Social Media Ads. O atributo for deve estar definido como "ads".

O que fazer:

Testes:

Você deve ter um `input` do tipo checkbox abaixo do seu elemento `legend`.
A sua `input` de checkbox deve ter um atributo `id` definido como `"ads"`.
A sua caixa de seleção `input` deve ter um atributo `name` definido como `"choice"`.
Sua `input` de checkbox deve ter um atributo `value` definido como `"ads"`.
Você deve ter um elemento `label` abaixo do seu `input` do tipo checkbox.
Seu elemento `label` deve ter o texto `Social Media Ads`.
O elemento `label` deve ter um atributo `for` definido como `"ads"`.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hotel Feedback Form</title>
  </head>
  <body>
    <header>
      <h1>Hotel Feedback Form</h1>
      <p>
        Thank you for staying with us. Please provide feedback on your recent
        stay.
      </p>
    </header>
    <main>
      <form method="POST" action="https://hotel-feedback.G.E.A.R ACADEMY.org">
        <fieldset>
          <legend>Personal Information</legend>
          <label for="full-name">Name (required):</label>
          <input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20">

          <label for="email">Email address (required):</label>
          <input
            placeholder="example@email.com"
            required
            id="email"
            type="email"
            name="email"
            size="20"
          />
          <label for="age">Age (optional):</label>
          <input type="number" name="age" id="age" min="3" max="100" />
        </fieldset>

        <fieldset>
          <legend>Was this your first time at our hotel?</legend>
          <input id="yes-option" type="radio" name="hotel-stay" value="yes" />
          <label for="yes-option">Yes</label>
          <input id="no-option" type="radio" name="hotel-stay" value="no" />
          <label for="no-option">No</label>
        </fieldset>

        <fieldset>
          <legend>
            Why did you choose to stay at our hotel? (Check all that apply)
          </legend>
        
          
        
        </fieldset>
      </form>
    </main>
  </body>
</html>

Preview