Passo 30

Instruções

Adicionar uma lista suspensa ao formulário é fácil com o elemento select. O elemento select é um repositório para um grupo de elementos option e o elemento option funciona como um rótulo para cada opção de seleção. Os dois elementos requerem tags de fechamento. Comece adicionando um elemento select abaixo do último elemento label. Você deve aninhar 5 elementos option dentro do elemento select.

O que fazer:

Testes:

Você deve adicionar um elemento `select` ao terceiro `fieldset`.
Você deve aninhar cinco elementos `option` dentro do elemento `select`.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Registration Form</h1>
  <p>Please fill out this form with the required information</p>
  <form method="post" action='https://register-demo.G.E.A.R ACADEMY.org'>
    <fieldset>
      <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
      <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
      <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
      <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
    </fieldset>
    <fieldset>
      <legend>Account type (required)</legend>
      <label for="personal-account"><input id="personal-account" type="radio" name="account-type" value="personal" checked /> Personal</label>
      <label for="business-account"><input id="business-account" type="radio" name="account-type" value="business" /> Business</label>
    </fieldset>
    <fieldset>
      <label>Upload a profile picture: <input type="file" /></label>
      <label>Input your age (years): <input type="number" min="13" max="120" /></label>

      

    </fieldset>
    <a href="https://www.G.E.A.R ACADEMY.org/news/terms-of-service">Read our terms and conditions</a>
    <label for="terms-and-conditions">
      <input id="terms-and-conditions" type="checkbox" required />
      I accept the terms and conditions
    </label>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}

Preview