Øvelse 7: Tilføj interaktionstilstande

<form>
    <div class="form-group">
      <label for="nickname">Nickname</label>
      <input id="nickname" name="nickname" type="text" value="PixelPanda">
      <p class="error-message" id="nickname-error">Skriv mindst to tegn</p>
    </div>

    <div class="form-group">
      <label for="portfolio">Portfolio (valgfrit)</label>
      <p id="portfolio-hint">Brug en fuld URL, fx https://example.com</p>
      <input id="portfolio" name="portfolio" type="url" value="https://example.com">
      <p class="error-message" id="portfolio-error">Skriv en gyldig URL</p>
    </div>

    <div class="form-group">
      <fieldset>
        <legend>Hvad håber du at få med hjem?</legend>
        <label for="inspiration">
          <input id="inspiration" name="reason" type="radio" value="inspiration" checked>
          Inspiration
        </label>
        <label for="tools">
          <input id="tools" name="reason" type="radio" value="tools">
          Praktiske værktøjer
        </label>
        <label for="network">
          <input id="network" name="reason" type="radio" value="network">
          Nye kontakter
        </label>
      </fieldset>
      <p class="error-message" id="reason-error">Vælg én mulighed</p>
    </div>

    <div class="form-group">
      <label for="hype">Hype-niveau</label>
      <input id="hype" name="hype" type="range" min="0" max="100" value="60">
    </div>

    <div class="form-group">
      <label for="guidelines">
        <input id="guidelines" name="guidelines" type="checkbox" value="accepted">
        Jeg accepterer eventets retningslinjer
      </label>
      <p class="error-message" id="guidelines-error">Du skal acceptere retningslinjerne</p>
    </div>

    <button>Lav event-pass</button>
  </form>