<input type="image">

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

Zusätzlich zu den Attributen, die alle <input> Elemente gemeinsam haben, unterstützen image Schaltflächen-Eingaben die folgenden Attribute.

Das alt Attribut bietet eine alternative Zeichenkette als Bezeichnung der Schaltfläche, falls das Bild nicht angezeigt werden kann (aufgrund eines Fehlers, eines Benutzeragenten, der keine Bilder anzeigen kann oder so konfiguriert ist, dass er sie nicht anzeigt, oder bei Verwendung eines Bildschirmlesegeräts durch den Benutzer). Wenn angegeben, muss es sich um eine nicht-leere Zeichenkette handeln, die als Bezeichnung für die Schaltfläche geeignet ist.

Zum Beispiel, wenn Sie eine grafische Schaltfläche mit einem Bild haben, das ein Symbol und/oder Bildtext "Login Now" zeigt, sollten Sie auch das alt Attribut auf etwas wie Login Now setzen.

Funktional arbeitet 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 <form> Elements, das das <input> besitzt.

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

Ein String, der die Kodierungsmethode zur Übermittlung der Formulardaten an den Server identifiziert. Es gibt drei erlaubte Werte:

application/x-www-form-urlencoded

Dies, der Standardwert, sendet die Formulardaten als Zeichenfolge nach Prozent-Kodierung des Textes mithilfe eines Algorithmus wie encodeURI().

multipart/form-data

Verwendet die FormData API zur Verwaltung der Daten, sodass Dateien an den Server gesendet werden können. Sie müssen diesen Kodierungstyp verwenden, wenn Ihr Formular irgendwelche <input> Elemente vom Typ file enthält (<input type="file">).

text/plain

Klartext; hauptsächlich nützlich zum Debuggen, damit Sie die zu übermittelnden Daten leicht sehen können.

Falls angegeben, überschreibt der Wert des formenctype Attributs das enctype Attribut des Besitzformulars.

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

Ein String, der die HTTP-Methode angibt, die zur Übermittlung der Formulardaten verwendet werden soll; dieser Wert überschreibt jedes method Attribut, das beim Besitzformular angegeben ist. Erlaubte Werte sind:

get

Eine URL wird erstellt, indem mit der URL begonnen wird, die im formaction oder action Attribut angegeben ist, ein Fragezeichen ("?") hinzugefügt und daran anschließend die Daten des Formulars angehängt werden, die entsprechend dem formenctype oder dem enctype Attribut des Formulars kodiert sind. Diese URL wird dann an den Server mit einer HTTP get Anfrage gesendet. Diese Methode eignet sich gut für einfache Formulare, die nur ASCII Zeichen enthalten und keine Nebeneffekte haben. Dies ist der Standardwert.

post

Die Daten des Formulars werden im Körper der Anfrage enthalten, die an die im formaction oder action Attribut angegebene URL gesendet wird, mithilfe einer HTTP post Anfrage. Diese Methode unterstützt komplexe Daten und Datei-Anhänge.

dialog

Diese Methode wird verwendet, um anzugeben, dass die Schaltfläche den Dialog schließt, dem die Eingabe zugeordnet ist, und die Formulardaten überhaupt nicht überträgt.

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

Ein Boolean Attribut, das, falls vorhanden, angibt, dass das Formular nicht validiert werden soll, bevor es an den Server gesendet wird. Dies überschreibt den Wert des novalidate Attributs des Besitzformulars.

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

Ein String, der einen Namen oder ein Schlüsselwort angibt, das anzeigt, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. Der String muss der Name eines Betrachtungszusammenhangs sein (d.h. ein Tab, Fenster oder <iframe>. Ein hier angegebener Wert überschreibt jedes Ziel, das im target Attribut des <form> angegeben ist, 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 Betrachtungszusammenhang, der das Formular enthält. Dies ersetzt das aktuelle Dokument durch die empfangenen Daten. Dies ist der Standardwert, der benutzt wird, wenn keiner angegeben ist.

_blank

Lädt die Antwort in einen neuen, unbenannten Betrachtungszusammenhang. Dies ist typischerweise ein neuer Tab im selben Fenster wie das aktuelle Dokument, kann jedoch je nach Konfiguration des Benutzeragenten abweichen.

_parent

Lädt die Antwort in den übergeordneten Betrachtungszusammenhang des aktuellen. Falls es keinen übergeordneten Zusammenhang gibt, verhält sich dies wie _self.

_top

Lädt die Antwort in den obersten Betrachtungszusammenhang; dies ist der Betrachtungszusammenhang, der der oberste Vorfahre des aktuellen ist. Falls der aktuelle Kontext bereits der oberste ist, verhält sich dies wie _self.

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

Eine Zahl, die die Höhe in CSS-Pixels angibt, in der das von dem src Attribut spezifizierte Bild gezeichnet werden soll.

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

Eine Zahl, die die Breite angibt, in der das Bild in CSS-Pixels gezeichnet werden soll.

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

Falls usemap angegeben ist, muss es der Name eines Bildzuordnungselements sein, <map>, das eine Bildkarte definiert, die mit dem Bild verwendet wird. 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 erzeugt oder direkt verwaltet wird) und verhält sich ähnlich wie ein reguläres <img> Element, jedoch mit den Möglichkeiten einer Absende-Schaltfläche.

Sehen wir uns ein einfaches Beispiel an, das alle wesentlichen Funktionen umfasst, die Sie benötigen könnten (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 zu dem Bild anzugeben, das in der Schaltfläche angezeigt werden soll.
• Das alt Attribut bietet Alternativtext für das Bild, sodass Bildschirmleser-Benutzer eine bessere Vorstellung davon bekommen, wofür die Schaltfläche 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 dem Label entspricht, das Sie verwenden würden, wenn Sie eine Standard-Absende-Schaltfläche verwenden.
• Die width und height Attribute werden verwendet, um die Breite und Höhe anzugeben, in der das Bild angezeigt werden soll, in Pixels. Die Schaltfläche ist so groß wie das Bild; wenn Sie den Trefferbereich der Schaltfläche größer als das Bild benötigen, müssen Sie CSS verwenden (z.B. padding). Außerdem, 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 — ähnlich wie reguläre Absende-Schaltflächen — können eine Reihe von Attributen akzeptieren, die das Standardverhalten des Formulars überschreiben:

formaction

Die URI eines Programms, das die durch das 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. Mögliche Werte sind:

• application/x-www-form-urlencoded: Der Standardwert, wenn das Attribut nicht spezifiziert wurde.
• text/plain.

Falls dieses Attribut spezifiziert ist, überschreibt es das enctype Attribut des Formularbesitzers des Elements.

formmethod

Gibt die HTTP-Methode an, die der Browser zum Senden des Formulars verwendet. Mögliche Werte sind:

• post: Die Daten aus dem Formular werden im Körper des Formulars enthalten und an den Server gesendet.
• get: Die Daten werden der form Attribut-URI angefügt, 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.

Falls spezifiziert, überschreibt dieses Attribut das method Attribut des Formularbesitzers des Elements.

formnovalidate

Ein Boolean Attribut, das angibt, dass das Formular bei der Übermittlung nicht validiert werden soll. Falls dieses Attribut angegeben ist, überschreibt es das novalidate Attribut des Formularbesitzers des Elements.

formtarget

Ein Name oder Schlüsselwort, das angibt, wo die empfangene Antwort nach dem Absenden des Formulars angezeigt werden soll. Dies ist der Name eines oder ein Schlüsselwort für einen Betrachtungszusammenhang (z.B. Tab, Fenster oder Inline-Frame). Falls dieses Attribut angegeben ist, überschreibt es das target Attribut des Formularbesitzers des Elements. Die folgenden Schlüsselwörter haben spezielle Bedeutungen:

• _self: Laden Sie die Antwort in denselben Betrachtungszusammenhang, wie den aktuellen. Dieser Wert ist der Standardwert, wenn das Attribut nicht spezifiziert wurde.
• _blank: Laden Sie die Antwort in einen neuen unbenannten Betrachtungszusammenhang.
• _parent: Laden Sie die Antwort in den übergeordneten Betrachtungszusammenhang des aktuellen. Falls es keinen Eltern gibt, verhält sich diese Option wie _self.
• _top: Laden Sie die Antwort in den obersten Betrachtungszusammenhang (d.h. der Betrachtungszusammenhang, der ein Vorfahre des aktuellen ist und keinen Eltern hat). Falls es keinen Eltern gibt, verhält sich diese Option wie _self.

Wenn Sie ein Formular mit einer Schaltfläche erstellt mit <input type="image"> übermitteln, werden automatisch vom Browser zwei zusätzliche Datenpunkte an den Server gesendet — x und y. Sie können dies in Aktion in unserem X Y Koordinaten Beispiel sehen.

Wenn Sie auf das Bild klicken, um das Formular abzusenden, sehen Sie die Daten angehängt an die URL als Parameter, zum Beispiel ?x=52&y=55. Wenn die Bild-Eingabe ein name Attribut hat, beachten Sie, dass der angegebene Name jedem Attribut vorangestellt ist, sodass das zurückgegebene Koordinaten, falls der name position ist, in der URL formatiert wäre als ?position.x=52&position.y=55. Natürlich gilt dies 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 linke obere 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, z.B. wenn Sie eine Karte haben, die beim Klicken die Koordinaten zum Server sendet. Der serverseitige Code ermittelt dann, auf welchen Ort geklickt wurde, und gibt Informationen über nahegelegene Orte zurück.

In unserem obigen Beispiel könnten wir serverseitigen Code schreiben, der ermittelt, auf welche Farbe durch die übermittelten Koordinaten geklickt wurde, und eine Aufzählung der Lieblingsfarben führt, für die die Leute abgestimmt 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. Dies ermöglicht es Ihnen, einen Rahmen für das Bild mithilfe der width und height Attribute festzulegen, um im Layout Platz freizugeben, und dann festzulegen, wo sich das Bild innerhalb dieses Platzes befindet und wie (oder ob) es skaliert wird, um diesen Platz zu belegen.

Das folgende Beispiel zeigt dieselbe Schaltfläche wie zuvor, 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 nun etwas CSS, um die Basiselemente ordentlicher darzustellen:

div {
  margin-bottom: 10px;
}

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

In diesem Beispiel passen wir das vorhergehende 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 zu justieren.

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 anzeigt, dass das Bild in der größten Größe gezeichnet werden sollte, die in den Elementrahmen passt, ohne das Seitenverhältnis zu verä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ößenänderung des Bildes innerhalb des <input> Elementrahmens: object-position und object-fit
• Kompatibilität der CSS-Eigenschaften