Werken met formulieren
| Categorie | HTML |
| Geplaatst | 28-04-2006 |
| Laatste aanpassing | 28-07-2010 |
Onmisbaar voor de moderne, dynamische website: HTML-formulieren. Je gebruikt ze iedere dag: op forums of met contactformulieren bijvoorbeeld. In dit artikel leer je de verschillende HTML-codes van deze formulieren.
Inleiding
Vaak is het HTML-formulier maar één kant van het verhaal: vaak wordt er nog een ServerSide script gebruikt (zoals PHP) om de informatie te verwerken. In het artikel PHP mail kun je lezen hoe je de informatie uit een formulier als een email verstuurd.
HTML-codes
form
Een HTML-formulier staat altijd tussen de form-tags in. Zo dus:
Verder moet je in de form-tag nog aangeven waar de ingevulde informatie naartoe gestuurd moet worden. Meestal is dit een ServerSide-script, zoals bijvoorbeeld PHP, ASP of CGI. Dit kun je doen op de volgende manier:
Achter method kun je nog de manier van verzenden opgeven. Hierbij kun je kiezen uit post en get. Voor de meeste contactformulieren en fora, waarbij informatie moet worden verzonden, is post de beste en veiligste manier.
input
Het meest gebruikte onderdeel van een formulier is natuurlijk de standaard textbox. Die kun je invoegen
met de volgende code:
De volgende waaren kunnen bij type ingevuld worden:
- password: hetzelfde als text, hierbij worden echter alle letters vervangen door sterretjes.
- radio: keuzerondjes. Bij verschillende radio's met dezelfde naam kan er maar één aangevinkt worden.
- checkbox: een aankruisvierkantje.
- file: hiermee kunnen bestanden upgeload worden. Er zit dus automatisch een Bladeren-knop naast het formulier. Wil je dit gebruiken, dan moet je in de form-tag de volgende optie's gebruiken: enctype="multipart/form-data" en method="post".
- submit: de verzendknop. De tekst op de knop wordt bepaald door value="tekst".
- reset: een resetknop. De tekst op de knop wordt bepaald door value="tekst".
Overige optie's
De volgende optie's kunnen nog toegevoegd worden aan de input-tag:
- name="": geeft de naam van een input aan. Als bij radio meerdere radio's dezelfde naam meekrijgen, kan er maar één aangekruist worden.
- value="": geeft bij een text of password box aan wat er standaard in staat als de pagina geladen wordt. Bij een checkbox of radio geeft het aan welke informatie doorgestuurd moet worden.
- size="": breedte van een object in tekens.
- maxlength="": het aantal tekens dat maximaal ingevoerd kan worden.
textarea
Dan hebben we natuurlijk nog het textveld, die een heel eigen tag heeft gekregen: textarea.
Tussen de twee textarea-tags kun je de tekst opgeven die standaard in de textarea moet staan als je de pagina laad. Cols is om het aantal kolommen in de breedte op te geven, en rows voor het aantal rijen in de hoogte.
select
Met select kun je een keuzelijst invoegen. De volgende code kun je hiervoor
gebruiken:
Bij value kun je weer opgeven wat er doorgestuurd moet worden als de optie geselecteerd is. Achter elke option-tag kun je opgeven welke tekst in de lijst moet komen te staan. Je ziet ook dat we bij de eerste optie selected hebben toegevoegd. Dit zorgt ervoor dat deze optie standaard geselecteerd wordt.
advertentie
Voorbeelden
Misschien kunnen de volgende voorbeelden het hele theoriegedeelte wat duidelijker maken.
Radio formulier
Textarea formulier
Select formulier
Conclusie
Met deze informatie kun je al een heel eind komen. Nu moet je alleen nog een script hebben dat de informatie verwerkt. Kijk daarvoor eens bij onze PHP-artikelen.
