<input type="submit">: Button zum Absenden des Formulars

Unser Formular benötigt mindestens 2 HTML-Befehle (sinnvoller sind 3 um auch Inhalt übertragen zu können):

<form action="formular.php" method="post" id="eindeutig_id">
    <input type="text" name="familienname">
    <input type="submit" value="absenden">
</form>

Einerseits den HTML-Befehl <form …, der alle Elemente unseres Formulars umschließt und eine Schaltfläche zum Absenden des Formulars über <input type="submit" ….

Das englische Wort „submit“ hat im deutschen die Bedeutung von „einreichen, überreichen“. Das beschreibt auch perfekt, was dieser Button macht. Sobald dieser aktiviert wird, werden alle Datenfelder (auch das von Submit-Button selber) über das Formular an die im <form action="formular.php" vermerkte URL (in diesem Beispiel wäre das formular.php) überreicht und werden dann dort weiterverarbeitet.

Aufbau HTML-Befehl Submit-Button

Der Aufbau unseres Submit-Buttons:

<input type="submit" value="absenden" name="absendebutton"
 id="button1">

Schauen wir uns die einzelnen Teile genauer an:

1. HTML-Befehl: <input - es handelt sich um ein Eingabefeld, das somit auch einen Wert haben kann (siehe „value“)
2. type="submit" Attribut: die Art des Eingabefeldes ist ein Submit-Schaltfläche – der typische Absendebutton
3. value="absenden" Attribut: dieser Wert wird als Beschriftung der Schaltfläche angezeigt
4. name="absendebutton" Attribut: wie jedes Eingabefeld wird der Wert übertragen und kann anhand des Namens dann abgefragt werden (aber Finger weg davon!)
5. id="button1" Attribut: Zum eindeutig den Button beispielsweise über CSS oder JavaScript ansprechen zu können.

Ein Formular macht mehr Sinn, wenn auch weitere Daten übertragen werden. Daher ergänzen wir unser Beispiel um ein Eingabefeld für den Familiennamen:

<form action="formular.php" method="post" id="eindeutig_id">
    Familienname: <input type="text" name="familienname">
    <input type="submit" value="absenden">
</form>

Und im Browser haben wir folgende Ausgabe:

TIPP: keine Werte über Submit-Buttons übertragen!

Der Submit-Button ist als HTML-Element ein <input …-Feld, dem man über „value“ einen Wert mitgeben kann und diesen später über das „name“ abfragen kann.

Das sollte man bei Submit-Buttons nicht machen, da je nach Browser ein Formular auch einfach über die Enter-Taste abgesendet wird und dann (je nach Browser-Version) kein Inhalt des Submit-Buttons übertragen wird! Dieser wird nur sicher übertragen, wenn der Button angeklickt wurde und nicht unbedingt über die Return-Taste (Enter, Bestätigungstaste). Daher ist das keine gute Idee.

Design des Submit-Buttons über CSS

Wir können das Aussehen der Schaltfläche über CSS beliebig verändern. Wichtig dabei ist, dass es für den Nutzer weiterhin als Absende-Button erkennbar bleibt!

Wir wollen nicht alle input-Felder ansprechen (siehe oben das Eingabefeld für Familiennamen – diese wollen wir nicht im Design ändern) – daher sprechen wir den Submit-Button über den Attribut-Selektor in CSS an:

input[type=submit] {
  background-color: orange;
  cursor: pointer;
}

Über diese Anweisungen ändern wir die Hintergrundfarbe und das Aussehen des Cursors, wenn die Maus über den Submit-Button fährt.

Hier können wir nach Belieben weitere Eigenschaften ändern wie:

• color: für die Vordergrundfarbe
• border: für die Umrandung (Rahmen)
• padding: wieviel Raum um den Text gezeigt wird
• margin: wieviel Raum um den Button als Platz gehalten wird

Interessant wird es, wenn wir auf Mausberührung (::hover) reagieren wollen. Wilde Konstruktionen funktionieren wie:

input[type=submit]:hover {
    background-color: yellow;
}

Einfach ist es, wenn wir dem Button eine ID mitgeben, dann können wir wie gewohnt :hover anwenden.

Unser kompletter Code:

<form action="formular.php" method="post" id="eindeutig_id">
    Familienname: <input type="text" name="familienname">
    <input type="submit" value="absenden" id="button1">
</form>

Und das CSS dazu:

#button1 {
  background-color: orange;
  cursor: pointer;
}

#button1:hover {
    background-color: yellow;
}