Met de tags die we tot nu toe behandeld hebben kunnen we al mooie webpagina's maken. Maar deze pagina's zijn toch vooral éénrichtingsverkeer. Je kan ze lezen, maar bieden voor de rest weinig interactie.
Dat is waarschijnlijk niet het internet zoals jij dat kent. Het internet waar je op elke pagina een reactie kan achterlaten, of met een zoekbalk iets kunt zoeken. Om zulke pagina's te maken moeten we gebruik maken van HTML-forms.
Laten we eens een simpel formulier bestuderen. Dit formulier werkt ook al, probeer maar uit!
<form action="https://google.com/" method="GET">
<input name="q" type="text">
<input type="submit" value="Zoek met Google">
</form>
Een formulier staat altijd tussen de <form> tags. Tussen deze tags staan de verschillende input elementen van het formulier die de gebruiker kan invullen. Alleen de input elementen die binnen het formulier staan worden gebruikt, let dus goed op waar je de sluit-tag zet voor het formulier.
Een formulier maak je dus met de form tag. Deze tag op zich verandert niet de opmaak van de pagina, maar hij heeft wel een aantal belangrijke attributen:
Het action attribuut geeft een link aan waar het formulier naartoe verzonden moet worden als de gebruiker op een submit knop klikt. Vaak is dat een script op je webpagina die de inhoud van het formulier leest en er iets mee doet. Bijvoorbeeld in een database plaatsen. Hoe je deze scripts kan schrijven komt in een volgend vak aan bod.
Een formulier kan op twee verschillende manieren verzonden worden. Via een GET of via een POST. Het verschil zit hem er in op wat voor manier de data in het formulier wordt verzonden.
Op de GET manier komt de data uit het formulier achter de URL te staan van het action attribuut, achter het vraagteken. Dat ziet er dan bijvoorbeeld zo uit: ?name1=value1&name2=value2. Deze methode wordt vaak gebruikt voor zoekformulieren.
De POST manier komt de data niet in de URL te staan maar wordt deze onzichtbaar mee verstuurd in de request. Dit is gebruikelijk voor alle formulieren waarbij data van gebruikers wordt verwerkt of opgeslagen. Het is dan namelijk onmogelijk om 'per ongeluk' weer naar dezelfde URL te gaan en iets uit een formulier dubbel op te slaan.
Met de <form> tag gereed kunnen we alle invoervelden gaan maken. Deze maak je bijna allemaal met de <input> tag. Met alleen deze tag en het type-attribuut kunnen we al een heel divers palet aan invoervelden krijgen:
Text: <input type="text"><br>
Checkbox: <input type="checkbox"><br>
Date: <input type="date"><br>
File: <input type="file"><br>
Number: <input type="number"><br>
Password: <input type="password"><br>
Radio: <input type="radio"><br>
Color: <input type="color"><br>
Range: <input type="range"><br>
Reset: <input type="reset"><br>
Submit: <input type="submit"><br>
Afhankelijk van welk type je gebruikt zijn er extra attributen waarmee je het invoerveld weer kan aanpassen. Twee belangrijke die voor alle inputs gelden zijn:
Het name attribuut geeft de naam aan van het invoerveld. Het script dat het formulier verwerkt kan dan aan de hand van deze naam de waarde van het invoerveld weer krijgen.
Een checkbox en een radiobutton veld komen bijna nooit voor met maar één keuze. Je bied mensen meerdere keuzes aan door het input object te herhalen met verschillende waarden, maar met DEZELFDE name!
<input type="radio" name="kiesMaar" value="1">Ja
<input type="radio" name="kiesMaar" value="0">Nee
Alleen hierdoor begrijpt de browser dat het om hetzelfde veld gaat en zal bijvoorbeeld je radiobutton veld ook echt gaan werken!
Soms wil je al een waarde ingevoerd hebben als het formulier getoond wordt. Dat kan je dan doen met het value attribuut:
<input type="text" name="voornaam" value="Paul">
Dit is geen belangrijk attribuut, maar ziet er wel leuk uit op een formulier:
<input type="text" name="voornaam" placeholder="Typ hier uw voornaam...">
Helaas kunnen we niet alle invoervelden met de <input> tag maken. Er zijn een tweetal tags spelbreker die het weer op hun eigen manier moeten doen. De <select> tag is er zo eentje.
Met de <select> tag kan je een dropdown invoer maken. De verschillende opties in de dropdown kan je dan binnen de select tag maken met de <option> tag. Let op dat de name en value attribuut ook voor de select tag gelden, maar dat de name bij de <select> hoort en de value bij de <option>.
<select name="opties">
<option value="o1">Optie 1</option>
<option value="o2">Optie 2</option>
<option value="o3">Optie 3</option>
</select>
De text input is soms wat klein voor wat we nodig hebben. Als we gebruikers een reactie of een berichtje willen laten typen is het handig als ze wat meer ruimte hebben. Dit is waar de <textarea> tag voor gebruikt wordt. In dit invoerveld kunnen gebruikers meerdere regels typen, en in moderne browsers kunnen ze dit veld ook nog eens zelf groter en kleiner maken.
<textarea name="reactie">Typ hier uw reactie...</textarea>
Vaak staat er vlak voor een invoerveld een labeltje waarmee je de gebruiker duidelijk maakt waar het invoerveld voor bedoeld is. Dit zie je zo vaak dat ze er speciaal een tag voor hebben gemaakt, de <label>. Deze tag heeft een attribuut for waarin de id staat van het element waar het een label voor is.
De tag lijkt niet zo heel veel toe te voegen aan een pagina, maar heeft wel degelijk meerwaarde. Geautomatiseerde programma's of schermvoorlezers kunnen dan namelijk beter zien wat er in een invoerveld moet worden ingevuld. Oh ja, en in browsers wordt het invoerveld geselecteerd als je op het label klikt!
<label for="voornaam">Voornaam:</label>
<input type="text" name="voornaam" id="voornaam">