HTML/Basiscursus/Formulieren
Uit Wikibooks
|
|
|
Inhoudsopgave
|
Inhoud |
[bewerken] HTML Elementen toepassen
Voor het maken van een formulier in HTML kan je diverse tags gebruiken. Het belangrijkste is de form tag. Deze defineert een formulier. Een standaardformulier ziet er zo uit:
HTML-code:Basis formulier
<form action="formhandler.php" method="post"> Hier komen de formuliervelden </form>
[bewerken] Knoppen
Voor knoppen kan je het input of het button element gebruiken. Je hebt drie soorten knoppen: submit (instuurknop), reset (knop die alles wist) en een normale knop, die standaard geen actie heeft. Je kan het op de volgende manieren doen.
HTML-code:Knoppen
<form ... > <button type="submit">Insturen</button> of <input type="submit" value="Insturen" /> <button type="reset">Wissen</button> of <input type="reset" value="Wissen" /> <button type="button">Geen actie</button> of <input type="button" value="Geen actie" /> </form>
[bewerken] Tekstvak
Een tekstvak wordt ook op wikipedia gebruikt, bijvoorbeeld om een artikel te bewerken. Een tekstvak heeft een eigen blokelement, textarea.
HTML-code:Tekstvak
<textarea cols="40" rows="4">Hier kan je zelf een tekstje zetten wat standaard getoond wordt</textarea>
[bewerken] Selectievakjes en keuzerondjes
Deze twee soorten worden gemaakt met het input element. Je kan meedere keuzerondjes en selectievakjes bij elkaar groeperen door ze dezelfde naam mee te geven. Ook visueel kan je ze ordenen, met behulp van het fieldset element. Een naam meegeven hieraan kan met het legend element. In de volgende voorbeelden worden de twee soorten invoervelden gebruikt, en ook hoe je deze kan sorteren.
HTML-code:Selectievakjes
<fieldset><legend>Maak uw keuze</legend> <input type="checkbox" name="fruit" value="Appel" />Appel <input type="checkbox" name="fruit" value="Peer" />Peer <input type="checkbox" name="fruit" value="Banaan" />Banaan </fieldset>
HTML-code:Keuzerondjes
<fieldset><legend>Maak uw keuze</legend> <input type="radio" name="fruit" value="Appel" />Appel <input type="radio" name="fruit" value="Peer" />Peer <input type="radio" name="fruit" value="Banaan" />Banaan </fieldset>
[bewerken] Keuzelijst
Met de introductie van HTML 4.0 is ook hier een sortering in door te voeren, die echter zeer weinig wordt gebruikt. Het maken van een een selectiebox is simpel. Je gebruikt de elementen select (om de lijst te maken) en option (om een optie te maken). Eventueel kan je hierbij ook nog het element optgroup gebruiken.
HTML-code:Keuzelijst
<select name="groentefruit"> <option value="">Maak uw keuze</option> <optgroup label="Fruit"> <option value="appel">Appel</option> <option value="banaan">Banaan</option> <option value="citroen">Citroen</option> </optgroup><optgroup label="Groente"> <option value="Komkommer">Komkommer</option> <option value="Wortel">Wortel</option> <option value="Ui">Ui</option> </optgroup></select>
[bewerken] Standaard veld, Wachtwoord veld, upload veld en verborgen veld
Deze drie typen velden maken allemaal gebruik van het input element. De het laatste type is een verborgen waarde. Deze wordt niet aan de gebruiker getoond, maar wel met het forumulier mee gezonden. Dit kan je gebruiken om een waarde mee te zenden die de gebruiker niet hoeft aan te passen (bijvoorbeeld een keuze die al in een ander deel van het forumulier is gemaakt) of een waarde die de gebruiker niet weet (bijvoorbeeld een nummer waar het script, dat het formulier verwerkt, moet weten).
HTML-code:Standaard, Wachtwoord, Upload, Verborgen velden
<input type="text" name="text" value="Standaard waarde" /> <input type="password" name="password" /> <input type="file" name="file" /> <input type="hidden" name="hidden value" value="Deze waarde zie je niet, maar het wordt wel met het formulier mee gezonden" />
[bewerken] Een voorbeeld van een formulier
Nu de meeste code voor een formulier behandeld is nog geheel voorbeeld: een formulier dat je kan invullen om aan te geven welk tijdschrijft je je wilt abonneren.
HTML-code:Standaard, Wachtwoord, Upload, Verborgen velden
<form action="script.php" method="post"> Naam:<br /> <input type="text" name="naam" /><br /><br /> Adres:<br /> <textarea cols="20" rows="3"></textarea><br /><br /> Geslacht:<br /> <input type="radio" name="geslacht" value="man" />Man <input type="radio" name="geslacht" value="vrouw" />Vrouw<br /><br /> Op welke tijdschriften wilt u zich abonneren?<br /> <input type="checkbox" name="tijdschrijf_1" value="Donald Duck" />Donald Duck<br /> <input type="checkbox" name="tijdschrijf_2" value="Kijk" />Kijk<br /> <input type="checkbox" name="tijdschrijf_3" value="Zo zit dat" />Zo zit dat<br /> <input type="checkbox" name="tijdschrijf_4" value="Tina" />Tina<br /><br /> <input type="submit" value="Verzenden" /> <input type="reset" value="Leegmaken" /> </form>
 |
Deze pagina is vrijgegeven onder de GNU Free Documentation License (GFDL) en nog niet onder CC-BY-SA. Klik hier voor meer informatie.
Wilt u deze tekst gebruiken onder de Creative Commons CC-BY-SA licentie? |
