Modul 2

Kap 2.5 - Miniuppgift: kontaktformulär

Du bygger ett kontaktformulär med semantisk struktur, labels, validering och tydliga fält.

Mål

  • Skapa en ny sida med ett kontaktformulär.
  • Använda labels, name-attribut och rätt inputtyper.
  • Gruppera och validera fält så att formuläret blir begripligt.

Uppgift

Skapa filen kontakt.html i samma projekt som din profilsida. Lägg till en länk från index.html till kontaktsidan och tillbaka igen.

Krav

  • Sidan ska ha semantisk struktur med header, nav, main och footer.
  • Formuläret ska ha action="https://httpbin.org/post" och method="post".
  • Det ska finnas fält för namn, e-post och meddelande.
  • Alla fält ska ha labels som är kopplade till rätt fält.
  • E-postfältet ska ha type="email" och vara obligatoriskt.
  • Meddelandet ska skrivas i en textarea med rimlig min- och maxlängd.
  • Det ska finnas minst en grupp med radio eller checkbox och fieldset/legend.
  • Formuläret ska ha en skicka-knapp.

Startkod

<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>

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

    <button type="submit">Skicka</button>
</form>

Så kan miniuppgiften se ut i webbläsaren

Förhandsvisningen visar hur fälten kan se ut. I din riktiga kod ska formuläret ha action="https://httpbin.org/post", method="post" och knappen type="submit".

Kontrollera

  1. Testa att skicka formuläret utan e-postadress.
  2. Testa att skriva en felaktig e-postadress.
  3. Testa att skicka formuläret till httpbin och se vilka fält som skickas.
  4. Validera HTML-koden.
  5. Skriv kort vilka personuppgifter formuläret samlar in och om alla behövs.