HTML Input type

Het input element definieert een veld in een formulier, hiermee geef je aan dat de gebruiker gegevens kan invoeren. Er horen twee belangrijke attributen bij het input element, dit zijn type en name.
  • Type bepaald om welk soort element het gaat. Opties hiervoor zijn: text, password, hidden, checkbox, radio, file, button, button, sumbit en reset. Elk attribuut heeft zijn eigen unieke eigenschappen.

  • Het Name attribuut kent een naam toe aan het invoerveld. Name wordt gebruikt om de inhoud van een veld die naar een programma (script) op de server wordt gestuurd te identificeren.


Het type attribuut

Het type attribuut biedt veel verschillende mogelijkheden en gegevenstypen voor invoer. Hiermee kan je eenvoudig uitgebreide webformulieren creëren.

Het type attribuut kan één van de volgende waarden krijgen:
text password hidden checkbox radio
file button image submit reset


Waarde: texttop

Creëert één regel voor de invoer van tekst. Deze waarde stelt de gebruiker in staat om tekst in te voeren.

VoorbeeldVoorbeeld:
Voornaam: <input type="text" name="vn" value="" size="20" maxlength="20"/>
Achternaam: <input type="text" name="an" value="Tent" size="20" maxlength="20"/>


Waarde: passwordtop

Password velden zijn vergelijkbaar met tekstvelden, maar de tekens in een wachtwoordveld verschijnen als stippen of andere tekens op het scherm. Dit is natuurlijk om te voorkomen dat het wachtwoord verborgen blijft.

VoorbeeldVoorbeeld:
Wachtwoord: <input type="password" value="" name="ww" maxlength="15" size="15"/>


Waarde: hiddentop

Hidden produceert een onzichtbaar invoerveld. Dit is vergelijkbaar met een tekstveld. Het verschil is dat een verborgen veld niet op de pagina wordt weergegeven. De gebruiker kan in een verborgen veld niets invoeren. Het doel van een verborgen veld is om andere gegevens dan de gegevens van de gebruiker door te geven.

Verborgen velden zijn niet zichtbaar, maar toch, wanneer je het formulier gaat verzenden, wordt de verborgen veld met het formulier verzonden. In dit voorbeeld zou het verborgen veld het programma dat de formulier behandelt vertellen, dat de voorkeur taal van de gebruiker Nederlands is.

VoorbeeldVoorbeeld:
<input type="hidden" name="Taal" value="Nederlands" />

Waarde: checkboxtop

De waarde checkbox definieert een aankruisvakje op het scherm. Checkboxen (aankruisvakjes) worden gebruikt wanneer je wilt dat de gebruikers meerdere items mogen selecteren.

VoorbeeldVoorbeeld:
<input type="checkbox" name="vakje1" />HTML<br />
<input type="checkbox" name="vakje2" checked="checked" />CSS


Waarde: radiotop

De waarde radio produceert een keuzerondje op het scherm. HTML radio knoppen worden gecreëerd door het gebruik van meerdere <input type = "radio"> knoppen, allemaal met dezelfde naam, maar met verschillende waarden. De gebruiker mag slechts één item uit een reeks selecteren.

VoorbeeldVoorbeeld:
<input type="radio" name="naam" value="javascript" />Javascript<br />
<input type="radio" name="naam" value="jquery" />jQuery<br />
<input type="radio" name="naam" value="geen" checked="checked" />Geen


Waarde: filetop

Deze waarde wordt gebruikt voor het uploaden van bestanden in een formulier, je kunt een volledige bestand van je computer samen met het formulier naar de webserver sturen.

VoorbeeldVoorbeeld:
<input type="file" />


Waarde: buttontop

Deze waarde produceert een knop op het scherm zonder een speciale functie. Het formulier zal niet worden ingediend als er geen script aan gekoppeld is. Indien er op de knop wordt geklikt zonder een script aan te koppelen zal er niets gebeuren.

VoorbeeldVoorbeeld:
<input type="button" value="Klik hier" />

Waarde: imagetop

Image creëert een afbeelding in je formulier dat geselecteerd kan worden. Je kunt er een script aan koppelen maar je kunt ook met deze waarde een afbeelding als verzendknop gebruiken. Wanneer de gebruiker op de afbeelding klikt, wordt het formulier ingediend.

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


Waarde: submittop

Deze waarde creëert een knop in je formulier met de naam submit. Hiermee wordt het formulier opgestuurd naar de pagina die is opgegeven in het action attribuut.

VoorbeeldVoorbeeld:
<input type="submit" value="Verzenden" name="verzendknop" />


Waarde: resettop

Deze waarde creëert een knop in je formulier met de naam reset. Hiermee wordt het formulier gereset waardoor alle velden de beginwaarde krijgen die ze bij het laden van de pagina ook hadden.

VoorbeeldVoorbeeld:
<input type="reset" value="Alles wissen" name="wissen" />


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.