HTML beschrijving element INPUT

Handleiding HTML Legenda | HTML-elementen | Inhoud HTML | Inhoud CSS | Begin


Van het INPUT element worden de volgende attributen beschreven: ACCEPT, ACCESSKEY, ALIGN, ALT, BORDER, CHECKED, DISABLED, HEIGHT, HSPACE, ISMAP, MAXLENGTH, NAME, READONLY, SIZE, SRC, TABINDEX, TYPE, USEMAP, VALUE, VSPACE en WIDTH.

De beschrijving van de attributen CLASS, DIR, ID, LANG, STYLE en TITLE is opgenomen in het onderdeel Algemene attributen.

Een overzicht van attributen, die betrekking hebben op het uitvoeren van een script bij het optreden van een bepaalde gebeurtenis, wordt gegeven in het onderdeel Gebeurtenis-attributen.

Het gebruik van het INPUT element wordt toegelicht in het onderdeel Formulieren in de Handleiding HTML.


INPUT


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het INPUT element wordt een veld in een formulier gedefinieerd, waarin de gebruiker gegevens kan invoeren. Bij de invoer kan het ondermeer gaan om een enkele regel tekst, een selectie met behulp van keuzerondjes en aankruisvakjes en opdrachten tot het verzenden van de ingevoerde of geselecteerde informatie, of het herstellen van de beginwaarden.
De opbouw is:

<INPUT ..>

Het INPUT element heeft alleen attributen en geen inhoud. Een beëindiging is daarom niet toegestaan.
Voor de verwerking van het formulier zal meestal het NAME attribuut vereist zijn.

DTD HTML 4.0: strict, transitional, frameset
Beëindiging: verboden
Inhoud: - (het element is leeg)
Mag zijn opgenomen in: CAPTION, DD, DEL, DT, INS, LEGEND, LI, TD en TH;
elementen op blokniveau met uitzondering van DIR, DL, MENU, OL, TABLE en UL;
inline elementen met uitzondering van BUTTON, MAP, SCRIPT, SELECT en TEXTAREA;
Vereiste attributen: -
ACCEPT


HTML 4.0
IE -
NN -
MOZ -
FF -
OP -
Het ACCEPT attribuut geeft aan welke MIME-types (Content Types of Internet Media Types) door het script of programma op de server verwerkt kunnen worden bij het uploaden van bestanden met behulp van het TYPE met de waarde "file". De browser kan deze informatie gebruiken, om niet overeenkomstige bestandstypen uit te filteren.
De opbouw is:

<INPUT ACCEPT="waarde">

De waarde is een lijst van MIME-types, welke door een komma zijn gescheiden.
ACCESSKEY


HTML 4.0
IE 4.0
NN 6.0
MOZ 1.0
FF 1.0
OP 7.0
Het ACCESSKEY attribuut kan gebruikt worden om een sneltoets aan het INPUT element toe te wijzen en daarmee de gebruiker direct vanaf het toetsenbord toegang te geven tot het control, dat door het element in het formulier is geplaatst. Gebruik van de sneltoets geeft het control de focus (activeert het), waarna de gebruiker bijvoorbeeld in het geval van een tekstveld tekst kan invoeren.
De opbouw is:

<INPUT ACCESSKEY="waarde">

De waarde is een enkel karakter (uit het document karakterset), waarbij hoofdletters en kleine letters niet als verschillend gezien worden.
Om het control te activeren moet in de meeste browsers de Alt-toets (op Windows systemen) of de Ctrl-toets (op Macintosh systemen) ingedrukt worden in combinatie met de toets van het aangegeven karakter. Opera hanteert een afwijkende procedure: eerst moet met de toetscombinatie Shift + Esc de werking van het ACCESSKEY attribuut geactiveerd worden, pas daarna kan de toets van het aangewezen karakter worden ingedrukt. In Firefox 2.0 is de toetscombinatie (om verwarring met de sneltoetsen uit het menu van de browser te voorkomen) gewijzigd in Shift, Alt en het aangegeven karakter.
Om de gebruiker attent te maken van de sneltoets is het verstandig deze in de tekst of een label te vermelden.
ALIGN


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het ALIGN attribuut wordt bij het waarde "image" voor het TYPE attribuut de verticale uitlijning van de afbeelding bepaald.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" ALIGN="uitlijning">

Voor de mogelijkheden voor de uitlijning zie de beschrijving van het IMG element.

In HTML 4.0 heeft het ALIGN attribuut het label afgekeurd gekregen. Als alternatief kan met behulp van de eigenschappen vertical-align (voor de verticale uitlijning) en float (voor de horizontale uitlijning) een stijl gedefinieerd worden. Omdat oudere browsers stijlen niet ondersteunen, blijft het gebruik van afgekeurde elementen en attributen voorlopig toegestaan.
ALT


HTML 2.0
IE 1.0
NN 1.1
MOZ 1.0
FF 1.0
OP 2.1
Met het ALT attribuut kan bij de waarde "image" voor het TYPE attribuut een alternatieve tekst opgegeven worden, voor als de browser de afbeelding niet kan weergeven (bij gebruik van een tekst-georiënteerde browser).
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" ALT="alternatieve tekst">
BORDER


HTML -
IE -
NN 1.0
MOZ 1.0
FF 1.0
OP -
Met het BORDER attribuut wordt bij het waarde "image" voor het TYPE attribuut de dikte van de rand om een afbeelding bepaald.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" BORDER="waarde" ..>

De waarde is een getal dat de dikte van de rand in pixels aangeeft.
In Microsoft Internet Explorer, Firefox, Mozilla, Netscape Navigator 6.0 en hoger en Opera wordt geen rand om de afbeelding weergegeven. In lagere versies van Netscape Navigator gebeurt dit standaard wel, maar wordt deze weggelaten met de waarde "0".

Het BORDER attribuut maakt geen deel uit van HTML 4.0. Als alternatief kan met behulp van de eigenschappen voor randen een stijl gedefinieerd worden.
CHECKED


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het CHECKED attribuut wordt bij de waarden "radio" en "checkbox" voor het TYPE attribuut een standaardkeuze aangegeven.
De opbouw is:

<INPUT TYPE="checkbox" CHECKED>

of

<INPUT TYPE="radio" CHECKED>
DISABLED


HTML 4.0
IE 4.0
NN 6.0
MOZ 1.0
FF 1.0
OP 5.0
Met het DISABLED attribuut kan aangegeven worden dat de gebruiker niets mag invoeren in het betreffende veld.
De opbouw is:

<INPUT DISABLED>

Een INPUT element met het attribuut DISABLED krijgt geen focus als de gebruiker er op klikt, wordt overgeslagen in de tab-reeks en de waarde van het element wordt niet meegezonden met de rest van het formulier.
HEIGHT


HTML -
IE 4.0
NN 1.0
MOZ 1.0
FF 1.0
OP 4.0
Met het HEIGHT attribuut wordt bij het waarde "image" voor het TYPE attribuut de hoogte van de afbeelding vastgelegd.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" HEIGHT="waarde" ..>

De waarde kan uitgedrukt worden in pixels, of als percentage van de beschikbare hoogte. Het gebruik van een percentage wordt slechts zeer beperkt ondersteund en leidt bij sommige browsers tot problemen bij de weergave. Aangeraden wordt daarom alleen een waarde in pixels op te nemen.
Het HEIGHT attribuut kan gebruikt worden om de afbeelding in een andere dan de eigen hoogte weer te geven. Wanneer niet gelijktijdig het WIDTH attribuut wordt opgenomen, wordt de breedte in dezelfde verhouding als de hoogte gewijzigd.

Het HEIGHT attribuut maakt geen deel uit van HTML 4.0. Als alternatief kan met behulp van de height eigenschap een stijl gedefinieerd worden.
HSPACE


HTML -
IE 5.0
NN 1.0
MOZ 1.0
FF 1.0
OP 4.0
Met het HSPACE attribuut wordt de ruimte aangegeven, welke zowel links als rechts naast de afbeelding wordt vrij gehouden. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding geplaatst wordt, of afbeeldingen te dicht tegen elkaar.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" HSPACE="waarde" ..>

De waarde is een getal dat de vrije ruimte in pixels aangeeft.

Het HSPACE attribuut maakt geen deel uit van HTML 4.0. Als alternatief kan met behulp van de eigenschappen margin-left en margin-right een stijl gedefinieerd worden.
ISMAP


HTML 4.01
IE -
NN -
MOZ -
FF -
OP -
Het ISMAP attribuut geeft aan dat de afbeelding een zogenaamde "server-side image map" is, ofwel een aanklikbare afbeelding waarvan de werking gecontroleerd wordt door (een cgi-script op) de server. De aanklikbare afbeelding is opgedeeld in verschillende gebieden. Als je op de afbeelding klikt, worden de coördinaten van de plaats op de afbeelding waar je klikt naar het (via het ACTION attribuut van het FORM element opgegeven) cgi-script op de server verstuurd. Op basis van de coördinaten bepaalt het cgi-script op welk gebied je hebt geklikt en wat de bijbehorende actie is.
De opbouw is:

<INPUT TYPE="image" SRC="URI_afbeelding" ISMAP ..>
MAXLENGTH


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het MAXLENGTH attribuut wordt bij de waarden "text" en "password" voor het TYPE attribuut bepaald hoeveel karakters de gebruiker kan intoetsen.
De opbouw is:

<INPUT MAXLENGTH="waarde">

De waarde is een getal.
NAME


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Het NAME attribuut wordt gebruikt om een invoerveld een naam te geven. Het script of programma op de server dat het formulier afhandelt, wordt daarmee in staat gesteld het invoerveld te onderscheiden van andere controls in het formulier.
De opbouw is:

<INPUT NAME="naam">

De naam is hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven.
READONLY


HTML 4.0
IE 4.0
NN 6.0
MOZ 1.0
FF 1.0
OP 5.0
Indien het TYPE attribuut de waarde "text" of "password" heeft, kan met het READONLY attribuut bepaald worden dat de tekst, welke met het VALUE attribuut in het tekstveld is geplaatst, niet gewijzigd mag worden.
De opbouw is:

<INPUT VALUE="tekst" READONLY>
SIZE


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het SIZE attribuut wordt bij de waarden "text" en "password" voor het TYPE attribuut bepaald hoe breed (uitgedrukt in het aantal karakters) het veld op het scherm moet worden weergegeven. Het SIZE attribuut heeft geen invloed op de hoeveelheid tekst die de gebruiker kan intoetsen. De tekst in de invoervelden wordt weergegeven in een lettertype met een vaste letterafstand. Als het SIZE attribuut niet wordt gebruikt dan wordt als standaard 20 karakters aangehouden.
De opbouw is:

<INPUT SIZE="waarde">
SRC


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het SRC attribuut wordt bij de waarde "image" voor het TYPE attribuut bepaald, welke afbeelding moet worden weergegeven als grafische "submit" knop.
De opbouw is:

<INPUT TYPE="image" SRC="URI">

De URI (Uniform Resource Identifier) heeft de volgende opbouw:

http://host/path

Host specificeert het adres van de server, waarop zich de gevraagde afbeelding bevindt. Het kan een IP-adres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties).
Path geeft aan hoe de gevraagde afbeelding op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI op te nemen. Als de gevraagde afbeelding zich op de lokale server bevindt, dan volstaat de volgende URI:

path
TABINDEX


HTML 4.0
IE 4.0
NN 6.0
MOZ 1.0
FF 1.0
OP 7.0
Met het TABINDEX attribuut kan de volgorde bepaald worden, waarmee verschillende onderdelen van een document (hyperlinks, gebieden van een client-side image map en controls van een formulier) de focus kunnen krijgen (geactiveerd kunnen worden) als de gebruiker de tab-toets op het toetsenbord indrukt.
De opbouw is:

<INPUT TABINDEX="waarde">

De waarde mag een positief of negatief geheel getal (integer) zijn.
De normale tab-volgorde is de volgorde waarin de elementen in het document voorkomen. Elementen waarvoor het TABINDEX attribuut gebruikt is, komen voor elementen zonder het TABINDEX attribuut. Elementen met een positieve waarde voor de TABINDEX worden doorlopen van de laagste waarde naar de hoogste waarde. Een element met een negatieve waarde voor de TABINDEX doet niet mee in de tab-volgorde. Hetzelfde geldt voor elementen met het DISABLED attribuut.
Indien het TABINDEX attribuut is opgenomen voor meerdere bij elkaar behorende keuzerondjes (dus met dezelfde waarde voor het NAME attribuut), dan doet in Microsoft Internet Explorer alleen het eerste keuzerondje in de tabreeks mee.
TYPE


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het TYPE attribuut wordt bepaald wat voor soort gegevens het invoerveld accepteert.
De opbouw is:

<INPUT TYPE="waarde">

De volgende waarden zijn beschikbaar:
  • text: hiermee wordt een veld gedefinieerd waarin de gebruiker een enkel woord of een enkele regel tekst kan invoeren. Met behulp van het VALUE attribuut kan een standaard tekst worden opgegeven, welke in het veld staat als het formulier geopend wordt. Andere attributen welke gebruikt kunnen worden zijn SIZE en MAXLENGTH.
  • password: hiermee wordt een veld gedefinieerd waarin de gebruiker gevoelige tekst (bijvoorbeeld een wachtwoord) kan invoeren. De ingevoerde karakters worden met een asterisk (*) weergegeven. Met behulp van het VALUE attribuut kan een standaard wachtwoord worden opgegeven, welke in het veld staat als het formulier geopend wordt. Andere attributen welke gebruikt kunnen worden zijn SIZE en MAXLENGTH.
  • checkbox: hiermee wordt een aankruisvakje gedefinieerd. De gebruiker kan het vakje selecteren (aankruisen) als hij/zij het met de bijbehorende omschrijving eens is. Met behulp van het verplichte VALUE attribuut wordt bepaald welke waarde (in combinatie met de waarde van het NAME attribuut) naar de server gestuurd moet worden als het aankruisvakje geselecteerd is. Met het CHECKED attribuut kan een standaard keuze aangegeven worden. Van een eenmaal geselecteerd aankruisvakje kan de selectie ongedaan gemaakt worden door het nogmaals aan te klikken.
  • radio: hiermee wordt een keuzerondje gedefinieerd welke deel uit maakt van een set van keuzerondjes waarvan de gebruiker er één kan kiezen. Door middel van het verplichte VALUE attribuut wordt bepaald welke informatie naar de server verzonden moet worden. Bij elkaar behorende keuzerondjes krijgen behulp met het NAME attribuut dezelfde naam. Het is aan te bevelen met behulp van het CHECKED attribuut een standaard keuze te aan te geven. Als een keuzerondje eenmaal geselecteerd is, kan de selectie alleen ongedaan gemaakt worden als een ander keuzerondje met dezelfde naam geselecteerd wordt. Keuzerondjes pas je toe als het aantal keuzemogelijkheden niet al te groot is. Bij meer dan 3 à 4 keuzemogelijkheden is het beter gebruik te maken van een uitschuifkeuzelijst, welke opgebouwd wordt met de elementen SELECT en OPTION.
  • submit: hiermee wordt een knop gedefinieerd, die er voor zorgt dat, als erop wordt geklikt, de ingevoerde gegevens van het formulier naar de server worden verstuurd. Met behulp van het VALUE attribuut kan de tekst bepaald worden, welke op de knop moet staan. Als het VALUE attribuut niet is gebruikt, wordt "Submit Query" afgebeeld. Eventueel kan ook het NAME attribuut gebruikt worden. Je kunt dan meerdere SUBMIT knoppen naast elkaar gebruiken in plaats keuzerondjes. Dit heeft alleen zin als de invoer zich tot deze knoppen beperkt, omdat anders ook alle overige informatie met het klikken op de knop verzonden wordt.
  • reset: hiermee wordt een knop gedefinieerd, die bij klikken de beginwaarden van de verschillende controls herstelt (en dus ook alle ingevoerde tekst wist). Met behulp van het VALUE attribuut kan de tekst bepaald worden, welke op de knop moet staan. Als het VALUE attribuut niet is gebruikt, wordt "Reset" afgebeeld.
  • button: hiermee wordt een knop gedefinieerd, die er voor zorgt dat, als erop wordt geklikt, een script wordt uitgevoerd. Met behulp van het VALUE attribuut kan de tekst bepaald worden, welke op de knop moet staan.
  • image: hiermee kan een afbeelding gebruikt worden als een knop voor verzenden (vergelijkbaar met de waarde "submit"). Omdat de afbeelding in plaats van de echte knop komt, zal het in het algemeen niet meer gaan om iets wat er uitziet als een knop (in tegenstelling tot bij de oplossing via het BUTTON element). Behalve de overige informatie van het formulier worden ook de coördinaten van de plaats waar geklikt wordt meegestuurd. Met behulp van het SRC attribuut moet bepaald worden welke afbeelding weergegeven moet worden. Met het ALT attribuut wordt een alternatieve tekst opgegeven, voor als de browser geen afbeeldingen kan of mag weergeven. Omdat niet elke browser al met het ALT attribuut overweg kan, is het verstandig ook het NAME attribuut op te nemen met de alternatieve tekst. Als het NAME attribuut gebruikt is, dan wordt deze aan de coördinaten toegevoegd (naam.x en naam.y) bij het verzenden naar de server.
  • hidden: hiermee wordt een verborgen (voor de gebruiker niet zichtbaar) veld gedefinieerd. De door middel van het VALUE attribuut bepaalde inhoud wordt met de overige informatie van het formulier verzonden naar de server.
  • file: hiermee wordt de gebruiker de mogelijkheid geboden een bestand op te geven, dat met de overige informatie uit het formulier naar de server gestuurd moet worden. De waarde file wordt ondersteund door Microsoft Internet Explorer vanaf versie 4, Mozilla, Netscape Navigator vanaf versie 2 en Opera vanaf versie 3.5. Als van deze mogelijkheid gebruik gemaakt wordt, moet aan het FORM element het ENCTYPE attribuut met de waarde "multipart/form-data" toegevoegd worden en moet het METHOD attribuut de waarde "post" hebben.
De standaardwaarde voor het TYPE attribuut is text.
USEMAP


HTML 4.0
IE -
NN 2.0
MOZ 1.0
FF 1.0
OP 6.0
De door de server te ondernemen actie kan afhankelijk gemaakt worden van de coördinaten van het punt waarop geklikt wordt in de via het SRC attribuut opgegeven afbeelding. Het USEMAP attribuut wordt in dat geval gebruikt om te specificeren in welke "map" de bij de afbeelding behorende gegevens gevonden kunnen worden.
De opbouw is:

<INPUT TYPE="image" SRC="URI_afbeelding" USEMAP="URI_map#map_naam" ..>

Voor een toelichting op de URI zie het SRC attribuut.
Als de map-gegevens in hetzelfde document wordt opgenomen, is het voldoende alleen de naam van de map op te geven:

USEMAP="#map_naam"

Voor meer informatie zie de beschrijving van Client-side image maps.
VALUE


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Het VALUE attribuut heeft een betekenis die afhangt van waarde aan het TYPE attribuut is gegeven:
  • bij "text" en "password" bepaalt het de standaard tekst welke in het invoerveld wordt weergegeven.
  • bij "hidden" bepaalt het de waarde welke onzichtbaar voor de gebruiker wordt meegezonden naar de server.
  • bij "radio" en "checkbox" bepaalt het welke waarde naar de server gestuurd moet worden als de mogelijkheid geselecteerd is.
  • bij "submit" en "reset" bepaalt het de tekst welke op de knop komt te staan.
  • bij "file" bepaalt het de beginwaarde voor de naam en het pad van het te verzenden bestand.
De opbouw is:

<INPUT VALUE="waarde">

Indien het TYPE attribuut de waarde "radio" heeft, moet het VALUE attribuut gebruikt worden.

Om te voorkomen dat de gebruiker ongemerkt of onbedoeld een bestand verzendt, wordt het VALUE attribuut door Microsoft Internet Explorer, Mozilla en Netscape Navigator niet ondersteund indien het TYPE attribuut de waarde "file" heeft. Opera 3.5 en hoger ondersteunt het VALUE attribuut in die situatie wel en heeft het veiligheidsprobleem opgelost, door voor verzenden een bevestiging van de gebruiker te vragen.
VSPACE


HTML -
IE 5.0
NN 1.0
MOZ 1.0
FF 1.0
OP 4.0
Met het VSPACE attribuut wordt de ruimte aangegeven, welke zowel boven als onder de afbeelding wordt vrij gehouden. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding geplaatst wordt, of afbeeldingen te dicht tegen elkaar.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" VSPACE="waarde" ..>

De waarde is een getal dat de vrije ruimte in pixels aangeeft.

Het VSPACE attribuut maakt geen deel uit van HTML 4.0. Als alternatief kan met behulp van de eigenschappen margin-top en margin-bottom een stijl gedefinieerd worden.
WIDTH


HTML -
IE 4.0
NN 1.0
MOZ 1.0
FF 1.0
OP 4.0
Met het WIDTH attribuut wordt bij het waarde "image" voor het TYPE attribuut de breedte van de afbeelding vastgelegd.
De opbouw is:

<INPUT TYPE="image" SRC="bestemming" WIDTH="waarde" ..>

De waarde kan uitgedrukt worden in pixels, of als percentage van de beschikbare breedte. Het gebruik van een percentage wordt slechts zeer beperkt ondersteund en leidt bij sommige browsers tot problemen bij de weergave. Aangeraden wordt daarom alleen een waarde in pixels op te nemen.
Het WIDTH attribuut kan gebruikt worden om de afbeelding in een andere dan de eigen breedte weer te geven. Wanneer niet gelijktijdig het HEIGHT attribuut wordt opgenomen, wordt de hoogte in dezelfde verhouding als de breedte gewijzigd.

Het WIDTH attribuut maakt geen deel uit van HTML 4.0. Als alternatief kan met behulp van de width eigenschap een stijl gedefinieerd worden.


Legenda | HTML-elementen | Inhoud HTML | Inhoud CSS | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 29 maart 2008