HTML-Eingabetyp 'submit': Erstellen von Schaltflächen zum Absenden von Formularen

Die Schaltfläche 'input type submit' löst das Senden des Formulars aus und gibt die darin enthaltenen Daten an den Server weiter. Der Server kann dann diese Daten verarbeiten, z. B. speichern, eine Datenbank aktualisieren oder eine E-Mail senden.

Vorteile der Verwendung von 'input type submit'

• Einfache Verwendung: Die Erstellung von Schaltflächen zum Absenden von Formularen mit 'input type submit' ist unkompliziert und erfordert nur wenige Codezeilen.
• Flexibel: 'Input type submit' kann mit verschiedenen Formularen verwendet werden, unabhängig von ihrer Komplexität oder Größe.
• Standardisiert: Das 'input type submit'-Element wird von allen modernen Browsern unterstützt und bietet ein konsistentes Erlebnis für Benutzer.

Attribut "value": Festlegen der Beschriftung der Schaltfläche

Das Attribut "value" bestimmt die Beschriftung, die auf der Submit-Schaltfläche angezeigt wird. Diese Beschriftung informiert Benutzer darüber, was passiert, wenn sie auf die Schaltfläche klicken.

Auswahl einer aussagekräftigen Beschriftung

Wähle eine kurze und prägnante Beschriftung, die die Hauptaktion des Formulars klar wiedergibt. Beispielsweise kannst du für ein Kontaktformular "Senden" oder "Nachricht senden" verwenden. Vermeide unklare oder allgemeine Beschriftungen wie "OK" oder "Absenden".

Verwendung von Text-Alternativen

Wenn du Symbole oder Bilder als Submit-Schaltflächen verwendest, solltest du ein Attribut "alt" hinzufügen, um eine Textalternative für Personen bereitzustellen, die Bildschirmlesegeräte verwenden.

Weiterführende Informationen gibt es bei: HTML-Fortschrittsbalken: Visuelle Anzeigen für den Fortschritt

Spezialzeichen in der Beschriftung

Um Spezialzeichen in der Beschriftung zu verwenden, musst du sie als HTML-Entitäten codieren. Beispielsweise kannst du für einen Doppelpunkt ":" verwenden.

Lokalisierung der Beschriftung

Wenn du eine Website für ein globales Publikum erstellst, kannst du die Beschriftung für verschiedene Sprachen lokalisieren. Dies ermöglicht es Benutzern, die Beschriftung in ihrer eigenen Sprache anzuzeigen.

Häufige Fehler

Fehler: Verwendung einer leeren Beschriftung

Lösung: Gib immer eine aussagekräftige Beschriftung an, damit Benutzer wissen, was passieren wird.

Fehler: Verwendung von allgemeinen Beschriftungen

Lösung: Verwende spezifische Beschriftungen, die die Aktion des Formulars genau beschreiben.

Fehler: Nichtcodierung von Spezialzeichen

Lösung: Codiere Spezialzeichen als HTML-Entitäten, um die Darstellung in allen Browsern sicherzustellen.

Attribut "name": Benennung der Schaltfläche für die Verarbeitung auf dem Server

Das name-Attribut für den Eingabefeldtyp "submit" dient dazu, die Schaltfläche für die Weiterverarbeitung auf dem Server zu benennen.

Für nähere Informationen besuche: Textarea readonly: Erstellen schreibgeschützter Textfelder

Zweck:

Wenn du ein Formular an einen Server sendest, werden die Daten der Eingaben in der Regel verarbeitet. Das name-Attribut gibt dem Server den Namen des Elements an, das den Absendevorgang initiiert hat.

Beispiel:

<form action="/submit.php">
  <button type="submit" name="login">Anmelden</button>
</form>

In diesem Beispiel erhält die Schaltfläche den Namen "login", der beim Absenden des Formulars zusammen mit den anderen Formulardaten an den Server übergeben wird.

Verarbeitung auf dem Server

Auf dem Server werden die Formulardaten in der Regel von einem Skript oder einer Anwendung verarbeitet. Das Skript sucht in den übermittelten Daten nach dem name-Wert der Schaltfläche, die das Formular abgeschickt hat. Dies ermöglicht die Verarbeitung der Formulardaten basierend auf der spezifischen Schaltfläche, die geklickt wurde.

Mehrere Schaltflächen mit demselben Namen

Es ist möglich, mehrere Schaltflächen mit demselben name-Wert zu haben. In diesem Fall verwendet der Server den Wert der ersten Schaltfläche, die geklickt wurde. Dies kann nützlich sein, wenn du mehrere Schaltflächen hast, die dieselben Daten senden, aber mit unterschiedlichen Beschriftungen versehen sind.

Best Practices

• Verwende einen aussagekräftigen Namen, der den Zweck der Schaltfläche deutlich macht.
• Vermeide Leerzeichen im Namen, da diese in manchen Fällen zu Problemen führen können.
• Verwende eindeutige Namen für Schaltflächen in verschiedenen Formularen, um Verwechslungen zu vermeiden.

Attribut 'form': Verknüpfung der Schaltfläche mit einem bestimmten Formular

Der Wert des form-Attributs in HTML-Eingabetypen vom Typ "submit" dient dazu, die Submit-Schaltfläche mit einem bestimmten Formular auf der Seite zu verknüpfen. Dadurch kann der Browser das Formular identifizieren, an das die übermittelten Daten gesendet werden sollen.

Funktionsweise

Wenn du auf eine Submit-Schaltfläche klickst, übermittelt dein Browser standardmäßig alle Formularelemente, die mit dem gleichen form-Attribut verknüpft sind. Die Daten werden dann an die URL gesendet, die im action-Attribut des verknüpften Formulars angegeben ist.

Für zusätzliche Informationen konsultiere: HTML <em>-Tag: Hervorhebung mit Stil

Beispiele

Betrachten wir folgendes HTML-Beispiel:

<form action="submit_handler.php">
  <label for="name">Name:</label>
  <input type="text" id="name">
  <input type="submit" value="Senden">
</form>

In diesem Beispiel ist die Submit-Schaltfläche mit dem Formular auf dieser Seite verknüpft. Wenn du auf die Schaltfläche klickst, werden sowohl der eingegebene Name als auch der Wert der Schaltfläche ("Senden") an die Datei submit_handler.php gesendet.

Mehrere Formulare auf einer Seite

Wenn du mehrere Formulare auf einer Seite hast, kannst du die form-Attribute verwenden, um festzulegen, an welches Formular die Submit-Schaltfläche gebunden sein soll. So kannst du beispielsweise ein Suchformular und ein Kontaktformular auf derselben Seite haben und jedem eine eigene Submit-Schaltfläche zuweisen.

Häufige Fehler

Ein häufiger Fehler ist, die form-Attribute für alle Submit-Schaltflächen auf einer Seite gleich zu setzen. Dadurch wird nur das erste Formular übermittelt, wenn eine der Schaltflächen geklickt wird.

Best Practices

Verwende das form-Attribut, um jede Submit-Schaltfläche eindeutig mit dem Formular zu verknüpfen, an das die Daten gesendet werden sollen. Dies sorgt für eine klare und zuverlässige Formularverarbeitung.

Stilisierung mit CSS: Anpassen des Aussehens der Schaltfläche

Mit CSS kannst du das Aussehen deiner Submit-Schaltfläche anpassen und sie so an das Design deiner Website anpassen. Folgend sind einige der gängigen Stileigenschaften, die du verwenden kannst:

Farbe und Hintergrund

• color: Legt die Farbe des Textes auf der Schaltfläche fest.
• background-color: Legt die Hintergrundfarbe der Schaltfläche fest.

Schriftart und -größe

• font-family: Legt die Schriftart des Schaltflächentextes fest.
• font-size: Legt die Schriftgröße des Schaltflächentextes fest.

Rahmen und Ränder

• border: Legt den Stil, die Breite und die Farbe des Rahmens um die Schaltfläche fest.
• border-radius: Rundet die Ecken der Schaltfläche ab.
• padding: Legt den Abstand zwischen dem Text und den Rändern der Schaltfläche fest.

Schatten und Effekte

• box-shadow: Fügt der Schaltfläche einen Schatteneffekt hinzu.
• text-shadow: Fügt dem Schaltflächentext einen Schatteneffekt hinzu.
• transition: Definiert einen Übergangseffekt beim Hovern oder Klicken auf die Schaltfläche.

Beispiel

Hier ist ein Beispiel für eine stilisierte Submit-Schaltfläche mit CSS:

.submit-button {
  color: #ffffff;
  background-color: #000000;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 10px 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

.submit-button:hover {
  background-color: #333333;
}

Dies würde eine schwarze Schaltfläche mit weißem Text erzeugen, die abgerundete Ecken und einen leichten Schatten hat. Beim Hovern über die Schaltfläche wird der Hintergrund grau.

Weitere Informationen findest du in diesem Artikel: HTML <span>-Tag: Eine umfassende Anleitung zur Markierung von Textinhalten

Tipps

• Verwende Farben und Schriftarten, die zum Gesamtdesign deiner Website passen.
• Experimentiere mit verschiedenen Kombinationen von Stileigenschaften, um den gewünschten Look zu erzielen.
• Verwende ein CSS-Framework wie Bootstrap oder Foundation, um auf vorgefertigte Stile für Schaltflächen zuzugreifen.
• Teste deine Schaltfläche in verschiedenen Browsern, um sicherzustellen, dass sie wie erwartet angezeigt wird.

Accessibility-Optimierung: Bereitstellung von Anweisungen für Bildschirmleser

Als Entwickler ist es deine Aufgabe, sicherzustellen, dass deine Websites für alle zugänglich sind, auch für Personen mit Sehbehinderungen, die Bildschirmlesegeräte verwenden. Bei der Verwendung von Schaltflächen vom Typ "submit" ist es wichtig, diese für Bildschirmleser optimiert zu gestalten.

Bereitstellung beschreibender Beschriftungen

Gib der Schaltfläche mit dem Attribut value eine klare und prägnante Beschriftung. Diese Beschriftung wird von Bildschirmlesegeräten vorgelesen, um Benutzern den Zweck der Schaltfläche zu vermitteln. Verwende keine allgemeinen Beschriftungen wie "Absenden" oder "OK"; sei stattdessen so spezifisch wie möglich. Beispielsweise kannst du für ein Anmeldeformular die Schaltfläche mit "Anmelden" beschriften.

Angabe des Formularnamens

Das Attribut name ist zwar nicht unbedingt für die Accessibility erforderlich, kann aber dennoch hilfreich sein. Wenn ein Formular mehrere Schaltflächen vom Typ "submit" enthält, kannst du das Attribut name verwenden, um jede Schaltfläche eindeutig zu identifizieren. Dies ermöglicht es Bildschirmlesegeräten, Benutzern mitzuteilen, welche Schaltfläche sie gerade verwenden.

Verknüpfung der Schaltfläche mit dem Formular

Stelle sicher, dass die Schaltfläche mit dem Attribut form mit dem richtigen Formular verknüpft ist. Dies ermöglicht es Bildschirmlesegeräten, Benutzern mitzuteilen, in welchem Formular sie sich befinden und welche Schaltflächen dazugehören.

Aria-Label hinzufügen

In einigen Fällen kann es notwendig sein, eine zusätzliche Barrierefreiheitsbezeichnung hinzuzufügen, insbesondere wenn die Beschriftung der Schaltfläche nicht ausreichend beschreibend ist. Verwende das Aria-Label-Attribut, um eine weitere Beschreibung des Zwecks der Schaltfläche bereitzustellen. Beispielsweise kannst du für eine Schaltfläche "Speichern" ein Aria-Label wie folgt hinzufügen:

Mehr Informationen findest du hier: HTML Shy: Versteckter Text für spezielle Fälle

<button type="submit" aria-label="Dieses Formular speichern">Speichern</button>

Verwendung von ARIA-Attributen

Zusätzlich zu den oben genannten Optimierungen kannst du auch ARIA-Attribute verwenden, um die Accessibility deiner Schaltflächen weiter zu verbessern. Die folgenden ARIA-Attribute können hilfreich sein:

• aria-pressed: Gibt an, ob die Schaltfläche aktuell gedrückt ist.
• aria-disabled: Gibt an, ob die Schaltfläche deaktiviert ist.
• aria-expanded: Gibt an, ob die Schaltfläche erweitert ist (z. B. ein Dropdown-Menü).

Durch die Verwendung dieser ARIA-Attribute können Bildschirmlesegeräte Benutzern zusätzliche Informationen über den Status und die Funktionalität der Schaltfläche liefern.

Indem du diese Best Practices befolgst, kannst du sicherstellen, dass deine Schaltflächen vom Typ "submit" für alle Benutzer zugänglich sind, einschließlich derer mit Sehbehinderungen.

Häufige Fehler und deren Behebung

Beim Verwenden von <input type="submit"> können einige häufige Fehler auftreten, die die ordnungsgemäße Funktion deiner Formulare beeinträchtigen können:

Keine Beschriftung für die Schaltfläche

Stelle sicher, dass du das Attribut value angibst, um eine Beschriftung für deine Schaltfläche festzulegen. Ohne Beschriftung können Benutzer die Funktion der Schaltfläche möglicherweise nicht erkennen.

Fehlende Verknüpfung mit einem Formular

Verwende das Attribut form, um die Schaltfläche mit einem bestimmten Formular auf der Seite zu verknüpfen. Andernfalls weiß der Browser nicht, welches Formular mit deiner Schaltfläche gesendet werden soll.

Mehr dazu erfährst du in: So verlinken Sie CSS mit HTML: Eine Schritt-für-Schritt-Anleitung

Inkompatible CSS-Stile

Überprüfe deine CSS-Stile, um sicherzustellen, dass sie die Funktionalität der Schaltfläche nicht beeinträchtigen. Beispielsweise kann ein Stil, der den Cursorzeiger auf "Cursor: not-allowed" setzt, verhindern, dass Benutzer auf die Schaltfläche klicken.

Unzugänglichkeit für Bildschirmleser

Verwende das Attribut aria-label, um eine zusätzliche Beschreibung für Bildschirmleser bereitzustellen, falls die Beschriftung der Schaltfläche nicht ausreicht. Dies verbessert die Barrierefreiheit für Benutzer, die auf Hilfsmittel angewiesen sind.

Fehlende Verarbeitung auf dem Server

Stelle sicher, dass dein Server so konfiguriert ist, dass er das Formular verarbeitet, wenn die Schaltfläche geklickt wird. Andernfalls werden die Formular¬daten nicht gesendet.

Best Practices für die Verwendung von 'input type submit'

Beim Verwenden von 'input type submit' gibt es einige Best Practices, die du befolgen solltest, um die Benutzerfreundlichkeit, Barrierefreiheit und Sicherheit deiner Formulare zu gewährleisten.

###### Beschrifte deine Schaltflächen eindeutig

Verwende aussagekräftige Beschriftungen für deine Submit-Schaltflächen, die eindeutig angeben, was passieren wird, wenn die Schaltfläche geklickt wird. Vermeide allgemeine Bezeichnungen wie "Senden" oder "OK".

###### Sorge für Barrierefreiheit

Stelle sicher, dass deine Submit-Schaltflächen für alle Benutzer zugänglich sind, auch für diejenigen, die Bildschirmlesegeräte verwenden. Gib einen beschreibenden Wert für das Attribut 'alt' an, der die Funktion der Schaltfläche erläutert.

Weitere Einzelheiten findest du in: Einfacher Weg zur Konvertierung von HTML in JSON

###### Vermeide versteckte Submit-Schaltflächen

Verstecke deine Submit-Schaltflächen nicht mithilfe von CSS oder anderen Tricks. Benutzer sollten jederzeit leicht erkennen können, wie sie ihre Eingaben absenden können.

###### Verwende CSS-Selektoren

Wenn du deine Submit-Schaltflächen mit CSS stylen möchtest, verwende Klassennamen oder ID-Selektoren anstelle von Inline-Styles. Dies macht deinen Code übersichtlicher und wartbarer.

###### Prüfe die Serverseite

Prüfe die Eingaben auf der Serverseite, bevor du Formularaktionen ausführst. Dies stellt sicher, dass ungültige Eingaben nicht verarbeitet werden und deine Website vor Angriffen wie Cross-Site Scripting (XSS) geschützt ist.

###### Biete ein Feedback

Gib den Benutzern nach dem Absenden des Formulars ein Feedback. Dies kann eine Erfolgsmeldung, eine Ladeanimation oder eine Weiterleitung zu einer Bestätigungsseite sein.