<input type="image">

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

Zusätzlich zu den Attributen, die von allen <input>-Elementen geteilt werden, unterstützen image-Button-Eingaben die folgenden Attribute.

Das alt-Attribut bietet einen alternativen Text, der als Label des Buttons verwendet wird, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, eines User-Agent, der keine Bilder anzeigen kann oder so konfiguriert ist, dass er sie nicht zeigt, oder wenn der Benutzer ein Bildschirmlesegerät verwendet). Wenn angegeben, muss es sich um einen nicht-leeren String handeln, der als Label für den Button geeignet ist.

Zum Beispiel, wenn Sie einen grafischen Button haben, der ein Bild mit einem Symbol und/oder Bildtext "Jetzt einloggen" zeigt, sollten Sie das alt-Attribut auf etwas wie Jetzt einloggen setzen.

Funktional arbeitet das alt-Attribut des <input type="image">-Elements genauso wie das alt-Attribut auf <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, das das <input> besitzt.

Dieses Attribut steht auch auf <input type="submit"> und <button>-Elementen zur Verfügung.

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

application/x-www-form-urlencoded

Dies, der Standardwert, sendet die Formulardaten als String, nachdem der Text mittels eines Algorithmus wie encodeURI() percent-encoded wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten, wodurch es möglich ist, Dateien an den Server zu senden. Sie müssen diesen Kodierungstyp verwenden, wenn Ihr Formular <input>-Elemente vom type file (<input type="file">) enthält.

text/plain

Klartext; hauptsächlich für Debugging-Zwecke nützlich, damit Sie leicht die Daten sehen können, die gesendet werden sollen.

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

Dieses Attribut steht auch auf <input type="submit"> und <button>-Elementen zur Verfügung.

Ein String, der die HTTP-Methode angibt, die verwendet werden soll, wenn die Daten des Formulars gesendet werden; dieser Wert überschreibt jedes method-Attribut, das im besitzenden Formular angegeben ist. Zulässige Werte sind:

get

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

post

Die Daten des Formulars werden im Körper der Anfrage enthalten, die mit einer HTTP-post-Anfrage an die vom formaction oder action-Attribut angegebene URL gesendet wird. Mit dieser Methode können komplexe Daten und Dateianhänge verarbeitet werden.

dialog

Diese Methode wird verwendet, um anzuzeigen, dass der Button den Dialog schließt, mit dem die Eingabe 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 angibt, dass das Formular nicht validiert werden soll, bevor es an den Server gesendet wird. Dies überschreibt den Wert des novalidate-Attributs des Formulars, dem das Element gehört.

Dieses Attribut steht auch auf <input type="submit"> und <button>-Elementen zur Verfügung.

Ein String, der einen Namen oder ein Schlüsselwort angibt, das anzeigt, wo die Antwort angezeigt werden soll, die nach dem Senden des Formulars empfangen wird. Der String muss der Name eines Browsing-Kontexts sein (das heißt, ein Tab, Fenster oder <iframe>). Ein hier angegebener Wert überschreibt jedes durch das target-Attribut auf dem <form>-Element, das diese Eingabe besitzt, gegebene Zielattribut.

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 wie denjenigen, der das Formular enthält. Dies ersetzt das aktuelle Dokument durch die empfangenen Daten. Dies ist der Standardwert, wenn keiner angegeben wurde.

_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 jedoch je nach Konfiguration des User-Agent unterschiedlich sein.

_parent

Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen übergeordneten Kontext gibt, verhält sich dies genauso wie _self.

_top

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

Dieses Attribut steht auch auf <input type="submit"> und <button>-Elementen zur Verfügung.

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

Ein String, der die URL der Bilddatei angibt, die angezeigt werden soll, um den grafischen Sende-Button darzustellen. Wenn der Benutzer mit dem Bild interagiert, wird die Eingabe wie jede andere Button-Eingabe behandelt.

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

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

Wenn usemap angegeben ist, muss es der Name eines Bildkartenelements, <map>, sein, das eine Bildkarte definiert, die mit dem Bild verwendet werden soll. Diese Nutzung ist veraltet; Sie sollten auf das Verwenden des <img>-Elements umstellen, wenn Sie Bildkarten verwenden möchten.

Das <input type="image">-Element ist ein ersetztes Element (ein Element, dessen Inhalt nicht durch die CSS-Schicht erzeugt oder direkt verwaltet wird) und verhält sich in vielerlei Hinsicht wie ein reguläres <img>-Element, jedoch mit den Fähigkeiten eines Sende-Buttons.

Werfen wir einen Blick auf ein Grundbeispiel, das alle wesentlichen Funktionen enthält, die Sie verwenden müssen (Diese funktionieren genau so 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 zu spezifizieren, das im Button angezeigt werden soll.
• Das alt-Attribut bietet Alt-Text für das Bild, sodass Benutzer mit Bildschirmlesegeräten eine bessere Vorstellung davon bekommen, wofür der Button verwendet wird. Es wird auch angezeigt, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann (zum Beispiel wenn der Pfad falsch geschrieben ist). Wenn möglich, verwenden Sie einen Text, der mit dem Label übereinstimmt, das Sie verwenden würden, wenn Sie einen standardmäßigen Sende-Button verwenden würden.
• Die width- und height-Attribute werden verwendet, um die Breite und Höhe anzugeben, bei der das Bild angezeigt werden soll, in Pixeln. Der Button hat die gleiche Größe wie das Bild; Wenn Sie die Trefferfläche des Buttons größer als das Bild machen müssen, müssen Sie CSS verwenden (z.B. padding). Wenn Sie nur eine Dimension angeben, wird die andere automatisch angepasst, sodass das Bild sein ursprüngliches Seitenverhältnis beibehält.

<input type="image">-Elemente — wie reguläre Sende-Buttons — können eine Reihe von Attributen akzeptieren, die das Standardformularverhalten überschreiben:

formaction

Die URI eines Programms, das die vom Eingabeelement übermittelten Informationen verarbeitet; überschreibt das action-Attribut des Formular-Eigentümers des Elements.

formenctype

Gibt den Typ des Inhalts an, der verwendet wird, um das Formular an den Server zu senden. 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 Formular-Eigentümers des Elements.

formmethod

Gibt die HTTP-Methode an, die der Browser verwendet, um das Formular zu senden. Mögliche Werte sind:

• post: Die Daten aus dem Formular werden im Körper des Formulars enthalten und an den Server gesendet.
• get: Die Daten aus dem Formular werden an die form-Attribut-URI angehängt, mit einem '?' als Separator, und die resultierende URI wird an den Server gesendet. Verwenden Sie diese Methode, wenn das Formular keine Nebeneffekte hat und nur ASCII-Zeichen enthält.

Wenn dieses Attribut angegeben ist, überschreibt es das method-Attribut des Formular-Eigentümers des Elements.

formnovalidate

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

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die Antwort angezeigt werden soll, die nach dem Senden des Formulars empfangen wird. Dies ist ein Name oder ein Schlüsselwort für einen Browsing-Kontext (zum Beispiel Tab, Fenster oder Inline-Frame). Wenn dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formular-Eigentümers des Elements. Die folgenden Schlüsselwörter haben besondere Bedeutungen:

• _self: Lädt die Antwort in denselben Browsing-Kontext wie der aktuelle. Dieser Wert ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Lädt die Antwort in einen neuen unbenannten Browsing-Kontext.
• _parent: Lädt die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es kein Elternteil gibt, verhält sich diese Option wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (das heißt, der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn es kein Elternteil gibt, verhält sich diese Option wie _self.

Wenn Sie ein Formular mit einem Button erstellen, der mit <input type="image"> erzeugt wurde, werden zwei zusätzliche Datenpunkte automatisch vom Browser an den Server gesendet — x und y. Sie können dies in unserem X Y Koordinaten-Beispiel in Aktion sehen.

Wenn Sie auf das Bild klicken, um das Formular zu senden, werden die Daten an die URL als Parameter angehängt, zum Beispiel ?x=52&y=55. Wenn das Bildeingabe-Element ein name-Attribut hat, beachten Sie, dass der angegebene Name jedem Attribut vorangestellt wird. Wenn der name zum Beispiel position ist, dann würden 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 die die Maus geklickt hat, um das Formular zu senden, wobei (0,0) die obere linke Ecke des Bildes ist und der Standardwert, falls die Übertragung ohne einen Klick auf das Bild erfolgt. Diese können verwendet werden, wenn die Position, auf die das Bild geklickt wurde, von Bedeutung ist. Beispielsweise könnten Sie eine Karte haben, die bei einem Klick die Koordinaten, die geklickt wurden, 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 gesendeten Koordinaten geklickt wurde, und eine Zählung der beliebtesten Farben führt, für die Leute gestimmt haben.

Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des <input>-Elementrahmens anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie die Größe des Bildes angepasst wird, um innerhalb des Rahmens zu passen. Dies ermöglicht es Ihnen, einen Rahmen für das Bild mit den width- und height-Attributen zu spezifizieren, um im Layout Platz zu schaffen, dann anzupassen, wo innerhalb dieses Raums das Bild positioniert wird und wie (oder ob) es skaliert wird, um diesen Raum zu besetzen.

Das folgende Beispiel zeigt denselben Button wie zuvor, aber im Kontext eines typischen Anmeldeformulars eingeschlossen.

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 besser zu positionieren:

div {
  margin-bottom: 10px;
}

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

In diesem Beispiel passen wir das vorherige Beispiel so an, dass mehr Platz für das Bild reserviert wird und dann die tatsächliche Größe und Positionierung des Bildes mithilfe von object-fit und object-position angepasst wird.

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 angibt, dass das Bild in der größtmöglichen Größe gezeichnet werden soll, die in das Elementfeld passt, ohne das Seitenverhältnis zu ändern. Beachten Sie den sichtbaren grauen Hintergrund des Elements, der immer noch in dem Bereich sichtbar ist, der nicht vom Bild bedeckt ist.

• <input> und die Schnittstelle HTMLInputElement, die es implementiert.
• Das HTML-Element <img>
• Positionierung und Größe des Bildes innerhalb des <input>-Rahmens: object-position und object-fit