Ett formulär som fångar misstag

En besökare lämnar ett meddelande till dig, och formuläret påpekar artigt när något saknas.

Jag visar dig: ett formulär i HTML

Ett formulär är en uppsättning fält som besökaren 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> omsluter hela formuläret. <input> är ett enradigt fält, <textarea> är ett flerradigt.
<label> är fältets rubrik – tack vare for och id hör de ihop (klickar du på etiketten hoppar du till fältet).
placeholder är grå ledtext.
En knapp med type="submit" skickar formuläret.

Och lite CSS så att det ser snyggt ut:

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 vänder flexbox från sidled till upprätt: barnen ställs under varandra.

Jag visar dig: kontrollera det 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
});

Nya grejer:

submit – händelsen “formuläret skickas.” Vi lyssnar på den på formuläret, inte på knappen.
event.preventDefault() – “gör inte det du brukar göra.” Utan det här skulle sidan laddas om och vårt skript skulle inte hinna köra.
.value – det som är inskrivet i fältet. .trim() tar bort mellanslag (så ” ” räknas som tomt!).
return – lämna funktionen direkt (ingen mening att köra fler kontroller).

💡

Vart tar meddelandet vägen? Ingenstans ännu – vi har ingen server som tar emot det. Vi bara kontrollerar meddelandet och säger tack. Men kom ihåg den här platsen: i nivå 3 bygger vi en riktig server med gästbok och kopplar det här formuläret till den. Då sparas meddelanden på riktigt!

Din tur 💪

Lägg till ett formulär på din webbplats som passar ditt projekt, med kontroll av inmatning:

🏫 Ett meddelande till skolan – namn + meddelande (precis som i exemplet).
🙋 Skriv till mig – namn + meddelande, du får gärna lägga till ett fält för “ditt favoritspel” också.
🌍 Reseförslag – namn + “vart ska vi åka härnäst och varför.”
⚽ Anmälan till träning – namn + ålder (<input type="number">) + kontrollera att åldern är ifylld och minst 6: if (age.value < 6) { ... }.

⚠️

En säkerhetsvana från proffsen: lita aldrig på det en användare skriver. Kontrollera alltid – ett tomt fält, en orimlig ålder, text som är för lång. Idag gör du det av artighet; i riktiga appar är det första försvarslinjen mot angripare.

✅

Kolla själv: Om du skickar ett tomt formulär markeras fältet rött och ett meddelande visas. Ett ifyllt formulär tackar dig vid namn och tömmer sig. Artigt, vänligt, professionellt.

Vad du tar med dig

Ett formulär: <form>, <input>, <textarea>, <label>, och händelsen submit med preventDefault().
.value.trim() = det användaren skrev, utan mellanslag runt omkring.
Användarinmatning ska alltid kontrolleras – det är grunden för säker programmering.