HTML lernen - Formulare - Buttons
In HTML gibt es verschiedene Buttons. Nachfolgend erfahren Sie mehr zu den einzelnen Typen und deren Eigenschaften.
Hinweis: Ein normaler Button hat ohne die Programmiersprache JavaScript oder einer verwandten keinerlei Funktionalität.
Achtung: Sollten Sie den Formularfeldern irgendwelche Standardwerte zugewiesen haben, so nehmen die einzelnen Felder wieder diese Werte an nach einem Klick auf den Reset-Button.
Der Resetbutton wird so generiert:
Der Bilder-Button entspricht in seiner Funktion dem Sende-Button, ist jedoch anders aufgebaut:
Optional können noch die Attribute width für die Grafikbreite und height für die Grafikhöhe angegeben werden, sollte die Grafik größer sein, als sie benötigt wird.
Der normale Button
Der normale Button kann über zwei unterschiedliche Codes generiert werden. Diese sind:<input type="button" name="button1"> <!-- 1. Variante //--> <button name="button2"></button> <!-- 2. Variante //-->Gebräuchlicher ist Variante 1.
Hinweis: Ein normaler Button hat ohne die Programmiersprache JavaScript oder einer verwandten keinerlei Funktionalität.
Der Zurücksetzen-Button
Dieser Button wird zwar kaum noch verwendet, sollte aber aus Gründen der Vollständigkeit doch erwähnt werden. Dieser Button soll ein Formular, in das vom Benutzer bereits irgendwelche Daten eingegeben wurden, welche eventuell falsch waren, in den Ausgangszustand zurücksetzen. Ausgangszustand bedeutet, dass das Formular nach dem Klick auf den Button wieder so aussieht, wie es direkt nach dem Laden der Seite aussah.Achtung: Sollten Sie den Formularfeldern irgendwelche Standardwerte zugewiesen haben, so nehmen die einzelnen Felder wieder diese Werte an nach einem Klick auf den Reset-Button.
Der Resetbutton wird so generiert:
<input type="reset" name="reset1" value="Zurücksetzen">Der Wert des Attributs value sorgt in diesem Fall für die Aufschrift des Buttons. Wird dieses Attribut nicht angegeben, verwendet jeder Browser eine eigene Standardaufschrift. Dies ist jedoch nicht ratsam!
Der Sende-Button
Zum Absenden eines Formulars wird ein Sende-Button darin benötigt. Der Code eines Sende-Buttons sieht so aus:<input type="submit" name="senden" value="Absenden!">Wie Sie sehen, wird auch beim Sendebutton der unter value angegebene Wert für die Buttonaufschrift verwendet. Sollten Sie hier keinen Wert angeben, so verwendet jeder Browser seinen eigenen Standardwert.
Bilder-Buttons
Oftmals möchte man für den Sende-Button nicht einen dieser unschönen Buttons verwenden, die nur mit CSS (andere Programmiersprache) schöner gemacht werden können. Deshalb gibt es in HTML so genannte Grafik- oder Bilder-Buttons.Der Bilder-Button entspricht in seiner Funktion dem Sende-Button, ist jedoch anders aufgebaut:
<input type="image" name="senden" src="/tutorials/pfad/zum/bild.gf">Wie Sie sehen, wurde hier das Attribut value durch src ersetzt. Dieses neue Attribut enthält den Pfad zur jeweiligen Grafik. Dieser Pfad wird so angegeben, wie weiter vorne im Kapitel "Dateipfade" erklärt.
Optional können noch die Attribute width für die Grafikbreite und height für die Grafikhöhe angegeben werden, sollte die Grafik größer sein, als sie benötigt wird.