HTML/Formulare/input/button

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche
Beachten Sie: Input-Elemente zum Auslösen von Benutzeraktionen sind zwar nicht als veraltet oder missbilligt gekennzeichnet, sie sollten dennoch nicht mehr verwendet werden. Siehe dazu auch SELFHTML-Blog input oder button für submit-Elemente
Empfehlung: Verwenden Sie für Buttons anstelle von
  • input type = "button"
  • input type = "submit"
  • input type = "reset"
das button-Element.

input type = "button"[Bearbeiten]

input type = "submit"[Bearbeiten]

input type = "reset"[Bearbeiten]

input type = "image"[Bearbeiten]

Mit <input type="image"> können sie einen grafischen Absendebutton erzeugen, der mit dem Attribut src einen Button mit einem Bild unterlegt. Anders als bei einem type="submit" werden zusätzlich zu den Formulardaten auch die Koordinaten des Klicks zum Server gesendet.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Grafiken als Button ansehen …
<form>
  <input type="image" src="Mülleimer.png" alt="Mülleimer als Button">
</form>
In diesem Beispiel werden die Koordinaten des Klicks mit der Methode get an die ursprüngliche Ressource gesendet. Da das input-Element hat keinen Namen hat, endet die URL nach dem Absenden beispielsweise mit ?x=31&y=35.
Beachten Sie: Dieses Beispiel funktioniert im Frickl nicht vollständig. Um die Koordinaten in der Adresszeile sehen zu können, öffnen Sie den „ansehen …“-Link in einem neuen Tab oder neuen Fenster.

Folgende Angaben sind möglich:

  • src: Angabe der URL der Grafik
  • width: Breite (in Pixeln) der Grafik
  • height Höhe
  • alt: ein Alternativtext, falls das Bild nicht geladen werden kann.

Bei input-Elementen vom Typ image wird nicht nur der eventuell vorhandene Wert im value Attribut übertragen, sondern zusätzlich auch die Koordinaten des Klicks auf das Bild. Das heißt es werden zwei weitere Werte abgeschickt in der Form name.x und name.y (in PHP wird daraus name_x/name_y).