Introduction to Forms

Formulare sind essentielle Bestandteile von Websites. Sie erlauben Besuchern, Daten einzugeben. Diese Daten können im Frontend (per JavaScript) weiterverarbeitet oder ins Backend gesendet werden.

The form element

Jedes Formular muss mit dem <form>-Element erstellt werden. Es muss mindestens zwei Attribute besitzen: method und action.

<form method="post" action="/some-url"><!-- ... --></form>

method sagt dem Browser, welche HTTP-Methode zum Versand des Formulars verwendet werden soll. Möglich sind get und post.
action sagt dem Browser, an welche URL die Information geschickt werden soll. Wenn die Eingaben nur im Frontend verarbeitet werden, wird action gar nicht benötigt.

The smallest possible form

Formulare müssen mindestens ein Feld (offiziell widgets genannt) und einen Absendebutton enthalten:

<form method="post" action="/some-url">
  <label for="fist-name">Vorname</label>
  <input id="first-name" type="text" name="first-name" />
<button type="submit">Absenden</button>

Form fields

Widgets sollten vier Dinge enthalten:

• ein Attribut name
• ein Attribut label
• ein Attribut id
• ein Attribut for

<label for="fist-name">Vorname</label>
<input id="first-name" type="text" name="first-name" />

Das name Attribut hilft dem Server, Werte aus Feldern herauszulesen.
Das label Attribut beschreibt, was das Feld macht.
Das id Attribut im input lautet gleich wie das for Attribut im label und verknüpft so diese beiden Felder miteinander. Klickt der User auf das label, wird der damit verknüpfte input automatisch fokussiert.

The submit button

Der Absende-Button sendet das Formular ab. Man kann dafür ein <input> Element verwenden, aber (neuer und besser) ist das <button> Element.

<!-- Submit button mit <input> -->
<input type="submit" value="submit" />

<!-- Submit button mit <button> -->
<button type="submit">Absenden</button>

Submitting a form - Submit event

User können ein Formular auf zwei verschiedene Arten absenden:

• mit einem Klick auf die Enter-Taste
• mit einem Klick auf den Submit-Button

Das submit Event wird abgefeuert, wenn der User ein Formular abschickt. Man kann das Submit-Event mit einem Event-Listener abfragen:

const form = document.querySelector('form');
form.addEventListener('submit', e => {
  // do stuff here
  console.log('Formular abgeschickt');
});

Wenn das Formular abgeschickt wird, aber die Empfängeradresse ungültig ist, meldet die Konsole, dass die URL nicht gefunden werden kann. Die Ansteuerung dieser URL ist das normale Verhalten nach dem Absenden eines Formulars. Wenn vor dem Absenden etwas geschehen soll, muss das Standardverhalten mit event.preventDefault verhindert werden.
(Wenn kein action Attribut vorhanden ist, passiert übrigens auch nichts. Braucht es dann trotzdem ein event.preventDefault?)

const form = document.querySelector('form');
form.addEventListener('submit', e => {
  e.preventDefault();

  // do stuff here
  console.log('Formular abgeschickt');
});

Why prevent a form’s default submit behaviour?

Es gibt zwei Gründe, warum wir das Standardverhalten von Formularen unterbinden wollen:
Erstens erlaubt es uns, vor dem Abschicken Felder mit JavaScript zu ändern oder sogar neue Felder zu erstellen. Das Versenden kann danach mit der Methode form.submit() aufgerufen werden.

form.addEventListener('submit', e => {
  e.preventDefault();

  // do stuff here
  console.log('Do stuff here');

  // continue the submission
  form.submit();
});

Zweitens können wir Daten mit AJAX senden und empfangen.

form.addEventListener('submit', e => {
  e.preventDefault();

  // Sends form with AJAX
  fetch(form.action, {
    // fetch options
  });
});