Modul 2 · Kapitel 2.5

Miniuppgift: kontaktformulär

Bygg en kontaktsida med semantisk struktur, labels och validering.

Mål

Efter uppgiften ska du kunna...

skapa en ny sida med ett kontaktformulär
använda labels, name-attribut och rätt inputtyper
gruppera relaterade val
validera fält och testa felaktiga värden

Uppgift

Skapa en ny kontaktsida

profil-sida/
  index.html
  kontakt.html
  images/

Filen ska heta kontakt.html och ligga i samma projekt som profilsidan.

Navigering

Länka åt båda hållen

<a href="kontakt.html">Kontakt</a>

På index.html.

<a href="index.html">Start</a>

På kontakt.html.

Semantisk struktur

Kontaktsidans regioner

<nav>

<main>

<form>

Krav · formuläret

Så ska data skickas

<form action="https://httpbin.org/post"
      method="post">
  ...
</form>

action pekar på testtjänsten httpbin.

method="post" skickar formulärdata i en POST-förfrågan.

Krav · fälten

Det här ska finnas

Namn med textfält.
Obligatorisk e-post med type="email".
Obligatoriskt meddelande i textarea.
En grupp med radio eller checkbox.
En skicka-knapp.

Hela sidan · del 1 av 4

Sidhuvud och navigering

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Kontakt</title>
</head>
<body>
  <header><h1>Kontakta mig</h1></header>
  <nav><a href="index.html">Start</a></nav>

Hela sidan · del 2 av 4

Namn och e-post

  <main>
    <form action="https://httpbin.org/post" method="post">
      <label for="name">Namn:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">E-post:</label>
      <input type="email" id="email"
             name="email" required>

Hela sidan · del 3 av 4

Meddelande och kontaktmetod

      <label for="message">Meddelande:</label>
      <textarea id="message" name="message"
        minlength="10" maxlength="500"
        required></textarea>

      <fieldset>
        <legend>Hur vill du få svar?</legend>
        <label><input type="radio" name="reply"
          value="email"> E-post</label>
        <label><input type="radio" name="reply"
          value="none"> Inget svar behövs</label>
      </fieldset>

Hela sidan · del 4 av 4

Knapp och avslutning

      <button type="submit">Skicka</button>
    </form>
  </main>
  <footer>
    <p>© 2026 Mitt namn</p>
  </footer>
</body>
</html>

Kopplade labels

for och id måste matcha

<label for="email">E-post:</label>
<input type="email" id="email" name="email" required>

E-post:

Klicka på labeln och kontrollera att rätt fält aktiveras.

Meddelandets längd

Mellan 10 och 500 tecken

<textarea minlength="10"
          maxlength="500"
          required></textarea>

Minimilängden hindrar mycket korta meddelanden. Maxlängden begränsar mängden text.

Radio eller checkbox

Gruppera valen

Hur vill du få svar? E-post Inget svar behövs

fieldset samlar alternativen och legend ställer den gemensamma frågan.

Interaktiv förhandsvisning

Testa kontaktformuläret

Data till httpbin

Testa tom e-post, felaktig e-post och ett för kort meddelande.

Testa fel

Kontrollera valideringen

Försök skicka utan e-postadress.
Skriv en felaktig e-postadress.
Skriv ett meddelande med färre än 10 tecken.
Rätta värdena och skicka igen.
Kontrollera vilka name och värden som visas.

Personuppgifter

Samla bara in det som behövs

Namn, e-postadress och meddelande kan vara personuppgifter.

Fråga varför varje uppgift behövs.

Ta bort fält som inte behövs för att kunna svara på meddelandet.

Slutkontroll

Innan uppgiften är klar

Länkarna mellan Start och Kontakt fungerar.
Alla labels är kopplade till rätt fält.
Alla fält har name.
E-post och meddelande valideras.
Radio eller checkbox är grupperade.
HTML-koden är validerad.

Sammanfattning

Klart när allt fungerar

kontakt.html har semantisk struktur.
Formuläret använder POST till httpbin.
Fälten är tydliga, kopplade och validerade.
Felaktiga värden har testats.
Endast nödvändiga personuppgifter samlas in.