HTML - Formulare

Formularelemente

<form action="/submit-form" method="POST">
  <!-- Formularsteuerelemente kommen hier hin -->
</form>

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="message">Nachricht:</label>
  <textarea id="message" name="message"></textarea><br>

  <label for="country">Land:</label>
  <select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Kanada</option>
    <option value="uk">Großbritannien</option>
  </select><br>

  <button type="submit">Absenden</button>
</form>

Eingabetypen für Formulare

HTML bietet verschiedene Eingabetypen, die das Verhalten und Aussehen von Formular-Steuerelementen bestimmen. Jeder Eingabetyp erfüllt einen bestimmten Zweck und stellt eine andere Benutzeroberfläche bereit. Hier sind einige häufig verwendete Eingabetypen für Formulare:

1. Texteingabe (type="text"): Die Texteingabe ist das grundlegendste Formular-Steuerelement. Sie ermöglicht Benutzern, eine einzelne Textzeile einzugeben. Sie wird mit dem <input>-Element erstellt, wobei das type-Attribut auf "text" gesetzt wird.

2. Passworteingabe (type="password"): Die Passworteingabe ähnelt der Texteingabe, maskiert aber die vom Benutzer eingegebenen Zeichen und ersetzt sie durch Punkte oder Sternchen. Dies ist nützlich für sensible Informationen wie Passwörter. Sie wird mit dem <input>-Element erstellt, wobei das type-Attribut auf "password" gesetzt wird.

3. Optionsfelder (type="radio"): Optionsfelder ermöglichen Benutzern, eine einzelne Option aus einer Gruppe sich gegenseitig ausschließender Optionen auszuwählen. Sie werden mit dem <input>-Element erstellt, wobei das type-Attribut auf "radio" gesetzt wird. Mehrere Optionsfelder mit dem gleichen name-Attribut bilden eine Optionsgruppe.

4. Kontrollkästchen (type="checkbox"): Kontrollkästchen ermöglichen Benutzern, mehrere Optionen aus einer Gruppe von Optionen auszuwählen. Sie werden mit dem <input>-Element erstellt, wobei das type-Attribut auf "checkbox" gesetzt wird. Jedes Kontrollkästchen funktioniert unabhängig von den anderen.

5. Datei-Upload (type="file"): Die Datei-Upload-Eingabe ermöglicht Benutzern, Dateien von ihrem lokalen Gerät auszuwählen und hochzuladen. Sie wird mit dem <input>-Element erstellt, wobei das type-Attribut auf "file" gesetzt wird.

6. Versteckte Felder (type="hidden"): Versteckte Felder sind für Benutzer nicht sichtbar, enthalten aber Daten, die mit dem Formular übermittelt werden müssen. Sie werden mit dem <input>-Element erstellt, wobei das type-Attribut auf "hidden" gesetzt wird. Versteckte Felder werden oft verwendet, um zusätzliche Informationen oder Metadaten an den Server zu übermitteln.

7. Senden- und Zurücksetzen-Schaltflächen (type="submit" und type="reset"): Senden- und Zurücksetzen-Schaltflächen werden verwendet, um die Formularübermittlung zu steuern. Die Senden-Schaltfläche sendet die Formulardaten zur Verarbeitung an den Server, während die Zurücksetzen-Schaltfläche alle Formularfelder löscht und auf ihre Standardwerte zurücksetzt. Sie werden mit dem <input>-Element erstellt, wobei das type-Attribut auf "submit" bzw. "reset" gesetzt wird.

Dies sind nur einige Beispiele für die in HTML-Formularen verfügbaren Eingabetypen. Jeder Eingabetyp bietet eine spezifische Möglichkeit für Benutzer, mit dem Formular zu interagieren und Daten einzugeben.

Formular-Attribute

HTML-Formularelemente verfügen über Attribute, mit denen Sie ihr Verhalten steuern und Funktionalität bereitstellen können. Diese Attribute helfen bei der Identifizierung von Formularfeldern, der Festlegung von Standardwerten, der Bereitstellung von Hinweisen für Benutzer und der Durchsetzung von Validierungen. Betrachten wir einige häufig verwendete Formular-Attribute:

1. Das name-Attribut:

   Das name-Attribut gibt einem Formular-Steuerelement eine eindeutige Kennung. Es ist wichtig für die serverseitige Verarbeitung von Formulardaten. Wenn ein Formular abgesendet wird, werden die Formulardaten als Schlüssel-Wert-Paare gesendet, wobei das name-Attribut als Schlüssel dient. Es wird auch verwendet, um Formular-Steuerelemente mit JavaScript zu referenzieren.

2. Das value-Attribut:

   Das value-Attribut gibt den Anfangs- oder Standardwert eines Formular-Steuerelements an. Bei Texteingaben und Textbereichen legt es den Standardtext fest, der im Feld erscheint. Bei Optionsfeldern und Kontrollkästchen definiert es den Wert, der an den Server gesendet wird, wenn das Steuerelement ausgewählt ist. Bei Absende-Schaltflächen legt es den Text fest, der auf der Schaltfläche erscheint.

3. Das placeholder-Attribut:

   Das placeholder-Attribut bietet einen Hinweis oder Beispieltext, der in einem Formular-Steuerelement angezeigt wird, wenn es leer ist. Es hilft Benutzern zu verstehen, welche Art von Eingabe in dem Feld erwartet wird. Der Platzhaltertext verschwindet, wenn der Benutzer mit der Eingabe beginnt oder das Feld den Fokus erhält.

4. Das required-Attribut:

   Das required-Attribut ist ein boolesches Attribut, das angibt, ob ein Formular-Steuerelement ausgefüllt werden muss, bevor das Formular abgesendet werden kann. Wenn ein Pflichtfeld leer gelassen wird, wird das Formular nicht abgesendet, und der Benutzer wird aufgefordert, die fehlenden Informationen einzugeben. Dieses Attribut hilft bei der Formularvalidierung auf der Client-Seite.

5. Die Attribute disabled und readonly:

   Das disabled-Attribut wird verwendet, um ein Formular-Steuerelement zu deaktivieren, wodurch es nicht bearbeitbar und nicht anklickbar wird. Deaktivierte Formular-Steuerelemente werden nicht mit den Formulardaten übermittelt. Das readonly-Attribut hingegen macht ein Formular-Steuerelement schreibgeschützt, verhindert, dass Benutzer seinen Wert ändern können, erlaubt aber dennoch, dass es mit dem Formular übermittelt wird.

Diese Attribute bieten zusätzliche Kontrolle und Funktionalität für HTML-Formularelemente und ermöglichen es Ihnen, interaktivere und benutzerfreundlichere Formulare zu erstellen. Durch die Verwendung dieser Attribute können Sie Benutzer anleiten, Standardwerte festlegen, grundlegende Formularvalidierungen durchführen und das Verhalten von Formular-Steuerelementen kontrollieren.

Formularvalidierung

Formularvalidierung verbessert die Datenintegrität und Benutzererfahrung. HTML bietet Attribute und Mechanismen für clientseitige Formularvalidierung, bevor das Formular an den Server gesendet wird.

Clientseitige Formularvalidierung verwendet HTML-Attribute und JavaScript. Sie ermöglicht sofortiges Feedback an den Benutzer über seine Eingaben und verhindert, dass ungültige Daten an den Server gesendet werden.

Das pattern-Attribut wird häufig für die Formularvalidierung verwendet. Es ermöglicht die Angabe eines regulären Ausdrucks, dem der Eingabewert entsprechen muss. Wenn der Eingabewert nicht dem Muster entspricht, wird das Formular nicht abgesendet.

<input type="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>

Das pattern-Attribut im Beispiel validiert ein E-Mail-Eingabefeld. Der reguläre Ausdruck gibt an, dass die Eingabe Zeichen, Ziffern und bestimmte Symbole enthalten muss, gefolgt von einem "@"-Symbol, einem Domainnamen und einer Top-Level-Domain.

Zur Validierung numerischer Eingabefelder bietet HTML die Attribute min, max und step. Die Attribute min und max legen die minimalen und maximalen Werte fest, die für die Eingabe erlaubt sind, während das step-Attribut die zulässigen Zahlenintervalle angibt.

<input type="number" name="quantity" min="1" max="10" step="1" required>

Das min-Attribut legt den Mindestwert auf 1 fest, das max-Attribut setzt den Höchstwert auf 10, und das step-Attribut gibt an, dass der Wert in Schritten von 1 erhöht werden muss.

Für Texteingabefelder begrenzt das maxlength-Attribut die maximale Anzahl der einzugebenden Zeichen. Dies beschränkt die Eingabe auf eine bestimmte Länge.

<input type="text" name="username" maxlength="20" required>

Das maxlength-Attribut begrenzt die Eingabe auf maximal 20 Zeichen.

In manchen Fällen möchten Sie die Formularvalidierung deaktivieren. Das novalidate-Attribut kann dem <form>-Tag hinzugefügt werden, um anzugeben, dass das Formular beim Absenden nicht validiert werden soll.

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

Das novalidate-Attribut sendet das Formular ohne clientseitige Validierung ab, und jede Validierung muss serverseitig durchgeführt werden.

Obwohl die clientseitige Validierung die Benutzererfahrung verbessert und unnötige Serveranfragen reduziert, sollte man sich nicht ausschließlich darauf verlassen. Serverseitige Validierung sollte immer implementiert werden, um Datenintegrität und Sicherheit zu gewährleisten, da die clientseitige Validierung von Benutzern umgangen werden kann.

Formular-Styling

Mit CSS können Sie HTML-Formulare stylen, um ihr Aussehen zu verbessern und sie benutzerfreundlicher zu gestalten. CSS bietet Selektoren und Eigenschaften, mit denen Sie Formularelemente gezielt ansprechen und gestalten können. Hier sind einige Möglichkeiten, Formulare zu stylen.

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 5px #4CAF50;
}

input:valid {
  border-color: #4CAF50;
}

input:invalid {
  border-color: #ff0000;
}

input[type="text"],
textarea {
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

select {
  appearance: none;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-image: url("arrow-down.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  margin-top: 5px;
}

Formularübermittlung

Formularübermittlung ist der Prozess, bei dem Formulardaten von der Client-Seite (Webbrowser) zur Server-Seite zur Verarbeitung gesendet werden. Wenn Sie ein Formular ausfüllen und auf die Senden-Schaltfläche klicken, werden die Formulardaten gesammelt und mit einer festgelegten Methode und einem bestimmten Kodierungstyp an den Server gesendet.

Bei der Übermittlung eines Formulars sendet der Browser eine HTTP-Anfrage an den Server, wobei die Formulardaten je nach der method-Eigenschaft des Formulars im Anfragekörper oder als URL-Parameter enthalten sind. Der Server empfängt die Anfrage, verarbeitet die Formulardaten und antwortet in der Regel mit einer neuen Seite oder sendet Daten zurück an den Client.

Es gibt zwei gängige Methoden zum Senden von Formulardaten:

Wenn Formulardaten an den Server gesendet werden, werden sie in einem bestimmten Format kodiert. Die zwei gängigen Kodierungstypen sind:

1. application/x-www-form-urlencoded:

   • Dies ist der Standard-Kodierungstyp für Formularübermittlungen.
   • Formulardaten werden als Schlüssel-Wert-Paare kodiert, getrennt durch Kaufmanns-Und-Zeichen (&).
   • Sonderzeichen werden URL-kodiert, indem sie durch ihren ASCII-Code ersetzt werden, dem ein Prozentzeichen (%) vorangestellt ist.
   • Beispiel: name=John&age=25

2. multipart/form-data:

   • Dieser Kodierungstyp wird verwendet, wenn das Formular Datei-Uploads enthält.
   • Die Formulardaten werden in mehrere Teile aufgeteilt, wobei jeder Teil ein Formularfeld oder eine Datei repräsentiert.
   • Jeder Teil hat seinen eigenen Satz von Kopfzeilen und Grenzen, um ihn von anderen Teilen zu trennen.
   • Diese Kodierung ermöglicht die effiziente Übertragung von Binärdaten, wie Dateien, zusammen mit anderen Formularfeldern.

Auf der Server-Seite werden die Formulardaten empfangen und basierend auf der verwendeten Server-Technologie und dem Framework verarbeitet. Gängige serverseitige Sprachen und Frameworks wie PHP, Node.js (Express.js), Ruby on Rails und Python (Django) bieten Möglichkeiten, Formulardaten zu handhaben und auf sie zuzugreifen, die sowohl über GET- als auch POST-Methoden übermittelt wurden.

<form action="/submit" method="post" enctype="multipart/form-data">
  <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>

  <label for="file">Datei:</label>
  <input type="file" id="file" name="file">

  <button type="submit">Absenden</button>
</form>

Die sichere Handhabung von Formularübermittlungen ist wichtig, um Angriffe wie Cross-Site-Scripting (XSS) und Cross-Site-Request-Forgery (CSRF) zu verhindern. Serverseitige Validierung, Datensäuberung und die Verwendung von CSRF-Tokens sind empfohlene Praktiken, um sich vor diesen Schwachstellen zu schützen.