Formulieren worden gedefinieerd via het formulier-element. Alle elementen die binnen formulier staan, horen dan bij het betreffende formulier.
<form> … </form>
In het inleidende <formulier> wordt het actie-attribuut verwacht. Hiermee wordt uiteindelijk aangegeven wat er met de formuliergegevens moet gebeuren. Gewoonlijk gaat het hierbij om een PHP-toepassing.
<form methode="post" actie="formulier.php"> … </form>
Zorg ervoor dat het opgegeven bestand daadwerkelijk gevonden kan worden. Je moet dus het juiste pad instellen.
In plaats van een script kan men overigens ook een e-mailadres opgeven.
<form methode="post" actie=mailto:contact@psd-tutorials.de methode="post" enctype="text/plain"> … </form>
In dit geval worden de formuliergegevens per e-mail verzonden. Dat is echter niet bepaald elegant, daarom wordt bijna altijd teruggegrepen naar de scriptversie. Als je echter op dat moment geen script bij de hand hebt, kun je de formulierverzending in noodgevallen ook per e-mail regelen.
Een ander belangrijk attribuut voor het formulier-element is methode. Hiermee bepaal je de HTTP-overdrachtsmethode voor het verzenden van de formulierinhoud. Er zijn twee verschillende varianten beschikbaar.
• post = De formuliergegevens worden hier in twee stappen naar het opgegeven adres gestuurd. Eerst wordt het opgegeven adres door de browser gecontacteerd. Als dat succesvol is, worden de formuliergegevens naar het script gestuurd.
• get = Bij deze methode worden de formuliergegevens toegevoegd aan het einde van de URL die aan het actie-attribuut is toegewezen. De formuliergegevens zijn dus onder andere zichtbaar in de adresbalk van de browser.
Natuurlijk is de vraag welke van deze beide varianten je moet kiezen voor het verzenden van de formuliergegevens. In principe kun je beide gebruiken. Vooral echter wanneer het gaat om grote hoeveelheden gegevens en het uploaden van bestanden naar de server, is het raadzaam om de post te gebruiken.
Eenvoudige formulier velden
Tot nu toe is slechts de buitenste structuur van het formulier gedefinieerd. In de browser is het formulier zelf echter nog niet zichtbaar.
<form methode="post" actie="formulier.php"> … </form>
Nu is het dus zaak om het formulier te vullen met inhoud/leven.
Het meest voorkomende type veld is een enkelregelig invoerveld. Deze worden bijvoorbeeld gebruikt om namen, voornamen en e-mailadressen op te vragen. Enkelregelige invoervelden worden als volgt gedefinieerd:
<input type="text" naam="voornaam" />
Aan het input-element wordt de attribuut-waarde-combinatie type="text" toegewezen. Bovendien moet aan elk invoerveld een interne identifier worden gegeven. Deze identifier moet uniek zijn in het document. Het is met name interessant bij de verwerking van de formuliergegevens met behulp van een script. Gebruik geen spaties en speciale tekens in de identifier.
Als je het resultaat in de browser bekijkt, levert dit het volgende beeld op:
Het ziet er nog niet bijzonder spectaculair uit. Maar als je in het tekstveld klikt, zul je merken dat je daar al invoer kunt plaatsen.
Om ervoor te zorgen dat bezoekers weten wat ze in het veld moeten invoeren, ontbreekt natuurlijk nog een label.
Voornaam: <input type="text" naam="voornaam" />
Ook hier levert een blik in de browser weer het gewenste resultaat op.
Met het attribuut grootte kun je de breedte van het veld bepalen.
Voornaam: <input type="text" naam="voornaam" grootte="30" /> <br /> Postcode: <input type="text" naam="postcode" grootte="5" />
Het grootte-attribuut wijst de gewenste veldbreedte toe.
Bij een waarde van 5 komen er precies vijf tekens overeen. In dit verband is ook het attribuut maxlengte interessant. Hiermee wordt de maximale toegestane lengte van tekens aangegeven die in het veld mogen worden ingevoerd. Hier is opnieuw een voorbeeld:
Voornaam: <input type="text" naam="voornaam" grootte="30" maxlengte="40" />
Als de waarde die is opgegeven bij maxlengte groter is dan die van grootte, zal er automatisch in het veld worden gescrolld bij langere invoer.
Met het attribuut waarde kun je een standaardwaarde voor het veld instellen.
Voornaam: <input type="text" name="voornaam" value="Jouw Naam" />
De aan de value toegewezen waarde wordt gezien als standaardwaarde in het veld.
Gebruikers kunnen deze standaardwaarde verwijderen.
Je kunt overigens voorkomen dat waarden uit velden worden verwijderd. Hiervoor definieer je een invoerveld dat in feite geen invoerveld meer is. Dergelijke velden worden vaak gebruikt voor weergavedoeleinden. Dit kan bijvoorbeeld interessant zijn om waarden weer te geven die zijn bepaald via een script. Denk hierbij aan een rekenmachine. Ook kun je een veld handmatig voorzien van een tekst die door bezoekers niet kan worden gewijzigd. (Opmerking: het Euro-teken wordt helaas niet correct weergegeven in de PDF-weergave).
<input name="prijs" type="text" value="€ 699.-" readonly />
Om een veld alleen-lezen te maken, wijs je het attribuut readonly toe. Hier weer een kijkje naar het resultaat:
De vooringestelde tekst is direct zichtbaar. Deze tekst kan echter niet worden verwijderd.
Wachtwoordvelden definiëren
Natuurlijk kennen jullie wachtwoordvelden. Overal waar je je registreert, moet je een wachtwoord opgeven. (Gewoonlijk moet je het zelfs twee keer invoeren).
De gegevens die in het invoerveld worden ingevoerd, zijn niet zichtbaar maar worden automatisch door de browser vervangen door sterren/punten. Het voordeel van deze mogelijkheid is dat mensen die misschien over je schouder meekijken bij het invoeren van het wachtwoord, het wachtwoord niet kunnen ontcijferen. Het is echter een misvatting dat wachtwoordvelden automatisch veilig zijn. In werkelijkheid worden de wachtwoorden in normale HTTP-verbindingen in platte tekst verzonden bij het verzenden van het formulier.
Wachtwoordvelden worden als volgt gedefinieerd:
<input type="password" name="wachtwoord" />
Het type-attribuut krijgt de waarde wachtwoord toegewezen. Ook hier weer een kijkje naar het resultaat.
Als je hier iets typt, wordt dit direct onleesbaar gemaakt door de browsers tijdens het typen.
