Alternatieve tekst: afbeeldingen voor formulierknoppen
Alternatieve teksten voor afbeeldingen die in plaats van standaard formulierknoppen worden gebruikt
Formulieren op webpagina’s worden voorzien van knoppen om ze te versturen. Naast de standaardknoppen kan een webontwikkelaar besluiten om een afbeelding als knop te gebruiken. Voor deze afbeelding moet een alternatieve tekst worden opgegeven, die de functie van de knop uitdrukt.
Inhoudsopgave
- Voorbeeld van een grafische knop in een formulier
- Ondersteuning door browsers
- De Herstel knop
- Gebruik van het button element
Voorbeeld van een grafische knop in een formulier
Een grafische formulierknop met alternatieve tekst die de functie uitdrukt (HTML):
<input type="image" src="/images/buttons/search.gif" alt="Zoeken!">
Ondersteuning door browsers
Een afbeelding voor een formulierknop volgens het input element functioneert standaard als een knop om het formulier te versturen. Het betreft hier echter een aanvulling op HTML die relatief nieuw is. Sommige (oudere) browsers ondersteunen het alt attribuut op het input element niet. Het is daarom raadzaam om – net als bij standaard formulierknoppen die geen afbeeldingen zijn – een waarde aan het value attribuut mee te geven:
Geef een waarde mee aan het value attribuut (HTML)
<input type="image" src="/images/buttons/search.gif" alt="Zoeken!" value="Zoeken!">
De Herstel knop
Een zogenaamde Herstel (Reset) knop kan niet in deze vorm worden vervangen door een afbeelding. Het toepassen van deze knop is echter vaker nadelig dan voordelig. Zie ook Een betere bruikbaarheid van formulieren.
Gebruik van het button element
Het button element is een element dat de webontwikkelaar toestaat om willekeurige HTML binnen een formulierknop te plaatsen. Zo kan voor een afbeelding in een knop het img (image) element worden gebruikt. Binnen dit element kan via de gangbare methodes een alternatieve tekst worden opgegeven.
Voorbeeld van een afbeelding in het button element (HTML)
<button type="submit"><img src="/images/buttons/submit.gif" alt="Verstuur!"></button>
Het button element zal leiden tot een standaard uiterlijk van een knop rondom de ingesloten HTML. Door middel van het type attribuut kan worden bepaald welke functie het element heeft: een Verstuur (Submit) knop, een Herstel (Reset) knop of een functieloze knop. Deze laatste is bruikbaar in combinatie met client-side scripts.
