Miniuppgift: kontaktformulär

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>

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

Semantisk struktur

Kontaktsidans regioner

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>

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

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

Interaktiv förhandsvisning

Testa kontaktformuläret

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

Testa fel

Kontrollera valideringen

1. Försök skicka utan e-postadress.
2. Skriv en felaktig e-postadress.
3. Skriv ett meddelande med färre än 10 tecken.
4. Rätta värdena och skicka igen.
5. 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.

Tips för publicering

Ta emot riktiga meddelanden

Miniuppgiften använder httpbin för att visa skickade uppgifter.

När webbplatsen är publicerad kan en tjänst som Formspree användas för ett riktigt kontaktformulär.

Kontrollera tjänstens aktuella instruktioner, villkor och hantering av personuppgifter.

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.