Waarde
<input type="image">-elementen accepteren geen value-attributen. Het pad naar de weer te geven afbeelding wordt opgegeven in het src-attribuut.
Aanvullende attributen
Naast de attributen die door alle <input>-elementen worden gedeeld, ondersteunen image-knopinvoervelden de volgende attributen.
alt
Het alt-attribuut biedt een alternatieve tekenreeks om te gebruiken als label voor de knop als de afbeelding niet kan worden weergegeven (vanwege een fout, een user agent die geen afbeeldingen kan of mag tonen, of als de gebruiker een schermlezer gebruikt). Indien opgegeven, moet het een niet-lege tekenreeks zijn die geschikt is als label voor de knop.
Als je bijvoorbeeld een grafische knop hebt die een afbeelding toont met een pictogram en/of afbeeldingstekst "Login Now", moet je ook het alt-attribuut instellen op iets als Login Now.
Hoewel het alt-attribuut technisch gezien optioneel is, moet je er altijd één opnemen om de bruikbaarheid van je inhoud te maximaliseren.
Functioneel werkt het alt-attribuut van het <input type="image">-element op precies dezelfde manier als het alt-attribuut op <img>-elementen.
formaction
Een tekenreeks die de URL aangeeft waarnaar de gegevens moeten worden verzonden. Dit heeft voorrang op het action-attribuut van het <form>-element dat de eigenaar is van de <input>.
Dit attribuut is ook beschikbaar op <input type="submit">- en <button>-elementen.
formenctype
Een tekenreeks die de coderingsmethode aangeeft die moet worden gebruikt bij het verzenden van de formuliergegevens naar de server. Er zijn drie toegestane waarden:
application/x-www-form-urlencoded | Dit is de standaardwaarde en verzendt de formuliergegevens als een tekenreeks nadat de tekst percent-encoded is met behulp van een algoritme zoals encodeURI(). |
|---|---|
multipart/form-data | Gebruikt de FormData-API om de gegevens te beheren, waardoor bestanden naar de server kunnen worden verzonden. Je moet dit coderingstype gebruiken als je formulier <input>-elementen van type file bevat (<input type="file">). |
text/plain | Platte tekst; meestal alleen nuttig voor debuggen, zodat je gemakkelijk de gegevens kunt zien die verzonden gaan worden. |
Indien opgegeven, overschrijft de waarde van het formenctype-attribuut het enctype-attribuut van het eigenaarformulier.
Dit attribuut is ook beschikbaar op <input type="submit">- en <button>-elementen.
formmethod
Een tekenreeks die de HTTP-methode aangeeft die moet worden gebruikt bij het verzenden van de gegevens van het formulier; deze waarde overschrijft elk method-attribuut dat is opgegeven op het eigenaarformulier. Toegestane waarden zijn:
get | Er wordt een URL samengesteld door te beginnen met de URL die is opgegeven door het formaction- of action-attribuut, waaraan een vraagteken ("?") wordt toegevoegd, gevolgd door de gegevens van het formulier, gecodeerd zoals beschreven door formenctype of het enctype-attribuut van het formulier. Deze URL wordt vervolgens naar de server verzonden met behulp van een HTTP-get-verzoek. Deze methode werkt goed voor formulieren die alleen ASCII-tekens bevatten en geen neveneffecten hebben. Dit is de standaardwaarde. |
|---|---|
post | De gegevens van het formulier worden opgenomen in de body van het verzoek dat wordt verzonden naar de URL die is opgegeven door het formaction- of action-attribuut, met behulp van een HTTP-post-verzoek. Deze methode ondersteunt complexe gegevens en bestandsbijlagen. |
dialog | Deze methode wordt gebruikt om aan te geven dat de knop de dialog sluit waarmee de invoer is verbonden, en verzendt de formuliergegevens helemaal niet. |
Dit attribuut is ook beschikbaar op <input type="submit">- en <button>-elementen.
formnovalidate
Een Booleaans attribuut dat, indien aanwezig, aangeeft dat het formulier niet moet worden gevalideerd voordat het naar de server wordt verzonden. Dit overschrijft de waarde van het novalidate-attribuut van het eigenaarformulier van het element.
Dit attribuut is ook beschikbaar op <input type="submit">- en <button>-elementen.
formtarget
Een tekenreeks die een naam of sleutelwoord opgeeft dat aangeeft waar de respons moet worden weergegeven die na het verzenden van het formulier wordt ontvangen. De tekenreeks moet de naam zijn van een browsing context (dat wil zeggen, een tab, venster of <iframe>). Een hier opgegeven waarde overschrijft elk doel dat wordt gegeven door het target-attribuut van de <form> die eigenaar is van deze invoer.
Naast de daadwerkelijke namen van tabs, vensters of inline frames, zijn er een paar speciale sleutelwoorden die kunnen worden gebruikt:
_self | Laadt de respons in dezelfde browsing context als die welke het formulier bevat. Dit vervangt het huidige document door de ontvangen gegevens. Dit is de standaardwaarde die wordt gebruikt als er geen wordt opgegeven. |
|---|---|
_blank | Laadt de respons in een nieuwe, naamloze browsing context. Dit is doorgaans een nieuw tabblad in hetzelfde venster als het huidige document, maar kan verschillen afhankelijk van de configuratie van de user agent. |
_parent | Laadt de respons in de bovenliggende browsing context van de huidige. Als er geen bovenliggende context is, gedraagt dit zich hetzelfde als _self. |
_top | Laadt de respons in de bovenste browsing context; dit is de browsing context die de bovenste voorouder is van de huidige context. Als de huidige context de bovenste context is, gedraagt dit zich hetzelfde als _self. |
Dit attribuut is ook beschikbaar op <input type="submit">- en <button>-elementen.
height
Een getal dat de hoogte aangeeft, in CSS-pixels, waarop de afbeelding die is opgegeven door het src-attribuut moet worden getekend.
src
Een tekenreeks die de URL van het afbeeldingsbestand opgeeft dat moet worden weergegeven om de grafische submit-knop weer te geven. Wanneer de gebruiker interactie heeft met de afbeelding, wordt de invoer op dezelfde manier verwerkt als elke andere knopinvoer.
width
Een getal dat de breedte aangeeft waarop de afbeelding moet worden getekend, in CSS-pixels.
Verouderde attributen
Het volgende attribuut werd door HTML 4 gedefinieerd voor image-invoervelden, maar werd niet door alle browsers geïmplementeerd en is sindsdien afgekeurd.
usemap
Als usemap is opgegeven, moet het de naam zijn van een image map-element, <map>, dat een image map definieert om te gebruiken met de afbeelding. Dit gebruik is verouderd; je zou moeten overschakelen naar het gebruik van het <img>-element wanneer je image maps wilt gebruiken.
Afbeeldingsinvoer gebruiken
Het <input type="image">-element is een replaced element (een element waarvan de inhoud niet wordt gegenereerd of direct beheerd door de CSS-laag), dat zich op grotendeels dezelfde manier gedraagt als een normaal <img>-element, maar met de mogelijkheden van een submit-knop.
Essentiële functies van afbeeldingsinvoer
Laten we een eenvoudig voorbeeld bekijken met alle essentiële functies die je nodig hebt (deze werken precies hetzelfde als op het <img>-element):
<input
id="image"
type="image"
width="100"
height="30"
alt="Login"
src="https://voorbeeld.nl/inlogknop.png" />- Het
src-attribuut wordt gebruikt om het pad naar de afbeelding op te geven die je in de knop wilt weergeven. - Het
alt-attribuut biedt alt-tekst voor de afbeelding, zodat schermlezergebruikers een beter idee krijgen waarvoor de knop wordt gebruikt. Het wordt ook weergegeven als de afbeelding om welke reden dan ook niet kan worden getoond (bijvoorbeeld als het pad verkeerd is gespeld). Gebruik indien mogelijk tekst die overeenkomt met het label dat je zou gebruiken als je een standaard submit-knop zou gebruiken. - De attributen
widthenheightworden gebruikt om de breedte en hoogte op te geven waarop de afbeelding moet worden weergegeven, in pixels. De knop heeft dezelfde grootte als de afbeelding; als je wilt dat het klikgebied van de knop groter is dan de afbeelding, moet je CSS gebruiken (bijv.padding). Als je slechts één dimensie opgeeft, wordt de andere bovendien automatisch aangepast zodat de afbeelding zijn oorspronkelijke aspect ratio behoudt.
Standaard formuliergedrag overschrijven
<input type="image">-elementen — net als normale submit-knoppen — kunnen een aantal attributen accepteren die het standaard formuliergedrag overschrijven:
| De URI van een programma dat de informatie verwerkt die door het invoerelement wordt verzonden; overschrijft het action-attribuut van de formuliereigenaar van het element. |
|---|---|
|
Geeft het type inhoud aan dat wordt gebruikt om het formulier naar de server te verzenden. Mogelijke waarden zijn:
Als dit attribuut is opgegeven, overschrijft het het |
|
Geeft de HTTP-methode aan die de browser gebruikt om het formulier te verzenden. Mogelijke waarden zijn:
Indien opgegeven, overschrijft dit attribuut het |
| Een Booleaans attribuut dat aangeeft dat het formulier niet gevalideerd hoeft te worden bij het verzenden. Als dit attribuut is opgegeven, overschrijft het het novalidate-attribuut van de formuliereigenaar van het element. |
| Een naam of sleutelwoord dat aangeeft waar de respons moet worden weergegeven die wordt ontvangen na het verzenden van het formulier. Dit is een naam van, of sleutelwoord voor, een browsing context (bijvoorbeeld een tab, venster of inline frame). Als dit attribuut is opgegeven, overschrijft het het target-attribuut van de formuliereigenaar van het element. De volgende sleutelwoorden hebben speciale betekenissen:
|
De x- en y-gegevenspunten gebruiken
Wanneer je een formulier verzendt met een knop die is gemaakt met <input type="image">, worden automatisch twee extra gegevenspunten door de browser naar de server verzonden — x en y. Je kunt dit in actie zien in ons X Y-coördinatenvoorbeeld.
Wanneer je op de afbeelding klikt om het formulier te verzenden, zie je dat de gegevens als parameters aan de URL worden toegevoegd, zoals ?x=52&y=55. Als de afbeeldingsinvoer een name-attribuut heeft, dan wordt de opgegeven naam vooraf toegevoegd aan de naam van elke coördinaatvermelding met een puntscheidingsteken. Als de name bijvoorbeeld position was, dan zouden de geretourneerde coördinaten in de URL worden opgemaakt als ?position.x=52&position.y=55.
Dit zijn de X- en Y-coördinaten van de afbeelding waarop met de muis is geklikt om het formulier te verzenden, waarbij (0,0) linksboven in de afbeelding is en de standaard in het geval dat het verzenden plaatsvindt zonder op de afbeelding te klikken. Deze kunnen worden gebruikt wanneer de positie waarop de afbeelding werd aangeklikt van belang is; je kunt bijvoorbeeld een kaart hebben die, wanneer erop wordt geklikt, de aangeklikte coördinaten naar de server verzendt. De servergerichte code bepaalt vervolgens welke locatie is aangeklikt en retourneert informatie over locaties in de buurt.
In ons bovenstaande voorbeeld zouden we servergerichte code kunnen schrijven die bepaalt welke kleur werd aangeklikt op basis van de verzonden coördinaten, en een telling bijhoudt van de favoriete kleuren waarop mensen stemden.
De positie en het schaalalgoritme van de afbeelding aanpassen
Je kunt de object-position-eigenschap gebruiken om de positionering van de afbeelding binnen het frame van het <input>-element aan te passen, en de object-fit-eigenschap om te bepalen hoe de grootte van de afbeelding wordt aangepast om binnen het frame te passen. Hierdoor kun je een frame voor de afbeelding opgeven met de attributen width en height om ruimte in de layout te reserveren, en vervolgens aanpassen waar binnen die ruimte de afbeelding zich bevindt en hoe (of of) deze wordt geschaald om die ruimte in te nemen.
Voorbeelden
Een inlogformulier
Het volgende voorbeeld toont dezelfde knop als eerder, maar nu opgenomen in de context van een typisch inlogformulier.
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://voorbeeld.nl/inlogknop.png"
alt="Login"
width="100" />
</div>
</form>CSS
En nu wat CSS om de basiselementen netter te laten aansluiten:
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}De positie en schaling van de afbeelding aanpassen
In dit voorbeeld passen we het vorige voorbeeld aan om meer ruimte voor de afbeelding te reserveren en vervolgens de daadwerkelijke grootte en positionering van de afbeelding aan te passen met behulp van object-fit en object-position.
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://voorbeeld.nl/inlogknop.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;
}Hier is object-position geconfigureerd om de afbeelding rechtsboven in het element te tekenen, terwijl object-fit is ingesteld op contain, wat aangeeft dat de afbeelding moet worden getekend op de grootste grootte die binnen de box van het element past zonder de beeldverhouding te wijzigen. Merk op dat de zichtbare grijze achtergrond van het element nog zichtbaar is in het gebied dat niet door de afbeelding wordt bedekt.
Technische samenvatting
| Waarde | Geen — het value-attribuut mag niet worden opgegeven. |
| Gebeurtenissen | Geen. |
| Ondersteunde algemene attributen |
alt,
src,
width,
height,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget
|
| IDL-attributen | Geen. |
| DOM-interface |
|
| Impliciete ARIA-rol | button |