<input type="image">

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

Neben den Attributen, die alle <input>-Elemente teilen, unterstützen image-Button-Eingaben die folgenden Attribute.

Das alt-Attribut liefert eine alternative Zeichenkette als Label für den Button, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, einem Benutzeragent, der keine Bilder anzeigen kann oder so konfiguriert ist, dass er sie nicht zeigt, oder wenn der Benutzer ein Bildschirmlesegerät benutzt). Wenn angegeben, muss es eine nicht-leere Zeichenkette sein, die als Label für den Button geeignet ist.

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

Funktional funktioniert das alt-Attribut des <input type="image">-Elements genauso wie das alt-Attribut auf <img>-Elementen.

Eine Zeichenkette, die die URL angibt, an die die Daten gesendet werden sollen. Diese hat Vorrang vor dem action-Attribut des <form>-Elements, das das <input>-Element besitzt.

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

Eine Zeichenkette, die die Codierungsmethode 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 Zeichenkette nach Percent-Encoding des Textes mit einem Algorithmus wie encodeURI().

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten, was das Hochladen von Dateien auf den Server ermöglicht. Sie müssen diesen Codierungstyp verwenden, wenn Ihr Formular irgendwelche <input>-Elemente vom type file (<input type="file">) enthält.

text/plain

Nur-Text; hauptsächlich nützlich zum Debuggen, damit Sie die zu sendenden Daten leicht sehen können.

Wenn angegeben, überschreibt der Wert des formenctype-Attributs das action-Attribut des Formulars, dem das Element gehört.

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

Eine Zeichenkette, die die HTTP-Methode angibt, die beim Senden der Formulardaten verwendet werden soll; dieser Wert überschreibt jedes method-Attribut, das dem Besitz des Formulars gegeben wird. Zulässige Werte sind:

get

Eine URL wird konstruiert, indem mit der URL begonnen wird, die vom formaction- oder action-Attribut angegeben wird, ein Fragezeichen ("?") angefügt wird, und dann die Daten des Formulars angefügt werden, die durch formenctype oder das enctype-Attribut des Formulars beschrieben werden. Diese URL wird dann an den Server unter Verwendung einer HTTP get-Anfrage 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 sind im Hauptteil der Anfrage enthalten, die an die vom 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 auch auf <input type="submit"> und <button>-Elementen verfügbar.

Ein Boolesches Attribut, das angibt, dass das Formular vor dem Senden an den Server nicht validiert werden soll. Dies überschreibt den Wert des novalidate-Attributs des Besitzformulars des Elements.

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

Eine Zeichenkette, die einen Namen oder ein Schlüsselwort angibt, das angibt, wo die Antwort ausgegeben werden soll, die nach dem Senden des Formulars empfangen wird. Die Zeichenkette muss der Name eines Browsing-Kontexts sein (d.h. eines Tabs, Fensters oder <iframe>. Ein hier angegebener Wert überschreibt jedes Ziel, das vom target-Attribut im <form> des Besitzes dieses Inputs angegeben wird.

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 jedoch je nach Konfiguration des Benutzeragent variieren.

_parent

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

_top

Lädt die Antwort in den Browsing-Kontext auf höchster Ebene; dies ist der Browsing-Kontext, der der oberste Vorfahr des aktuellen Kontexts ist. Wenn der aktuelle Kontext der oberste Kontext ist, verhält es sich genauso wie _self.

Dieses Attribut ist auch 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 spezifizierte Bild gezeichnet werden soll.

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

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

Das folgende Attribut wurde von HTML 4 für image-Inputs definiert, war 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 obsolet; Sie sollten zu <img>-Elementen 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 erzeugt oder direkt verwaltet wird) und verhält sich ähnlich wie ein reguläres <img>-Element, jedoch mit den Fähigkeiten 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 sie es beim <img>-Element tun.):

<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 Alternativtext für das Bild, sodass Benutzer des Bildschirmlesers eine bessere Vorstellung davon erhalten, 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 zum Label passt, 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 zu spezifizieren, in der das Bild angezeigt werden soll, in Pixeln. Der Button hat dieselbe 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). Außerdem, wenn Sie nur eine Dimension angeben, wird die andere automatisch so angepasst, dass das Bild sein ursprüngliches Seitenverhältnis beibehält.

<input type="image">-Elemente – ähnlich wie reguläre Absende-Buttons – können eine Reihe von Attributen akzeptieren, die das Standardformular-Verhalten überschreiben:

formaction

Die URI eines Programms, das die Informationen verarbeitet, die vom Eingabeelement gesendet werden; überschreibt das action-Attribut des Formularelements, dem es gehört.

formenctype

Gibt den Datentyp 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 Formularelements, dem es gehört.

formmethod

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

• post: Die Formulardaten werden im Hauptteil des Formulars enthalten und an den Server gesendet.
• get: Die Formulardaten werden der 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 Formularelements, dem es gehört.

formnovalidate

Ein Boolesches 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 Formularelements, dem es gehört.

formtarget

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

• _self: Lädt die Antwort in denselben Browsing-Kontext wie den aktuellen. 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 keinen übergeordneten gibt, verhält sich diese Option genauso wie _self.
• _top: Lädt die Antwort in den obersten Browsing-Kontext (d.h. den Browsing-Kontext, der ein Vorfahr des aktuellen ist und keinen Elternkontext hat). Wenn es keinen Elternkontext gibt, verhält sich diese Option genauso wie _self.

Wenn Sie ein Formular mit einem über <input type="image"> erstellten Button absenden, werden zwei zusätzliche Datenpunkte automatisch vom Browser an den Server übergeben – x und y. Sie können dies in unserem X Y-Koordinatenbeispiel in Aktion sehen.

Wenn Sie auf das Bild klicken, um das Formular abzusenden, werden Sie sehen, dass die Daten als Parameter an die URL angehängt werden, zum Beispiel ?x=52&y=55. Wenn das Bildinput ein name-Attribut hat, dann wird der angegebene Name jedem Attribut vorangestellt, sodass wenn der name position ist, dann werden 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 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. Zum Beispiel könnten Sie eine Karte haben, die beim Anklicken die Koordinaten an den Server sendet, die angeklickt wurden. Der Servercode ermittelt dann, welcher Ort angeklickt wurde, und gibt Informationen über Orte in der Nähe zurück.

In unserem obigen Beispiel könnten wir Servercode schreiben, der ermittelt, welche Farbe durch die eingereichten Koordinaten angeklickt wurde, und eine Liste der Lieblingsfarben führt, für die die Leute gestimmt haben.

Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des <input>-Rahmens anzupassen, und die object-fit-Eigenschaft, um zu kontrollieren, 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 zu spezifizieren, um Platz im Layout bereitzustellen und dann zu bestimmen, wo innerhalb dieses Platzes sich das Bild befindet und wie (oder ob) es skaliert wird, um diesen Platz zu belegen.

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

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 bereitzustellen und dann die tatsächliche Bildgröße und -position 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 angibt, dass das Bild in der größten Größe gezeichnet werden soll, die in den Rahmen des Elements passt, ohne sein 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 HTMLInputElement-Schnittstelle, die es implementiert.
• Das HTML <img>-Element
• Positionierung und Größe des Bildes innerhalb des <input>-Rahmens: object-position und object-fit