<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 allen <input>-Elementen gemeinsam sind, unterstützen Eingabeschaltflächen des Typs image 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 so konfiguriert ist, dass keine Bilder angezeigt werden, oder falls der Benutzer ein Bildschirmlesegerät verwendet). Wenn vorhanden, muss es ein nicht leerer Text 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 Text "Jetzt anmelden" zeigt, sollten Sie auch das alt-Attribut auf etwas wie Jetzt anmelden 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 übermittelt werden sollen. Dies hat Vorrang vor dem action-Attribut des <form>-Elements, dem das <input> gehört.

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

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

application/x-www-form-urlencoded

Dies ist der Standardwert und sendet die Formulardaten als String, nachdem der Text mittels eines Algorithmus wie encodeURI() prozentkodiert wurde.

multipart/form-data

Verwendet die FormData-API zur Verwaltung der Daten und ermöglicht das Übermitteln von Dateien an den Server. Sie müssen diesen Kodierungstyp verwenden, wenn Ihr Formular <input>-Elemente vom Typ file [<input type="file">] enthält.

text/plain

Klartext; hauptsächlich nur zur Fehlerbehebung nützlich, um die Daten leicht sichtbar zu machen, die übermittelt werden sollen.

Falls angegeben, überschreibt der Wert des formenctype-Attributs das action-Attribut des Eigentümerformulars.

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

Ein String, der die HTTP-Methode angibt, die bei der Übermittlung der Formulardaten verwendet werden soll; dieser Wert überschreibt jedes method-Attribut, das im eigenen Formular angegeben ist. Zulässige Werte sind:

get

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

post

Die Formulardaten werden in den Hauptteil der Anfrage aufgenommen, die an die durch formaction oder action angegebene URL gesendet wird, unter Verwendung einer HTTP-post-Anfrage. Diese Methode unterstützt komplexe Daten und Dateianhänge.

dialog

Diese Methode zeigt an, dass die Schaltfläche den Dialog schließt, dem das Eingabeelement zugeordnet ist, und übermittelt die Formulardaten überhaupt nicht.

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

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass das Formular vor der Übermittlung an den Server nicht validiert werden soll. Dies überschreibt den Wert des novalidate-Attributs des Eigentümerformulars.

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

Ein String, der einen Namen oder ein Schlüsselwort angibt, das angibt, wo die Antwort angezeigt werden soll, die nach der Übermittlung des Formulars empfangen wird. 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 <form>-Elements angegeben ist, dem diese Eingabe gehört.

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, 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 Benutzeragenten unterschiedlich sein.

_parent

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

_top

Lädt die Antwort in den auf oberster Ebene befindlichen 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 wie _self.

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

Eine Zahl, die die Höhe der zu zeichnenden Abbildung in CSS-Pixeln angibt, wie sie durch das src-Attribut spezifiziert ist.

Ein String, der die URL der Bilddatei angibt, die zur Darstellung der grafischen Absenden-Schaltfläche angezeigt werden soll. Wenn der Benutzer mit dem Bild interagiert, wird die Eingabe wie jede andere Tasteingabe 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-Eingaben definiert, wurde aber nicht von allen Browsern implementiert und ist seitdem veraltet.

Wenn usemap angegeben ist, muss es der Name eines Bildkartenelements, <map>, sein, das eine zu verwendende Bildkarte mit dem Bild definiert. Diese Verwendung ist obsolet; 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 durch die CSS-Schicht erzeugt oder direkt verwaltet wird), das sich auf die gleiche Weise wie ein reguläres <img>-Element verhält, jedoch mit den Möglichkeiten einer Absenden-Schaltfläche.

Werfen wir einen Blick auf ein einfaches Beispiel, das alle wesentlichen Merkmale enthält, die Sie verwenden müssten (Diese funktionieren genauso wie auf dem <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 in der Schaltfläche angezeigt werden soll.
• Das alt-Attribut bietet Alternativtext für das Bild, damit Bildschirmlesegerätebenutzer eine bessere Vorstellung davon bekommen können, 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 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. Die Schaltfläche hat die gleiche Größe wie das Bild; wenn Sie möchten, dass der Trefferbereich der Schaltfläche größer als das Bild ist, müssen Sie CSS verwenden (z. B. padding). Auch wenn Sie nur eine Dimension festlegen, 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

Der URI eines Programms, das die Informationen verarbeitet, die von dem Eingabeelement übermittelt werden; überschreibt das action-Attribut des Formulareigners.

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.

Falls dieses Attribut angegeben ist, überschreibt es das enctype-Attribut des Formulareigners.

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 Hauptteil des Formulars aufgenommen und an den Server gesendet.
• get: Die Daten aus dem Formular werden an die form-Attribut-URI angehängt, wobei ein '?' als Trennzeichen verwendet wird, 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.

Falls angegeben, überschreibt dieses Attribut das method-Attribut des Formulareigners.

formnovalidate

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

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die Antwort angezeigt werden soll, die nach der Übermittlung des Formulars empfangen wird. Dies ist ein Name oder Schlüsselwort für einen Browsing-Kontext (zum Beispiel ein Tab, Fenster oder Inline-Frame). Falls dieses Attribut angegeben ist, überschreibt es das target-Attribut des Formulareigners. Die folgenden Schlüsselwörter haben spezielle 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 kein übergeordneter vorhanden ist, verhält sich diese Option wie _self.
• _top: Lädt die Antwort in den auf oberster Ebene befindlichen Browsing-Kontext (d. h. den Browsing-Kontext, der ein Vorfahre des aktuellen ist und keinen Elternteil hat). Wenn kein Elternteil vorhanden ist, verhält sich diese Option wie _self.

Wenn Sie ein Formular mit einer Schaltfläche, die mit <input type="image"> erstellt wurde, übermitteln, werden automatisch zwei zusätzliche Datenpunkte von dem Browser an den Server gesendet - x und y. Sie können dies in unserem Beispiel für die X Y-Koordinaten in Aktion 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 die Bildeingabe ein name-Attribut hat, beachten Sie, dass der angegebene Name jedem Attribut vorangestellt wird, sodass, wenn der name position ist, die zurückgegebenen Koordinaten im URL-Format als ?position.x=52&position.y=55 formatiert würden. 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 senden, 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 des Bildes, auf das geklickt wurde, signifikant ist, zum Beispiel könnten Sie eine Karte haben, die beim Klicken die angeklickten Koordinaten an den Server sendet. Der serverseitige Code ermittelt dann, welcher Ort angeklickt wurde, und liefert Informationen über nahegelegene Orte zurück.

In unserem obigen Beispiel könnten wir serverseitigen Code schreiben, der ermittelt, welche Farbe anhand der übermittelten Koordinaten angeklickt wurde, und eine Zählung der bevorzugten Farben der Menschen führt, die Menschen gewählt haben.

Sie können die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des Rahmens des <input>-Elements zu adjustieren, 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 unter Verwendung der width- und height-Attribute festzulegen, um Platz im Layout einzuräumen, und dann anzupassen, wo innerhalb dieses Raums das Bild positioniert ist und wie (oder ob) es skaliert wird, um diesen Raum zu belegen.

Das folgende Beispiel zeigt dieselbe Schaltfläche wie zuvor, aber 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 nun etwas einfaches CSS, um die Grundelemente ordentlicher zu platzieren:

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 wird 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, die innerhalb des Rahmens des Elements passt, gezeichnet wird, ohne das Seitenverhältnis zu ändern. Beachten Sie den sichtbaren grauen Hintergrund des Elements, der im Bereich sichtbar ist, der nicht vom Bild abgedeckt wird.

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