Stel, je hebt een werkelijk prachtige website, maar je wilt een pagina maken om iemand een mail naar jouw toe te kunnen laten zenden. Hiervoor heb je HTML met formulieren en PHP nodig. Als je meer wilt weten over PHP, kijk dan bij de PHP tutorials. We gaan ons in deze tutorial echter hoofdzakelijk bezig houden met het begrip formulieren.
Formulieren zijn, net zoals in de "echte wereld", lijsten waar je gegevens in moet vullen. Deze gegevens kunnen later verwerkt worden door een computer. Een formulier begint altijd met de tag <form> en eindigt met </form>. Vervolgens moet je alle elementen ertussen plaatsen, dus alle vakjes, keuzerondjes en aanvinkhokjes. Deze maak je met de tag <input>. De parameter type bepaalt wat voor element het wordt. Een lijstje met mogelijkheden:
Naam Element | type= | Voorbeeld |
Tekstvak | text | |
Keuzevakje | checkbox | |
Radioknop | radio | |
Verborgen Veld | Hidden | |
Herstelknop | reset | |
Verzendknop | submit |
Dit lijkt nogal voor zich te spreken, maar dat is maar schijn. Er moet aan elk vakje nog een naam worden gekoppeld, zodat elk vakje bij naam te "roepen" is bij de verwerking. Dit is simpel, u geeft elk vakje gewoon een eigen naam met de parameter name="naam". Echter, bij radioknoppen, moeten alle knoppen van dezelfde categorie dezelfde naam hebben, anders hebben ze weinig zin. U krijgt dus bijvoorbeeld <input type="text" name="tekstvaknaam">
Bij het versturen van de gegevens moet er natuurlijk wel een te verwerken waarde worden doorgegeven. En hoewel we het nu niet over verwerking hebben, is het goed om het alvast door te nemen.
De waarde die wordt teruggegeven bij een tekstvak is duidelijk, dat is gewoon wat erin staat. Maar kijk nu eens naar de checkbox. (een selectievakje) Het probleem is: wat is de waarde die moet worden teruggeven. Met andere woorden, wat krijg je als je het vakje "roept" met de naam die is gegeven. Die waarde kun je toewijzen. Dan krijg je <input type="checkbox" name="naam" value="aangevinkt">. Als je het vakje straks oproept, krijg je de waarde aangevinkt terug, zo niet, dan krijg je niks terug. Dit moet ook voor radiobuttons. Verder niet.
P.S. Value kun je ook gebruiken om alvast een waarde toe te wijzen aan bijvoorbeeld een tekstvak of een knop. Je krijgt dan:
<input type="text" name="naam" value="Dit is de tekst die er al staat, maar die kan worden aangepast door de gebruiker" />
De gebruiker krijgt dan te zien:
Dit zijn niet alle mogelijke formuliervelden, want er zijn enkele vakken met een afwijkende schrijfwijze. Die komen nu aan bod.
Allereerst krijgen we <textarea>. Dit formulierveld kennen jullie wel, want het woord ook gebruikt op mijn forum, als je een bericht wilt typen. Textarea ziet er zo uit:
Het aantal rijen en tekens per rij (de grootte dus) kun je regelen met de parameters cols en rows.
<textarea cols="25" rows="5">Hallo, hier staat een tekst, die je kunt veranderen</textarea> Levert op:
Ook handig is een vervolgkeuzelijst, deze lijst klapt uit. Je kent hem vast wel:
Dat deed ik met de code:
<select>
<option>Hoi</option>
<option>Dit is</option>
<option>een</option>
<option>vervolgkeuzelijst</option>
</select>
Als je het op deze manier doet, is de teruggegeven waarde gelijk aan dat wat er in het vakje staat. Echter, als je een andere waarde wilt terugsturen, gebruik dan de parameter value=""