HTML Input attributen
De volgende attributen van het element
input worden hieronder beschreven:
accept,
accesskey,
align,
alt,
border,
checked,
disabled,
height,
hspace,
ismap,
maxlength,
readonly,
size,
src,
tabindex,
usemap,
value,
vspace en width.
![](images/any/mark.png) |
Zie Input type in het menu voor de beschrijving van de attributen "type" en "name". |
Accept attribuut![top top](images/any/up.png)
Het
accept attribuut geeft aan welke bestandstypen de server accepteert. Dit is ideaal voor het uploaden van bestanden. De browser kan deze informatie gebruiken, om niet overeenkomstige bestandstypes uit te filteren.
Je kunt de volgende waarden gebruiken in het accept attribuut:
<input accept="extensie | audio/* | video/* | image/*">
extensie |
- |
Bestandsextensie bijv: .gif, .jpg, .txt, .doc |
audio/* |
- |
Alle geluidsbestanden worden geaccepteerd. |
video/* |
- |
Alle videobestanden worden geaccepteerd. |
image/* |
- |
Alle afbeeldingsbestanden worden geaccepteerd. |
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Selecteer een bestand:<br>
<input type="file" name="pic" accept="image/*">
<input type="submit" value="Bestand uploaden">
Accesskey attribuut![top top](images/any/up.png)
Het accesskey attribuut wordt gebruikt om een sneltoets aan het input element te koppelen. De manier van toegang tot de sneltoets kan variëren in verschillende browsers. Bij Internet Explorer wordt de toets ingedrukt, samen met de ALT-toets.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Volledig naam:<br>
<input name="name" type="text" accesskey="n" size="20">
Align attribuut![top top](images/any/up.png)
Het
align attribuut geeft voor image-elementen aan waar de afbeelding ten opzichte van de bijhorende tekst wordt weergegeven. Mogelijke waarden voor de uitlijning zijn:
- Horizontaal: left, right
- Verticaal: top, middle, bottom
In de onderstaande voorbeeld hebben we gekozen voor de waarde "middle" dit betekent dat de basislijn van de omringende tekst even hoog is als het midden van de afbeelding.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/boek.jpg" align="middle">
Uitproberen
CSS
![Tip Tip](images/any/tip.png) |
Het align attribuut is verouderd en wordt niet ondersteund in HTML 4.01, er wordt sterk aangeraden om hiervoor CSS te gebruiken. Voor een verticale uitlijning van een afbeelding gebruik je de CSS-eigenschap: vertical-align en voor de horizontale uitlijning gebruik je de CSS-eigenschap: float. |
Alt attribuut![top top](images/any/up.png)
Het alt attribuut wordt gebruikt om een alternatieve beschrijving van een afbeelding te geven, als de afbeelding niet kan worden weergegeven. Dit is vooral belangrijk als de pagina langzaam wordt geladen of als de gebruiker een schermlezer gebruikt. Gebruik daarom altijd het alt attribuut.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="boek.jpg" alt="Boek">
Border attribuut![top top](images/any/up.png)
Met het
border attribuut kan je een rand om een afbeelding plaatsen. De bezoekers kunnen zien dat er op de afbeelding geklikt kan worden.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/boek.jpg" style="border: 1px solid silver;">
Checked attribuut![top top](images/any/up.png)
Zorgt ervoor dat een bepaald keuzerondje of selectievakje geselecteerd is als het formulier verschijnt.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="radio" name="kleur" value="blauw" checked="checked">
Disabled attribuut![top top](images/any/up.png)
Met dit attribuut kan het veld niet meer bewerkt worden. Ook kan de tekst niet meer worden geselecteerd.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex" disabled="disabled">
Height attribuut![top top](images/any/up.png)
Met het
height attribuut kan de hoogte van een afbeelding worden vastgelegd. Als de afbeelding een andere afmeting heeft dan wordt deze aangepast. De attribuut waarden worden standaard opgegeven in pixels.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/boek.jpg" align="middle" height="48">
![Tip Tip](images/any/tip.png) |
Wanneer niet gelijktijdig het width attribuut wordt opgenomen, wordt de breedte van de afbeelding in dezelfde verhouding als de hoogte gewijzigd. |
Hspace attribuut![top top](images/any/up.png)
Met het
hspace attribuut wordt de witruimte links en rechts van de afbeelding aangegeven. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding, of afbeeldingen te dicht tegen elkaar geplaatst worden. Samen met het attribuut
vspace specificeert dit extra witruimte rond de afbeelding.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/smile.png" align="middle" hspace="10">
Uitproberen
CSS
![Tip Tip](images/any/tip.png) |
Het hspace attribuut is verouderd en wordt niet ondersteund in HTML 4.01, er wordt aangeraden om hiervoor CSS te gebruiken. CSS biedt meer mogelijkheden voor opmaak. Als alternatief kan je de CSS-eigenschap: margin-left en margin-right gebruiken. |
Ismap attribuut![top top](images/any/up.png)
Het
ismap attribuut geeft aan dat de afbeelding een actieve kaart "server-side image map" is, ofwel een aanklikbare afbeelding. De afbeelding zorgt ervoor dat het meerdere aanklikbare gebieden kan bevatten. Voor de werking ervan wordt vaak een cgi-script op de server aangeroepen die de verzoeken afhandelt.
De opbouw is als volgt:
<input type="image" src="ismap/landschap.jpg" ismap>
Het Ismap attribuut is eigenlijk niet bedoeld om het te gebruiken met het <input> element. Er wordt aangeraden om het attribuut op te nemen in het <img> element. Een afbeelding met het ismap attribuut dat in een hyperlink is opgenomen, worden de coördinaten van de klik verzonden naar de opgegeven url. Coördinaten worden gescheiden door een komma en aangegeven in pixels.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<a href="ismap/ismap.php">
<img src="ismap/landschap.jpg" ismap>
</a>
Maxlength attribuut![top top](images/any/up.png)
Hiermee wordt het maximaal aantal tekens dat ingevoerd kan worden ingesteld.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" maxlength="10">
Readonly attribuut![top top](images/any/up.png)
De gebruiker kan de inhoud of de status van het veld niet wijzigen.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex" readonly="readonly">
Size attribuut![top top](images/any/up.png)
Hiermee wordt bepaald hoe breed het veld op het scherm moet worden weergegeven.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" size="30">
Src attribuut![top top](images/any/up.png)
Met het
src attribuut wordt het adres van de afbeelding bepaald. Wordt gebruikt samen met het
type attribuut.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/landschap.jpg">
Tabindex attribuut![top top](images/any/up.png)
Het
tabindex attribuut wordt gebruikt om de tab-volgorde te bepalen wanneer gebruikers gebruik maken van de tab-toets om te navigeren door een pagina. In bepaalde omstandigheden kan het nodig zijn om af te wijken van de standaard tab-volgorde.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="text" name="voornaam" tabindex="1">
Usemap attribuut![top top](images/any/up.png)
Het attribuut
usemap geeft aan dat de afbeelding een "client-side-image map" is. Oudere browsers staan toe om een afbeelding op te nemen in het
<input> element om te gebruiken als een image map. Een image map wordt gebruikt om de positie van de muisaanwijzer over de afbeelding te volgen, en een tooltip aan te geven wanneer
de aanwijzer op een bepaald punt komt te staan.
De opbouw is als volgt:
<input type="image" src="images/figuren.jpg" usemap="#mapnaam">
Bij moderne browsers is het niet toegestaan om een afbeelding op te nemen in het <input> element om te gebruiken als een image map. Om toch gebruik te kunnen maken van een afbeelding als image map kan je het element <img> gebruiken.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<img src="usemap/images/figuren.jpg" usemap="#fig"/>
Value attribuut![top top](images/any/up.png)
Het value attribuut bepaald de standaard tekst welke in het invoerveld wordt weergegeven.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex">
Vspace attribuut![top top](images/any/up.png)
Met het
vspace attribuut wordt de witruimte boven en onder de afbeelding aangegeven. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding, of afbeeldingen te dicht tegen elkaar geplaatst worden. Samen met het attribuut
hspace specificeert dit extra witruimte rond de afbeelding.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/smile.png" align="middle" vspace="10">
Uitproberen
CSS
![Tip Tip](images/any/tip.png) |
Het vspace attribuut is verouderd en wordt niet ondersteund in HTML 4.01, er wordt aangeraden om hiervoor CSS te gebruiken. CSS biedt meer mogelijkheden voor opmaak. Als alternatief kan je de CSS-eigenschap: margin-top en margin-bottom gebruiken. |
Width attribuut![top top](images/any/up.png)
Met het
width attribuut kan de breedte van een afbeelding worden vastgelegd. Als de afbeelding een andere afmeting heeft dan wordt deze aangepast. De attribuut waarden worden standaard opgegeven in pixels.
![Live voorbeeld Voorbeeld](images/any/example.png)
Voorbeeld:
<input type="image" src="images/boek.jpg" align="middle" width="48">
![Tip Tip](images/any/tip.png) |
Wanneer niet gelijktijdig het height attribuut wordt opgenomen, wordt de hoogte van de afbeelding in dezelfde verhouding als de breedte gewijzigd. |