Formulare in HTML: <form>

1.1 Das <form> Element

Formulare sind ein wichtiger Teil der Interaktion von Nutzern mit Webseiten. Mit Formularen können Nutzer Daten eingeben, die dann an den Server zur Verarbeitung gesendet werden. In HTML wird das <form> Element zur Erstellung von Formularen verwendet.

Der <form> Tag wird verwendet, um ein Formular auf einer Webseite zu erstellen. Es dient als Container für verschiedene Formularelemente wie Textfelder, Buttons, Checkboxen usw. Alle vom Nutzer eingegebenen Daten können zur Verarbeitung an den Server gesendet werden.

Beispiel:

    
      <form action="/submit" method="post">
        <label for="username">Nutzername:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Senden</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Dein Name: ${userName.value}\n` + `Deine Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nutzername:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Senden</button>
      </form>
    
  

Attribute des <form> Tags

Das action Attribut gibt die URL an, an die die Formulardaten nach dem Drücken des Senden-Buttons gesendet werden. Wenn das action Attribut nicht angegeben ist, werden die Formulardaten an die aktuelle URL gesendet.

Beispiel für die Verwendung des action Attributs:

    
      <form action="https://example.com/submit">
        <!-- Formularelemente -->
      </form>
    
  

Das method Attribut gibt die HTTP-Methode an, die zum Senden der Formulardaten verwendet wird. Es gibt zwei mögliche Werte: GET und POST.

1. GET: die Formulardaten werden als Parameter in der Anfrage-URL eingeschlossen. Diese Methode eignet sich für das Senden kleiner Datenmengen und sollte nicht für vertrauliche Informationen verwendet werden.
2. POST: die Formulardaten werden im Body des HTTP-Requests gesendet. Diese Methode eignet sich für das Senden großer Datenmengen und vertraulicher Informationen.

Beispiel für die Verwendung des method Attributs:

    
      <form action="/submit" method="post">
        <!-- Formularelemente -->
      </form>
    
  

1.2 Methoden zur Datenübermittlung

Methode GET

Die Methode GET sendet die Formulardaten als URL-Parameter. Diese Methode wird standardmäßig verwendet, wenn das method Attribut nicht angegeben ist.

Beispiel für die Verwendung der Methode GET:

    
      <form action="/search" method="get">
        <label for="query">Suche:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Suchen</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Du hast gesucht nach: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Suche:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Suchen</button>
      </form>
    
  

Besonderheiten der Methode GET

• Die Formulardaten sind in der URL sichtbar, was die Methode ungeeignet für das Übertragen vertraulicher Informationen macht
• Beschränkung der Datenmenge, da die URL eine begrenzte Länge hat
• Daten können leicht gecached werden und Lesezeichen können im Browser gespeichert werden

Methode POST

Die Methode POST sendet die Formulardaten im Body des HTTP-Requests. Diese Methode wird für das Übertragen großer Datenmengen und vertraulicher Informationen verwendet.

Beispiel für die Verwendung der Methode POST:

    
      <form action="/submit" method="post">
        <label for="username">Nutzername:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Passwort:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Senden</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Willkommen, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">Nutzername:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Passwort:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Senden</button>
      </form>
    
  

Besonderheiten der Methode POST

• Die Formulardaten sind nicht in der URL sichtbar, was die Methode geeignet für das Übertragen vertraulicher Informationen macht
• Keine Beschränkung der Datenmenge, da die Daten im Body des Requests übertragen werden
• Daten werden nicht gecached oder in Lesezeichen im Browser gespeichert

1.3 Zusätzliche Attribute

Attribut enctype

Das enctype Attribut wird verwendet, um die Kodierungsmethode der Formulardaten beim Senden mit der Methode POST anzugeben. Der häufigste verwendete Wert ist multipart/form-data, das für das Hochladen von Dateien erforderlich ist.

Beispiel für die Verwendung des enctype Attributs:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Datei hochladen:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Senden</button>
      </form>
    
  

Attribut target

Das target Attribut gibt an, wo die Serverantwort nach dem Senden des Formulars angezeigt wird. Mögliche Werte:

• _self (Standard): im selben Fenster oder Tab
• _blank: in einem neuen Fenster oder Tab
• _parent: im übergeordneten Frame
• _top: im obersten Frame (falls Frames verwendet werden)

Beispiel für die Verwendung des target Attributs:

    
      <form action="/submit" method="post" target="_blank">
        <!-- Formularelemente -->
      </form>
    
  

Attribut novalidate

Das novalidate Attribut deaktiviert die eingebaute Formularvalidierung im Browser.

Beispiel für die Verwendung des novalidate Attributs:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Senden</button>
      </form>
    
  

1.4 Methoden zum Senden von Daten

Das Senden von Formulardaten erfolgt mit einem Submit-Button: <input type="submit"> oder <button type="submit">. Wenn der Nutzer auf diesen Button klickt, sendet der Browser die Formulardaten an den Server, unter Verwendung der angegebenen Methode und URL.

Hier sind die Hauptmethoden zum Senden von Formulardaten:

1. Submit-Button: dies ist die gebräuchlichste Methode zum Senden von Formulardaten. Ein Submit-Button kann mit dem <input> oder <button> Element erstellt werden.

Beispiel mit <input>:

    
      <input type="submit" value="Submit">
    
  

Beispiel mit <button>:

    
      <button type="submit">Submit</button>
    
  

2. Enter-Taste: In Textfeldern eines Formulars kann das Drücken der Enter-Taste ebenfalls das Senden des Formulars auslösen.

3. JavaScript: Ein Formular kann programmatisch mit JavaScript gesendet werden. Dies ist nützlich, wenn zusätzliche Überprüfungen oder andere Aktionen vor dem Senden der Daten durchgeführt werden müssen.

Beispiel für die Verwendung von JavaScript zum Senden eines Formulars:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Submit</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Erfolgreiche Anmeldung!\n" + "\n" + `Willkommen, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Submit</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }