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.
Waarde: text
Creëert één regel voor de invoer van tekst. Deze waarde stelt de gebruiker in staat om tekst in te voeren.
Voorbeeld:
Voornaam: <input type="text" name="vn" value="" size="20" maxlength="20"/>
Achternaam: <input type="text" name="an" value="Tent" size="20" maxlength="20"/>
Waarde: password
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.
Voorbeeld:
Wachtwoord: <input type="password" value="" name="ww" maxlength="15" size="15"/>
Waarde: hidden
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.
Voorbeeld:
<input type="hidden" name="Taal" value="Nederlands" />
Waarde: checkbox
De waarde
checkbox definieert een aankruisvakje op het scherm. Checkboxen (aankruisvakjes) worden gebruikt wanneer je wilt dat de gebruikers meerdere items mogen selecteren.
Voorbeeld:
<input type="checkbox" name="vakje1" />HTML<br />
<input type="checkbox" name="vakje2" checked="checked" />CSS
Waarde: radio
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.
Voorbeeld:
<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: file
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.
Voorbeeld:
<input type="file" />
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.
Voorbeeld:
<input type="button" value="Klik hier" />
Waarde: image
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.
Voorbeeld:
<input type="image" name="verzenden" src="images/verzenden.jpg" />
Waarde: submit
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.
Voorbeeld:
<input type="submit" value="Verzenden" name="verzendknop" />
Waarde: reset
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.
Voorbeeld:
<input type="reset" value="Alles wissen" name="wissen" />