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.

Zie Input type in het menu voor de beschrijving van de attributen "type" en "name".

Accept attribuuttop

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.

VoorbeeldVoorbeeld:
Selecteer een bestand:<br>
<input type="file" name="pic" accept="image/*">
<input type="submit" value="Bestand uploaden">


Accesskey attribuuttop

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.

VoorbeeldVoorbeeld:
Volledig naam:<br>
<input name="name" type="text" accesskey="n" size="20">


Align attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="images/boek.jpg" align="middle">
Uitproberen CSS

Tip 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 attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="boek.jpg" alt="Boek">


Border attribuuttop

Met het border attribuut kan je een rand om een afbeelding plaatsen. De bezoekers kunnen zien dat er op de afbeelding geklikt kan worden.

VoorbeeldVoorbeeld:
<input type="image" src="images/boek.jpg" style="border: 1px solid silver;">


Checked attribuuttop

Zorgt ervoor dat een bepaald keuzerondje of selectievakje geselecteerd is als het formulier verschijnt.

VoorbeeldVoorbeeld:
<input type="radio" name="kleur" value="blauw" checked="checked">


Disabled attribuuttop

Met dit attribuut kan het veld niet meer bewerkt worden. Ook kan de tekst niet meer worden geselecteerd.

VoorbeeldVoorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex" disabled="disabled">


Height attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="images/boek.jpg" align="middle" height="48">

Tip Wanneer niet gelijktijdig het width attribuut wordt opgenomen, wordt de breedte van de afbeelding in dezelfde verhouding als de hoogte gewijzigd.

Hspace attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="images/smile.png" align="middle" hspace="10">
Uitproberen CSS

Tip 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 attribuuttop

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.

VoorbeeldVoorbeeld:
<a href="ismap/ismap.php">
  <img src="ismap/landschap.jpg" ismap>
</a>


Maxlength attribuuttop

Hiermee wordt het maximaal aantal tekens dat ingevoerd kan worden ingesteld.

VoorbeeldVoorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" maxlength="10">


Readonly attribuuttop

De gebruiker kan de inhoud of de status van het veld niet wijzigen.

VoorbeeldVoorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex" readonly="readonly">


Size attribuuttop

Hiermee wordt bepaald hoe breed het veld op het scherm moet worden weergegeven.

VoorbeeldVoorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" size="30">

Src attribuuttop

Met het src attribuut wordt het adres van de afbeelding bepaald. Wordt gebruikt samen met het type attribuut.

VoorbeeldVoorbeeld:
<input type="image" src="images/landschap.jpg">


Tabindex attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="text" name="voornaam" tabindex="1">


Usemap attribuuttop

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.

VoorbeeldVoorbeeld:
<img src="usemap/images/figuren.jpg" usemap="#fig"/>


Value attribuuttop

Het value attribuut bepaald de standaard tekst welke in het invoerveld wordt weergegeven.

VoorbeeldVoorbeeld:
Voornaam:<br>
<input type="text" name="voornaam" value="Alex">


Vspace attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="images/smile.png" align="middle" vspace="10">
Uitproberen CSS

Tip 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 attribuuttop

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.

VoorbeeldVoorbeeld:
<input type="image" src="images/boek.jpg" align="middle" width="48">

Tip Wanneer niet gelijktijdig het height attribuut wordt opgenomen, wordt de hoogte van de afbeelding in dezelfde verhouding als de breedte gewijzigd.


Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.