Passo 11

Instruções

O próximo passo é adicionar os elementos label e input para o método de contato por email. Comece adicionando um label com uma classe "contact-method" e um atributo for definido como "email". O texto do label deve ser Email: . Abaixo do seu elemento label, adicione um botão de rádio com os atributos id e value definidos como "email". O atributo name deve ser definido como "contact-method" e a classe deve ser definida como "contact-method-radio-btn". Por fim, certifique-se de que este botão de opção esteja marcado por padrão.

O que fazer:

Testes:

Seu último fieldset deve conter um elemento `label`.
Este novo elemento `label` (para email) deve ter uma classe `"contact-method"`.
O novo atributo `for` do elemento `label` deve ser definido como `"email"`.
O elemento `label` deve conter o texto `Email: `. Certifique-se de que há um espaço após os dois pontos.
Você deve ter um elemento `input` dentro do último `fieldset`.
Seu elemento `input` deve ter um atributo `type` definido como `radio`.
O elemento `input` deve ter um atributo `id` definido como `"email"`.
O elemento `input` deve ter um atributo `value` definido como `"email"`.
O elemento `input` deve ter um atributo `name` definido como `"contact-method"`.
O elemento `input` deve ter uma classe `"contact-method-radio-btn"`.
Seu botão `radio` deve estar `checked` por padrão.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parent Teacher Conference Form</title>
  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <main class="container">
    <h1 class="title center">Parent Teacher Conference Form</h1>
    <p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>

    <form>
      <fieldset>
        <legend>Student Information</legend>
        <label for="student-name">Full Name: </label>
        <input
            type="text"
            name="student-name"
            id="student-name"
            required
            placeholder="E.g., Jane Doe"
          />


        <label for="grade">Student Grade: </label>
        <input
            type="number"
            name="grade"
            id="grade"
            required
            placeholder="E.g., 4"
          />
      </fieldset>

      <fieldset>
        <legend>Parent/Guardian Information</legend>
        <label for="parent-name">Parent/Guardian Name: </label>
        <input
            type="text"
            name="parent-name"
            id="parent-name"
            required
            placeholder="E.g., Nancy Doe"
          />
      </fieldset>

      <fieldset>
        <legend>Preferred Contact Method</legend>
      
        
      
      </fieldset>
    </form>
  </main>
</body>

</html>

Preview