<input type="image">

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

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

Das alt-Attribut bietet einen alternativen Text, der als Button-Beschriftung verwendet 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 keine Bilder zeigt, oder wenn der Benutzer ein Bildschirmlesegerät benutzt). Wenn angegeben, muss es sich um einen nicht leeren String handeln, der als Beschriftung für den Button geeignet ist.

Beispielsweise sollten Sie, wenn Sie einen grafischen Button mit einem Icon oder Bildtext "Jetzt anmelden" haben, auch das alt-Attribut auf etwas wie Jetzt anmelden setzen.

Funktional funktioniert das alt-Attribut des <input type="image">-Elements genauso 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 die <input> besitzenden Formulars.

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 unter Verwendung eines Algorithmus wie encodeURI() prozent-codiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten und ermöglicht das Senden von Dateien an den Server. Sie müssen diesen Kodierungstyp verwenden, wenn Ihre Formularelemente vom type file (<input type="file">) enthalten.

text/plain

Klartext; hauptsächlich nur für das Debugging nützlich, damit Sie die zu übermittelnden Daten leicht sehen können.

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 das method-Attribut des besitzenden Formulars. Zulässige Werte sind:

get

Eine URL wird erstellt, indem mit der URL begonnen wird, die vom formaction- oder action-Attribut angegeben ist, ein Fragezeichen ("?")-Zeichen angehängt und dann die Formulardaten, codiert wie durch formenctype oder das enctype-Attribut des Formulars beschrieben, angehängt werden. Diese URL wird dann unter Verwendung einer 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 sind im Körper der Anforderung enthalten, die an die vom formaction- oder action-Attribut angegebene URL gesendet wird, unter Verwendung einer HTTP-post-Anfrage. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

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

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

Ein boolesches Attribut, das, wenn vorhanden, angibt, dass das Formular vor dem Senden an den Server nicht validiert werden soll. Dies überschreibt das novalidate-Attribut 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, welches anzeigt, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wurde. 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 das Eingabeelement besitzenden <form>-Elements angegeben ist.

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 den gleichen Browsing-Kontext wie den, der das Formular enthält. Dies ersetzt das aktuelle Dokument mit den 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 normalerweise ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann jedoch je nach Konfiguration des User-Agents 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; das ist der Browsing-Kontext, der der oberste Vorfahr des aktuellen Kontexts ist. Wenn der aktuelle Kontext der oberste Kontext ist, verhält sich dies genauso 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 anzzeigenden Bilddatei angibt, um den grafischen Absende-Button darzustellen. Wenn der Benutzer mit dem Bild interagiert, wird die Eingabe wie bei jedem anderen Button-Input behandelt.

Eine Zahl, die die Breite angibt, in der das Bild in CSS-Pixeln 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 Image-Map-Elements, <map>, sein, das eine Bildkarte definiert, die mit dem Bild verwendet werden soll. Diese Verwendung ist obsolet; 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 von der CSS-Schicht generiert oder direkt verwaltet wird) und verhält sich ähnlich wie ein reguläres <img>-Element, aber mit den Fähigkeiten eines Absende-Buttons.

Betrachten wir ein einfaches Beispiel, das alle wesentlichen Funktionen enthält, die Sie verwenden müssten (diese funktionieren genauso 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 zum Bild anzugeben, das im Button angezeigt werden soll.
• Das alt-Attribut bietet alternativen Text für das Bild, damit Bildschirmlesegeräte einen besseren Eindruck 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 Text, der mit dem Label ü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 die Schlagfläche des Buttons größer als das Bild benötigen, 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 Absende-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 Formularbesitzers.

formenctype

Gibt den Inhaltstyp 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 Formularbesitzers.

formmethod

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

• post: Die Daten des Formulars sind im Körper 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 Trennzeichen, 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 angegeben, überschreibt dieses Attribut das method-Attribut des Formularbesitzers.

formnovalidate

Ein boolesches Attribut, das angibt, dass das Formular nicht validiert werden soll, wenn es übermittelt wird. Wenn dieses Attribut angegeben ist, überschreibt es das novalidate-Attribut des Formularbesitzers.

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die nach dem Absenden des Formulars empfangene Antwort angezeigt werden soll. 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 Formularbesitzers. Die folgenden Schlüsselwörter haben eine besondere Bedeutung:

• _self: Laden Sie die Antwort in denselben Browsing-Kontext wie den aktuellen. Wenn das Attribut nicht angegeben ist, ist dies der Standardwert.
• _blank: Laden Sie die Antwort in einen neuen unbenannten Browsing-Kontext.
• _parent: Laden Sie die Antwort in den übergeordneten Browsing-Kontext des aktuellen. Wenn es keinen übergeordneten Kontext gibt, verhält sich diese Option genauso wie _self.
• _top: Laden Sie die Antwort in den obersten Browsing-Kontext (das heißt, der Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen übergeordneten hat). Wenn es keinen übergeordneten gibt, verhält sich diese Option genauso wie _self.

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

Wenn Sie auf das Bild klicken, um das Formular zu senden, sehen Sie die Daten als Parameter an die URL angehängt, zum Beispiel ?x=52&y=55. Wenn das Bild-Input ein name-Attribut hat, beachten Sie, dass der angegebene Name jedem Attribut vorangestellt wird; wenn der name position ist, wären die zurückgegebenen Koordinaten in der URL als ?position.x=52&position.y=55 formatiert. 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 zu übermitteln, 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 der Punkt, auf den das Bild geklickt wurde, von Bedeutung ist; beispielsweise könnten Sie eine Karte haben, die beim Klicken die 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 serverseitige Programmierung schreiben, die ermittelt, welche Farbe durch die übermittelten Koordinaten angeklickt wurde, und eine Zählung über die bevorzugten Farben führen, für die 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 Bildgröße angepasst wird, um in den Rahmen zu passen. Damit können Sie einen Rahmen für das Bild festlegen, indem Sie die width- und height-Attribute verwenden, um Platz im Layout zu reservieren, und dann anpassen, wo im zugewiesenen Platz das Bild platziert wird und wie (oder ob) es skaliert wird, um diesen Platz zu füllen.

Im folgenden Beispiel wird derselbe Button wie zuvor gezeigt, 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 jetzt etwas CSS, um die grundlegenden Elemente ordentlicher anzuordnen:

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 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 eingestellt ist, was bedeutet, dass das Bild in der größten Größe gezeichnet werden soll, die innerhalb des Elementrahmens passt, ohne sein Seitenverhältnis zu ändern. Beachten Sie den sichtbaren grauen Hintergrund des Elements, der noch im Bereich sichtbar ist, der nicht vom Bild bedeckt ist.

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