En formular, der fanger fejl

En besøgende efterlader dig en besked, og formularen peger høfligt ud, når noget mangler.

Vis mig: en formular i HTML

En formular er et sæt felter, besøgende skriver i:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> indpakker hele formularen. <input> er et enkeltlinjefelt, <textarea> er et flerlinjefelt.
<label> er en felts billedtekst – takket være for og id hører de sammen (et klik på label hopper til feltet).
placeholder er grå hinttekst.
En knap med type="submit" indsender formularen.

Og lidt CSS for at gøre den pæn:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column drejer flexbox fra sidelæns til opret: børn stilles op én under den anden.

Vis mig: tjek i JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Nye ting:

submit – hændelsen “formularen indsendes.” Vi lytter efter den på formularen, ikke på knappen.
event.preventDefault() – “gør ikke det, du normalt ville gøre.” Uden dette ville siden genindlæse, og vores script fik ikke chancen for at køre.
.value – hvad der er skrevet i feltet. .trim() trimmer mellemrum (så ” ” tæller som tomt!).
return – afslut funktionen med det samme (ingen grund til at køre flere tjek).

💡

Hvor går beskeden hen? Ingen steder endnu – vi har ingen server til at modtage den. Vi tjekker bare beskeden og siger tak. Men husk dette sted: i niveau 3 bygger vi en rigtig server med en gæstebog og forbinder denne formular til den. Så bliver beskeder faktisk gemt!

Nu er det din tur 💪

Tilføj en formular til din hjemmeside, der giver mening for dit projekt, med inputtjek:

🏫 En besked til skolen – navn + besked (ligesom eksemplet).
🙋 Skriv til mig – navn + besked, du må gerne tilføje et “dit yndlingsspil”-felt også.
🌍 Turforslag – navn + “hvor skal vi hen næste gang og hvorfor.”
⚽ Træningstilmelding – navn + alder (<input type="number">) + tjek at alderen er udfyldt og mindst 6: if (age.value < 6) { ... }.

⚠️

En sikkerhedsvane hos professionelle: stol aldrig på, hvad en bruger skriver. Tjek det altid – et tomt felt, en meningsløs alder, tekst der er for lang. I dag gør du det af høflighed; i rigtige applikationer er det første forsvarslinje mod angribere.

✅

Tjek dig selv: Indsendelse af en tom formular markerer feltet rødt og viser en besked. En udfyldt formular siger tak ved navn og rydder sig selv. Høflig, venlig, professionel.

Det tager du med fra denne lektion

En formular: <form>, <input>, <textarea>, <label>, og submit-hændelsen med preventDefault().
.value.trim() = hvad brugeren skrev, uden mellemrum omkring.
Brugerinput bør altid tjekkes – det er fundamentet for sikker programmering.