<input type="image"> HTML-Attributwert

Probieren Sie es aus

<p>Sign in to your account:</p>

<div>
  <label for="userId">User ID</label>
  <input type="text" id="userId" name="userId" />
</div>

<input
  type="image"
  id="image"
  alt="Login"
  src="/shared-assets/images/examples/login-button.png" />

label {
  font-size: 0.8rem;
}

label,
input[type="image"] {
  margin-top: 1rem;
}

input[type="image"] {
  width: 80px;
}

Wert

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

Zustzliche Attribute

Zustzlich zu den Attributen, die von allen <input>-Elementen geteilt werden, untersttzen image-Button-Eingaben die folgenden Attribute.

alt

Das alt-Attribut liefert eine alternative Zeichenkette, die als Bezeichnung fr den Button verwendet wird, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, eines User-Agents, der keine Bilder anzeigen kann oder konfiguriert ist, diese nicht anzuzeigen, oder wenn der Benutzer ein Bildschirmlesegert verwendet). Wenn vorhanden, muss es eine nicht-leere Zeichenkette sein, die als Beschriftung fr den Button geeignet ist.

Beispielsweise, wenn Sie einen grafischen Button haben, der ein Bild mit einem Icon und/oder dem Text "Login Now" zeigt, sollten Sie auch das alt-Attribut auf etwas wie Login Now setzen.

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

formaction

Ein String, der die URL angibt, an die die Daten gesendet werden sollen. Dies hat Vorrang vor dem action Attribut auf dem <form>-Element, das der Besitzer des <input> ist.

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

formenctype

Ein String, der die Kodierungsmethode identifiziert, die beim Senden der Formulardaten an den Server verwendet werden soll. Es gibt drei zulssige Werte:

application/x-www-form-urlencoded

Dies, der Standardwert, sendet die Formulardaten als Zeichenkette nach dem Percent-Encoding des Textes mithilfe eines Algorithmus wie encodeURI().

multipart/form-data

Verwendet die FormData API zur Verwaltung der Daten, was es ermglicht, Dateien an den Server zu senden. Sie mssen diesen Kodierungstyp verwenden, wenn Ihr Formular ein <input>-Element vom type file enthlt (<input type="file">).

text/plain

Nur als Klartext ntzlich fr Debugging-Zwecke, sodass Sie die Daten, die gesendet werden sollen, leicht sehen knnen.

Wenn angegeben, berschreibt der Wert des formenctype-Attributs das enctype Attribut des Formulars, das das Element besitzt.

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

formmethod

Ein String, der die HTTP-Methode angibt, die beim Senden der Formulardaten verwendet werden soll; dieser Wert berschreibt jedes method Attribut des Formulars, das das Element besitzt. Zulssige Werte sind:

get

Eine URL wird aufgebaut, indem mit der URL begonnen wird, die durch das formaction- oder action Attribut angegeben ist, gefolgt von einem Fragezeichen ("?") und dann den Formulardaten, codiert wie beschrieben durch formenctype oder das enctype Attribut des Formulars. Diese URL wird dann an den Server gesendet, indem eine HTTP-get-Anfrage verwendet wird. Diese Methode funktioniert gut fr Formulare, die nur ASCII-Zeichen enthalten und keine Nebeneffekte haben. Dies ist der Standardwert.

post

Die Daten des Formulars werden im Hauptteil der Anforderung enthalten, die an die durch das formaction- oder action Attribut angegebene URL gesendet wird, indem eine HTTP-post-Anfrage verwendet wird. Diese Methode untersttzt komplexe Daten und Dateianhnge.

dialog

Diese Methode wird verwendet, um anzuzeigen, dass der Button den Dialog schliet, mit dem die Eingabe verknpft ist, und die Formulardaten berhaupt nicht bertrgt.

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

formnovalidate

Ein Boolesches Attribut, das, falls vorhanden, angibt, dass das Formular vor dem Senden an den Server nicht validiert werden soll. Dies berschreibt den Wert des novalidate Attributs des Formulars, das das Element besitzt.

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

formtarget

Ein String, der einen Namen oder ein Schlsselwort angibt, das angibt, wo die Antwort angezeigt werden soll, die nach dem Senden des Formulars empfangen wird. Der String muss der Name eines Browsing Context sein (das ist, ein Tab, ein Fenster oder <iframe>. Ein hier angegebener Wert berschreibt jedes Ziel, das durch das target Attribut des <form> angegeben ist, das diese Eingabe besitzt.

Zustzlich zu den tatschlichen Namen von Tabs, Fenstern oder Inline-Frames gibt es einige spezielle Schlsselwrter, die verwendet werden knnen:

_self

Ldt die Antwort in denselben Browsing Context wie der, der das Formular enthlt. Dies ersetzt das aktuelle Dokument durch die empfangenen Daten. Dies ist der Standardwert, der verwendet wird, wenn keiner angegeben wird.

_blank

Ldt die Antwort in einen neuen, unbenannten Browsing Context. Dies ist typischerweise ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann jedoch je nach Konfiguration des User-Agents unterschiedlich sein.

_parent

Ldt die Antwort in den bergeordneten Browsing Context des aktuellen. Wenn es keinen bergeordneten Context gibt, verhlt sich dies wie _self.

_top

Ldt die Antwort in den obersten Browsing Context; dies ist der Browsing Context, der der oberste Vorfahre des aktuellen Contexts ist. Wenn der aktuelle Context der oberste ist, verhlt sich dies wie _self.

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

height

Eine Nummer, die die Hhe in CSS-Pixeln angibt, in der das durch das src-Attribut angegebene Bild gezeichnet werden soll.

src

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

width

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

Veraltete Attribute

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

usemap

Wenn usemap angegeben ist, muss es der Name eines Bildkartenelements sein, <map>, das eine Bildkarte definiert, die mit dem Bild verwendet werden soll. Diese Verwendung ist obsolet; Sie sollten zum Einsatz des <img>-Elements wechseln, wenn Sie Bildkarten verwenden mchten.

Verwendung von Image-Inputs

Das <input type="image">-Element ist ein ersetzenes Element (ein Element, dessen Inhalt nicht von der CSS-Schicht generiert oder direkt verwaltet wird), das sich hnlich verhlt wie ein bliches <img>-Element, aber mit den Fhigkeiten eines Senden-Buttons.

Wesentliche Funktionen von Bild-Inputs

Lassen Sie uns ein einfaches Beispiel betrachten, das alle wesentlichen Funktionen enthlt, die Sie verwenden mssten (Diese funktionieren genau so wie auf dem <img>-Element.):

<input
  id="image"
  type="image"
  width="100"
  height="30"
  alt="Login"
  src="https://mdn.github.io/shared-assets/images/examples/login-button.png" />

• Das src-Attribut wird verwendet, um den Pfad zu dem Bild anzugeben, das im Button angezeigt werden soll.
• Das alt-Attribut liefert Alternativtext fr das Bild, sodass Bildschirmleser-Nutzer eine bessere Vorstellung davon bekommen knnen, wofr 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). Falls mglich, verwenden Sie Text, der mit der Beschriftung bereinstimmt, die Sie verwenden wrden, wenn Sie einen Standard-Senden-Button verwenden wrden.
• Die width- und height-Attribute werden verwendet, um die Breite und Hhe anzugeben, die das Bild in Pixeln angezeigt werden soll. Der Button ist so gro wie das Bild; wenn Sie die Trefferflche des Buttons grer als das Bild machen mssen, mssen Sie CSS verwenden (z.B. padding). Auerdem, wenn Sie nur eine Dimension angeben, wird die andere automatisch angepasst, sodass das Bild sein ursprngliches Seitenverhltnis beibehlt.

Standardformulareigenschaften berschreiben

<input type="image">-Elemente wie regulre Senden-Buttons knnen eine Reihe von Attributen akzeptieren, die die Standardeigenschaften von Formularen berschreiben:

formaction

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

formenctype

Gibt den Inhaltstyp an, der verwendet wird, um das Formular an den Server zu senden. Mgliche 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 des Elements.

formmethod

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

• post: Die Daten des Formulars werden im Hauptteil des Formulars enthalten und an den Server gesendet.
• get: Die Daten des Formulars werden der form-Attribut-URI hinzugefgt, 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 enthlt.

Wenn angegeben, berschreibt dieses Attribut das method-Attribut des Formularbesitzers des Elements.

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 Formularbesitzers des Elements.

formtarget

Ein Name oder Schlsselwort, das angibt, wo die Antwort angezeigt werden soll, die nach dem Senden des Formulars empfangen wird. Dies ist ein Name oder ein Schlsselwort fr einen Browsing Context (zum Beispiel Tab, Fenster oder Inline-Frame). Wenn dieses Attribut angegeben ist, berschreibt es das target-Attribut des Formularbesitzers des Elements. Die folgenden Schlsselwrter haben spezielle Bedeutungen:

• _self: Laden Sie die Antwort in denselben Browsing Context wie den aktuellen. Dieser Wert ist der Standard, wenn das Attribut nicht angegeben ist.
• _blank: Laden Sie die Antwort in einen neuen unbenannten Browsing Context.
• _parent: Laden Sie die Antwort in den bergeordneten Browsing Context des aktuellen. Wenn es keinen bergeordneten gibt, verhlt sich diese Option wie _self.
• _top: Laden Sie die Antwort in den obersten Browsing Context (das heit, der Browsing Context, der ein Vorfahr des aktuellen ist und keinen Elternteil hat). Wenn es keinen Elternteil gibt, verhlt sich diese Option wie _self.

Verwendung der x- und y-Datenpunkte

Wenn Sie ein Formular mithilfe eines Buttons einreichen, der mit <input type="image"> erstellt wurde, werden dem Server automatisch zwei zustzliche Datenpunkte vom Browser bermittelt x und y. Sie knnen dies in unserem X Y-Koordinaten-Beispiel in Aktion sehen.

Wenn Sie auf das Bild klicken, um das Formular zu senden, sehen Sie, dass die Daten als Parameter an die URL angehngt werden, wie ?x=52&y=55. Wenn die Image-Eingabe ein name-Attribut hat, dann wird der angegebene Name jedem Koordinateneintrag mit einem Punkttrennzeichen vorangestellt. Wenn der name zum Beispiel position wre, wrden die zurckgegebenen Koordinaten in der URL als ?position.x=52&position.y=55 formatiert sein.

Dies sind die X- und Y-Koordinaten des Bildes, die von der Maus angeklickt wurden, um das Formular zu bermitteln, wobei (0,0) die obere linke Ecke des Bildes ist und dies die Standardeinstellung ist, falls die Einreichung ohne einen Klick auf das Bild erfolgt. Diese knnen verwendet werden, wenn die Position, die das Bild angeklickt wurde, von Bedeutung ist. Wenn Sie zum Beispiel eine Karte haben, die bei einem Klick die angeklickten Koordinaten an den Server sendet. Der serverseitige Code ermittelt dann, welche Position angeklickt wurde und gibt Informationen ber nahegelegene Orte zurck.

In unserem obigen Beispiel knnten wir serverseitigen Code schreiben, der ermittelt, welche Farbe anhand der bermittelten Koordinaten angeklickt wurde, und eine Aufzeichnung der bevorzugten Farben fhrt, fr die die Leute gestimmt haben.

Anpassung der Position und des Skalierungsalgorithmus des Bildes

Sie knnen die object-position-Eigenschaft verwenden, um die Positionierung des Bildes innerhalb des Rahmens des <input>-Elements anzupassen, und die object-fit-Eigenschaft, um zu steuern, wie die Gre des Bildes angepasst wird, um innerhalb des Rahmens zu passen. Dadurch knnen Sie einen Rahmen fr das Bild mit den width- und height-Attributen festlegen, um Platz im Layout zu reservieren, und dann festlegen, wo innerhalb dieses Raums das Bild platziert wird und wie (oder ob) es skaliert wird, um diesen Raum zu fllen.

Beispiele

Ein Anmeldeformular

Das folgende Beispiel zeigt denselben Button 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://mdn.github.io/shared-assets/images/examples/login-button.png"
      alt="Login"
      width="100" />
  </div>
</form>

CSS

Und nun etwas CSS, um die grundlegenden Elemente ordentlicher zu platzieren:

div {
  margin-bottom: 10px;
}

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

Ergebnis

Anpassung der Bildposition und Skalierung

In diesem Beispiel passen wir das vorherige Beispiel an, um mehr Platz fr das Bild zu reservieren und dann die tatschliche Bildgre 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://mdn.github.io/shared-assets/images/examples/login-button.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: #dddddd;
}

Ergebnis

Hier ist object-position konfiguriert, um das Bild in der oberen rechten Ecke des Elements zu zeichnen, whrend object-fit auf contain eingestellt ist, was anzeigt, dass das Bild in der grten Gre gezeichnet werden soll, die in den Rahmen des Elements passt, ohne das Seitenverhltnis zu ndern. Beachten Sie den sichtbaren grauen Hintergrund des Elements, der noch in dem Bereich sichtbar ist, der nicht vom Bild bedeckt ist.

Technische bersicht

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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