Übersicht: Formulare

HTML-Formulare existieren seit den frühen 1990er Jahren. Anfangs waren sie schlicht, mit nur Textfeldern, Buttons und Checkboxen. Mit HTML4 kamen neue Input-Typen, die Validierung erleichterten. HTML5 führte spezialisierte Typen (email, date, range) und Elemente wie <datalist> oder <output> ein, um nutzerfreundliche, interaktive Formulare ohne externe Skripte zu ermöglichen. Heute sind Formulare zentral für Web-Interaktionen!

In React hängt i.d.R. an jedem Input ein onChange, das den Input-Value direkt prüft und eventuell ablegt, z.B. in einem State. Damit ist es bspw. möglich dem Nutzer bereits während der Eingabe direktes Feedback zur Validität der Angaben zu geben.

React (und JS im Allgemeinen) erlauben es, die komplette Kontrolle zu übernehmen, wenn ein Formular ausgefüllt oder submitted wird. Seit React 19 gibt es neue Abstraktionen, um dies mit erstklassiger Unterstützung für Datenmutationen zu optimieren. Unter Anderem neue Hooks und verbesserte Unterstützung für serverseitige Datenworkflows bieten deklarative und weniger aufwendige Möglichkeiten bei der Daten-Übermittlung, Verwaltung von Side-Effects oder API-Interaktionen.

Als Datenmutation wird jede Operation bezeichnet, bei der die Anwendung durch Senden von Daten Zustände ändert.

• Absenden eines Formulars
• Senden einer Chat-Nachricht
• Einträge auf einer Datenbank erzeugen/ändern/löschen
• Aufrufen einer API

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Absenden">
</form>

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Absenden">
</form>

const key = "Notes";

document.querySelector("form").addEventListener("submit", function (e) {
  // e.preventDefault();
  try {
    const formData = new FormData(e.target);
    const newNote = formData.get("name").trim();    
    if (!newNote) throw new Error("Imput is empty");
    const storedData = localStorage.getItem(key)
      ? JSON.parse(localStorage.getItem(key))
      : [];
    const newData = [newNote, ...storedData];
    localStorage.setItem(key, JSON.stringify(newData));
  } catch (error) {
    console.log(error);
  } 
});

const key = "Notes";

document.querySelector("form").addEventListener("submit", function (e) {
  // e.preventDefault();
  try {
    const formData = new FormData(e.target);
    const newNote = formData.get("name").trim();    
    if (!newNote) throw new Error("Imput is empty");
    const storedData = localStorage.getItem(key)
      ? JSON.parse(localStorage.getItem(key))
      : [];
    const newData = [newNote, ...storedData];
    localStorage.setItem(key, JSON.stringify(newData));
  } catch (error) {
    console.log(error);
  } 
});

Events:

#TODO