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

Tips: gör kontaktformuläret användbart på riktigt

I miniuppgiften använder du httpbin för att se vilka uppgifter formuläret skickar. När du har publicerat webbplatsen och vill kunna ta emot riktiga meddelanden kan du undersöka Formspree. Det är en extern formulärtjänst som kan ta emot inskickade uppgifter från en statisk webbplats och meddela formulärets ägare.

Följ Formsprees aktuella instruktioner och testa först med påhittade uppgifter. Kontrollera också tjänstens villkor och hur inskickade personuppgifter hanteras innan formuläret används av riktiga besökare.

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.