Formularfeltets anatomi

Opgavebeskrivelse

Formularen ser umiddelbart forståelig ud, men felterne mangler programmatisk navn, input purpose og gruppering.

  1. Erstat de visuelle tekstlabels med rigtige <label>-elementer, og forbind dem eksplicit med deres felter.
  2. Tilføj stabile id- og name-værdier.
  3. Vælg relevante type- og autocomplete-værdier.
  4. Gør felterne påkrævede med native required.
  5. Forbind e-mailfeltet med den eksisterende instruktion.
  6. Erstat kontakt-wrapperen med <fieldset> og dens overskrift med <legend>. Radioknapperne skal dele samme name.
  7. Inspicér navnefeltet, e-mailfeltet og gruppen under Formularfelter.

placeholder må gerne vise et eksempel, men det erstatter ikke en vedvarende label. Sammenlign især feltets synlige label med det navn, der vises i accessibility-inspektøren.

<main>
  <section class="signup" aria-labelledby="signup-title">
    <p class="eyebrow">Profil</p>
    <h1 id="signup-title">Opret din profil</h1>
    <p>Alle felter er påkrævede.</p>

    <form>
      <div class="form-group">
        <span>Fulde navn</span>
        <input class="name-field" placeholder="Fx Ada Lovelace">
      </div>

      <div class="form-group">
        <span>E-mail</span>
        <p id="email-instruction">Vi bruger adressen til kvitteringen.</p>
        <input class="email-field" placeholder="navn@example.com">
      </div>

      <div class="contact-options">
        <p>Hvordan må vi kontakte dig?</p>

        <label>
          <input type="radio" value="email">
          E-mail
        </label>

        <label>
          <input type="radio" value="phone">
          Telefon
        </label>
      </div>

      <button>Opret profil</button>
    </form>
  </section>
</main>
Preview

Syntaks

<label for="full-name">Fulde navn</label>
<input id="full-name" name="fullName">