<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 Attributen, die von allen <input>-Elementen geteilt werden, unterstützen image-Button-Inputs die folgenden Attribute.

Das alt-Attribut bietet eine alternative Zeichenkette, die als Beschriftung des Buttons genutzt wird, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, eines User Agents, der Bilder nicht anzeigen kann oder so konfiguriert ist, dass er dies nicht tut, oder wenn der Benutzer ein Bildschirmlesegerät verwendet). Falls vorhanden, muss es eine nicht-leere Zeichenkette sein, die als Beschriftung für den Button geeignet ist.

Beispielsweise sollte bei einem grafischen Button, der ein Bild mit einem Symbol und/oder dem Bildtext "Login Now" zeigt, das alt-Attribut auf etwas wie Login Now gesetzt werden.

Funktionell 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 den <input> besitzt.

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

Ein String, der die Kodierungsmethode angibt, 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 Zeichenkette, nachdem der Text durch Algorithmen wie encodeURI() prozentkodiert wurde.

multipart/form-data

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

text/plain

Nur einfacher Text; hauptsächlich nützlich zur Fehlersuche, da Sie die Daten, die gesendet werden sollen, leicht sehen können.

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

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

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

get

Eine URL wird erstellt, indem mit der URL begonnen wird, die durch das formaction- oder action-Attribut angegeben wird. Danach wird ein Fragezeichen ("?") hinzugefügt, und dann die Formulardaten, kodiert wie durch formenctype oder das enctype-Attribut des Formulars beschrieben. Diese URL wird dann an den Server unter Verwendung einer HTTP get-Anfrage gesendet. Diese Methode eignet sich gut für einfache Formulare, die nur ASCII-Zeichen enthalten und keine Seiteneffekte haben. Dies ist der Standardwert.

post

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

dialog

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

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

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

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

Ein String, der einen Namen oder ein Schlüsselwort angibt, der oder das angibt, wo die Antwort, die nach dem Übermitteln des Formulars empfangen wird, angezeigt werden soll. Der String muss der Name eines Browsing-Kontexts sein (d. h. ein Tab, Fenster oder <iframe>). Ein hier angegebener Wert überschreibt jedes Ziel, das durch das target-Attribut des {HTMLElement("form")}}s angegeben wird, das diese Eingabe besitzt.

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, der das Formular enthält. Dies ersetzt das aktuelle Dokument durch die empfangenen Daten. Dies ist der Standardwert, 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 User Agents abweichen.

_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 oberste Vorfahr des aktuellen Kontextes. Wenn der aktuelle Kontext der oberste ist, verhält sich dies genauso wie _self.

Dieses Attribut ist ebenfalls auf <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 festgelegte Bild gezeichnet werden soll.

Ein String, der die URL der Bilddatei angibt, die zur Darstellung des grafischen Absende-Buttons angezeigt werden soll. Wenn der Benutzer mit dem Bild interagiert, wird die Eingabe wie jede andere Button-Eingabe behandelt.

Eine Zahl, die angibt, wie breit das Bild in CSS-Pixeln gezeichnet werden soll.

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

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

Das <input type="image">-Element ist ein ersetztes Element (ein Element, dessen Inhalt nicht von der CSS-Schicht generiert oder direkt verwaltet wird) und verhält sich ähnlich wie ein reguläres <img>-Element, aber mit den Möglichkeiten eines Absende-Buttons.

Schauen wir uns ein einfaches Beispiel an, das alle wesentlichen Funktionen enthält, die Sie verwenden müssten (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 anzugeben, das im Button angezeigt werden soll.
• Das alt-Attribut bietet Alternativtext für das Bild, sodass Bildschirmleser-Nutzer eine bessere Vorstellung davon bekommen, wofür der Button verwendet wird. Es wird auch angezeigt, wenn das Bild aus irgendeinem Grund nicht gezeigt werden kann (z. B. wenn der Pfad falsch geschrieben ist). Verwenden Sie nach Möglichkeit einen Text, der mit dem Etikett übereinstimmt, das Sie verwenden würden, wenn Sie einen Standard-Absende-Button verwenden würden.
• Die width- und height-Attribute werden verwendet, um die Breite und Höhe anzugeben, in der das Bild angezeigt werden soll, in Pixeln. Der Button ist genauso groß wie das Bild; wenn Sie möchten, dass die Trefferspanne des Buttons 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 — ähnlich wie reguläre Absende-Buttons — können eine Anzahl von Attributen akzeptieren, die das Standardformularverhalten überschreiben:

formaction

Die URI eines Programms, das die vom Input-Element übermittelten Informationen verarbeitet; überschreibt das action-Attribut des besitzenden Formulars.

formenctype

Gibt den Inhaltstyp an, der zum Übermitteln 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 besitzenden Formulars.

formmethod

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

• post: Die Daten des Formulars sind im Body des Formulars enthalten und werden an den Server gesendet.
• get: Die Daten des Formulars 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 Seiteneffekte hat und nur ASCII-Zeichen enthält.

Wenn angegeben, überschreibt dieses Attribut das method-Attribut des besitzenden Formulars.

formnovalidate

Ein Boolean-Attribut, das angibt, dass das Formular beim Absenden nicht validiert werden soll. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des besitzenden Formulars.

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird. Dies ist der Name oder das 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 besitzenden Formulars. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

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

Wenn Sie ein Formular mit einem Button übermitteln, der mit <input type="image"> erstellt wurde, sendet der Browser automatisch zwei zusätzliche Datenpunkte an den Server — x und y. Sie können dies in unserem X-Y-Koordinatenbeispiel in Aktion sehen.

Wenn Sie auf das Bild klicken, um das Formular zu übermitteln, sehen Sie die Daten als Parameter an die URL angehängt, zum Beispiel ?x=52&y=55. Wenn die Bildeingabe ein name-Attribut hat, dann wird der angegebene Name jedem Attribut vorangestellt, sodass die zurückgegebenen Koordinaten, wenn der name position ist, in der URL als ?position.x=52&position.y=55 formatiert wären. 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 Absendung ohne einen Klick auf das Bild erfolgt. Diese können verwendet werden, wenn die Position, auf die das Bild geklickt wurde, signifikant ist. Beispielsweise könnten Sie eine Karte haben, die bei einem Klick die angeklickten Koordinaten an den Server sendet. Der Servercode ermittelt dann, welcher Ort angeklickt wurde und gibt Informationen über nahegelegene Orte zurück.

In unserem obigen Beispiel könnten wir Server-Code schreiben, der ermittelt, welche Farbe durch die übermittelten Koordinaten angeklickt wurde, und eine Statistik über die Lieblingsfarben erstellen, für die die Leute abgestimmt haben.

Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des Rahmens des <input>-Elements anzupassen, und die object-fit-Eigenschaft, um zu kontrollieren, 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 mithilfe der width- und height-Attribute festzulegen, um im Layout Platz zu schaffen und dann zu bestimmen, wo innerhalb dieses Raumes das Bild positioniert ist und wie (oder ob) es skaliert wird, um diesen Raum zu füllen.

Das folgende Beispiel zeigt denselben Button wie zuvor, jedoch im Kontext eines typischen Login-Formulars eingebunden.

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 zu gestalten:

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 bereitzustellen und dann die tatsächliche Bildgröße und -positionierung mithilfe von 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 eingestellt ist, was angibt, dass das Bild in der größten Größe gezeichnet werden soll, die innerhalb des Rahmens passt, ohne das Seitenverhältnis zu verändern. Beachten Sie, dass der sichtbare graue Hintergrund des Elements in dem Bereich, der nicht vom Bild abgedeckt wird, weiterhin sichtbar ist.

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