<input type="image">

<input type="image">-Elemente akzeptieren keine value-Attribute. Der Pfad zum anzuzeigenden Bild wird im src-Attribut angegeben.

Zusätzlich zu den von allen <input>-Elementen geteilten Attributen unterstützen image-Schaltflächen-Eingaben die folgenden Attribute.

Das alt-Attribut bietet einen alternativen Text, der als Beschriftung der Schaltfläche verwendet wird, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, eines Benutzeragenten, der keine Bilder anzeigen kann oder konfiguriert ist, keine Bilder anzuzeigen, oder wenn der Benutzer ein Gerät zur Bildschirmlesung verwendet). Wenn vorhanden, muss es ein nicht-leerer String sein, der als Beschriftung für die Schaltfläche geeignet ist.

Zum Beispiel, wenn Sie eine grafische Schaltfläche haben, die ein Bild mit einem Symbol und/oder Bildtext "Login Now" zeigt, sollten Sie das alt-Attribut auch auf etwas wie Login Now setzen.

Funktional arbeitet das alt-Attribut des <input type="image">-Elements genau wie das alt-Attribut bei <img>-Elementen.

Ein String, der die URL angibt, an die die Daten gesendet werden sollen. Dies hat Vorrang vor dem action-Attribut des <form>-Elements, dem das <input> gehört.

Dieses Attribut ist auch bei <input type="submit">- und <button>-Elementen verfügbar.

Ein String, der die Kodierungsmethode identifiziert, die beim Senden der Formulardaten an den Server verwendet werden soll. Es gibt drei zulässige Werte:

application/x-www-form-urlencoded

Dies, der Standardwert, sendet die Formulardaten als String, nachdem der Text durch ein Algorithmus wie encodeURI() prozentencodiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten, wodurch Dateien an den Server gesendet werden können. Sie müssen diese Kodierung verwenden, wenn Ihr Formular <input>-Elemente vom type file (<input type="file">) enthält.

text/plain

Nur für Debugging nützlich, da es die Daten als Klartext sendet, damit man leicht sehen kann, welche Daten gesendet werden.

Wenn angegeben, überschreibt der Wert des formenctype-Attributs das action-Attribut des besitzenden Formulars.

Dieses Attribut ist auch bei <input type="submit">- und <button>-Elementen verfügbar.

Ein String, der die HTTP-Methode angibt, die beim Senden der Formulardaten verwendet werden soll; dieser Wert überschreibt jedes im besitzenden Formular angegebene method-Attribut. Zulässige Werte sind:

get

Eine URL wird konstruiert, indem mit der URL begonnen wird, die durch das formaction- oder action-Attribut angegeben ist, ein Fragezeichen ("?") angehängt wird und dann die Formulardaten, kodiert wie durch formenctype oder dem enctype-Attribut des Formulars beschrieben, angehängt werden. Diese URL wird dann als HTTP-get-Anfrage an den Server gesendet. Diese Methode funktioniert gut für Formulare, die nur ASCII-Zeichen enthalten und keine Nebenwirkungen haben. Dies ist der Standardwert.

post

Die Formulardaten werden im Body der an die durch das formaction- oder action-Attribut angegebene URL gesendeten Anfrage aufgenommen, unter Verwendung einer HTTP-post-Anfrage. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

Diese Methode wird verwendet, um anzuzeigen, dass die Schaltfläche den Dialog schließt, mit dem der Input verknüpft ist, und die Formulardaten überhaupt nicht überträgt.

Dieses Attribut ist auch bei <input type="submit">- und <button>-Elementen verfügbar.

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass das Formular vor dem Senden an den Server nicht validiert werden soll. Dieses Attribut überschreibt den Wert des novalidate-Attributs des besitzenden Formulars.

Dieses Attribut ist auch bei <input type="submit">- und <button>-Elementen verfügbar.

Ein String, der einen Namen oder ein Schlüsselwort angibt, das angibt, wo die nach dem Senden des Formulars empfangene Antwort angezeigt werden soll. Der String muss der Name eines browsing context (das heißt, eines Tabs, Fensters oder <iframe>) sein. Ein hier angegebener Wert überschreibt jedes durch das target-Attribut auf dem <form>, dem dieses Input gehört, angegebene Ziel.

Zusätzlich zu den tatsächlichen Namen von Tabs, Fenstern oder Inline-Frames gibt es einige spezielle Schlüsselwörter, die verwendet werden können:

_self

Lädt die Antwort in denselben Browsing-Kontext, in dem sich das Formular befindet. Dies ersetzt das aktuelle Dokument durch die empfangenen Daten. Dies ist der Standardwert, der verwendet wird, wenn keiner angegeben ist.

_blank

Lädt die Antwort in einen neuen, unbenannten Browsing-Kontext. Dies ist typischerweise ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann aber je nach Konfiguration des Benutzeragenten abweichen.

_parent

Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn kein übergeordneter Kontext vorhanden ist, verhält sich dies wie _self.

_top

Lädt die Antwort in den obersten Browsing-Kontext; dies ist der Browsing-Kontext, der der oberste Vorfahr des aktuellen ist. Wenn der aktuelle Kontext der oberste ist, verhält sich dies wie _self.

Dieses Attribut ist auch bei <input type="submit">- und <button>-Elementen verfügbar.

Eine Zahl, die die Höhe in CSS-Pixeln angibt, in der das durch das src-Attribut angegebene Bild gezeichnet werden soll.

Ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um die grafische Absenden-Schaltfläche darzustellen. Wenn der Benutzer mit dem Bild interagiert, wird der Input wie jeder andere Schaltflächen-Input behandelt.

Eine Zahl, die die Breite in CSS-Pixeln angibt, in der das Bild gezeichnet werden soll.

Das folgende Attribut wurde von HTML 4 für image-Inputs definiert, aber nicht von allen Browsern implementiert und ist mittlerweile veraltet.

Wenn usemap angegeben ist, muss es der Name eines Bildkarten-Elements, <map>, sein, das eine zu verwendende Bildkarte mit dem Bild definiert. Diese Verwendung ist veraltet; Sie sollten auf die Verwendung des <img>-Elements umsteigen, wenn Sie Bildkarten verwenden möchten.

Das <input type="image">-Element ist ein ersetztes Element (ein Element, dessen Inhalt nicht erzeugt oder direkt von der CSS-Ebene verwaltet wird) und verhält sich in vielerlei Hinsicht wie ein reguläres <img>-Element, jedoch mit den Fähigkeiten einer Absenden-Schaltfläche.

Sehen wir uns ein grundlegendes Beispiel an, das alle wesentlichen Funktionen enthält, die Sie verwenden müssen (diese funktionieren genau wie beim <img>-Element):

<input
  id="image"
  type="image"
  width="100"
  height="30"
  alt="Login"
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />

• Das src-Attribut wird verwendet, um den Pfad zu dem Bild anzugeben, das in der Schaltfläche angezeigt werden soll.
• Das alt-Attribut bietet Alt-Text für das Bild, so dass Bildschirmleser-Benutzer eine bessere Vorstellung davon haben, wofür die Schaltfläche verwendet wird. Es wird auch angezeigt, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann (z.B. wenn der Pfad falsch geschrieben ist). Wenn möglich, verwenden Sie Text, der mit der Beschriftung übereinstimmt, die Sie verwenden würden, wenn Sie eine standardmäßige Absenden-Schaltfläche verwenden.
• Die width- und height-Attribute werden verwendet, um die Breite und Höhe anzugeben, in der das Bild angezeigt werden soll, in Pixeln. Die Schaltfläche hat die gleiche Größe wie das Bild; wenn Sie benötigen, dass der Trefferbereich der Schaltfläche größer als das Bild ist, müssen Sie CSS verwenden (z.B. padding). Wenn Sie nur eine Dimension angeben, wird die andere automatisch angepasst, damit das Bild sein ursprüngliches Seitenverhältnis beibehält.

<input type="image">-Elemente – wie reguläre Absenden-Schaltflächen – können eine Reihe von Attributen akzeptieren, die das Standardverhalten des Formulars überschreiben:

formaction

Die URI eines Programms, das die Informationen verarbeitet, die vom Input-Element übermittelt werden; überschreibt das action-Attribut des Formularinhabers des Elements.

formenctype

Gibt den Inhaltstyp an, der beim Senden des Formulars an den Server verwendet wird. Mögliche Werte sind:

• application/x-www-form-urlencoded: Der Standardwert, wenn das Attribut nicht angegeben ist.
• text/plain.

Wenn dieses Attribut angegeben ist, überschreibt es das enctype-Attribut des Formularinhabers des Elements.

formmethod

Gibt die HTTP-Methode an, die der Browser zum Senden des Formulars verwendet. Mögliche Werte sind:

• post: Die Daten aus dem Formular werden im Body des Formulars eingeschlossen und an den Server gesendet.
• get: Die Daten aus dem Formular werden an die form-Attribute-URI angehängt, mit einem '?' als Trennzeichen, und die resultierende URI wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebenwirkungen hat und nur ASCII-Zeichen enthält.

Wenn dieses Attribut angegeben ist, überschreibt es das method-Attribut des Formularinhabers des Elements.

formnovalidate

Ein Boolean-Attribut, das angibt, dass das Formular nicht validiert werden soll, wenn es abgesendet wird. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formularinhabers des Elements.

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die empfangene Antwort nach dem Absenden des Formulars angezeigt werden soll. Dies ist ein Name oder Schlüsselwort für einen browsing context (z.B. Tab, Fenster oder Inline-Frame). Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formularinhabers des Elements. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Die Antwort wird im selben Browsing-Kontext wie der aktuelle geladen. Dieser Wert ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Die Antwort wird in einen neuen unbenannten Browsing-Kontext geladen.
• _parent: Die Antwort wird in den übergeordneten Browsing-Kontext des aktuellen geladen. Wenn kein übergeordneter vorhanden ist, verhält sich diese Option wie _self.
• _top: Die Antwort wird in den obersten Browsing-Kontext (d.h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Eltern hat) geladen. Wenn kein übergeordneter vorhanden ist, verhält sich diese Option wie _self.

Wenn Sie ein Formular mit einer mit <input type="image"> erstellten Schaltfläche absenden, übermittelt der Browser automatisch zwei zusätzliche Datenpunkte an den Server — x und y. Dies können Sie in unserem X Y-Koordinaten-Beispiel in Aktion sehen.

Wenn Sie auf das Bild klicken, um das Formular zu senden, sehen Sie, wie die Daten als Parameter an die URL angehängt werden, z.B. ?x=52&y=55. Wenn das Bild-Input ein name-Attribut hat, wird der angegebene Name auf jedes Attribut mit einem Präfix versehen, so dass, wenn der name position ist, die zurückgegebenen Koordinaten in der URL als ?position.x=52&position.y=55 formatiert werden. Dies gilt natürlich auch für alle anderen Attribute.

Dies sind die X- und Y-Koordinaten des Bildes, auf das die Maus geklickt hat, um das Formular abzusenden, wobei (0,0) die obere linke Ecke des Bildes ist und der Standard, falls die Übermittlung ohne Klick auf das Bild erfolgt. Diese können verwendet werden, wenn die Position, auf die das Bild geklickt wurde, von Bedeutung ist, z.B. können Sie eine Karte haben, die beim Klick die angeklickten Koordinaten an den Server sendet. Der serverseitige Code ermittelt dann, welcher Ort angeklickt wurde, und gibt Informationen über nahegelegene Orte zurück.

In unserem obigen Beispiel könnten wir serverseitigen Code schreiben, der ermittelt, auf welche Farbe durch die übermittelten Koordinaten geklickt wurde, und eine Zählung der Lieblingsfarben, für die die Leute abgestimmt haben, führt.

Sie können die object-position-Eigenschaft verwenden, um die Position des Bildes innerhalb des Rahmens des <input>-Elements anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Bildes angepasst wird, um in den Rahmen zu passen. Dies ermöglicht es Ihnen, einen Rahmen für das Bild mit den width- und height-Attributen festzulegen, um im Layout Platz zu reservieren, dann anzupassen, wo innerhalb dieses Raumes sich das Bild befindet und wie (oder ob) es skaliert wird, um diesen Raum zu füllen.

Das folgende Beispiel zeigt die gleiche Schaltfläche wie zuvor, jedoch im Kontext eines typischen Login-Formulars.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  </div>
</form>

CSS

Und nun etwas CSS, um die grundlegenden Elemente ordentlicher anzuzeigen:

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

In diesem Beispiel passen wir das vorherige Beispiel an, um mehr Platz für das Bild zu reservieren und dann die tatsächliche Bildgröße und -positionierung mit object-fit und object-position anzupassen.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="200"
      height="100" />
  </div>
</form>

CSS

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #ddd;
}

Hier ist object-position so konfiguriert, dass das Bild in der oberen rechten Ecke des Elements gezeichnet wird, während object-fit auf contain gesetzt ist, was darauf hinweist, dass das Bild in der größtmöglichen Größe gezeichnet werden soll, die in den Rahmen des Elements passt, ohne sein Seitenverhältnis zu ändern. Beachten Sie den immer noch sichtbaren grauen Hintergrund des Elements im Bereich, der nicht vom Bild bedeckt ist.

• <input> und die HTMLInputElement-Schnittstelle, die es implementiert.
• Das HTML-<img>-Element
• Positionierung und Größenanpassung des Bildes im Rahmen des <input>-Elements: object-position und object-fit