Les 9: Formulieren - Simon de Vries - www.simondevries.com » Home Nederlands » Programmeren » HTML » Cursus HTML

Hoe werken formulieren?

Een formulier maak je altijd met de form-tag. Die tag heeft een aantal attributen:

Action: met het action-attribuut geef je aan naar welke URL het formulier naar verzonden moet worden

Method: met het method-attribuut geef je aan op welke manier de gegevens moeten worden verzonden. Je kunt kiezen uit get of post. Met 'get' worden ze gewoon via de URL meegestuurd (url.php?var1=val1&var2=val2&var3=val3&...). Bij 'post' worden ze verborgen, via de HTTP Headers meegestuurd.

Target: met het target-attribuut kun je aangeven naar welk venster het formulier moet worden verzonden

<form action="URL">
    Hier komt de inhoud van het formulier.
</form>

Invoervelden

In en formulier kun je invoervelden (inputfields) zetten. Dat gaat met de <input>-tag (input = invoer). Er zijn een heleboel soorten invoervelden. Je geeft aan wat voor soort invoerveld het is met het type-attribuut. Hier zie je alle soorten invoervelden op een rijtje:

Voorbeeld-HTML-code:	Resultaat:	Beschrijving
<input type="button" value="Knop" />		Een knop (button), waar je op kunt klikken. Je kunt er bijvoorbeeld een Javascript-code achter plaatsen.
<input type="checkbox" /> Dit is een checkbox	Dit is een checkbox Dit is ook een checkbox Dit is ook een checkbox	Een checkbox (een vakje die je kunt aan- en uitvinken). Je kunt aangeven dat is standaard aangevinkt moet zijn door het attribuut `checked="checked"` erbij te plaatsen. Je kunt meerdere checkboxen tegelijk aangevinkt hebben.
<input type="file" />		Hiermee kun je een bestand selecteren, die vervolgens kan worden geüpload.
<input type="hidden" />		Een hidden (verborgen) invoerveld kun je niet zien, maar is bedoeld om variabelen gewoon mee te sturen, zonder dat de gebruiker ze kan veranderen
<input type="image" src="img/smiley.gif" />		Met een Image-invoerveld kun je een plaatje als verzend-knop gebruiken
<input type="password" value="password" />		Dit is een veld waar je wachtwoorden in kunt voeren. De wachtwoorden zullen worden verborgen door sterretjes (*, asteriks)
<input type="radio" />	Dit is een radio-knop. Dit is ook een radio-knop. Dit is ook een radio-knop.	Een radio-knop is bedoeld om 1 keuze te maken. Je kunt daarom maar 1 radio-knop per groep tegelijk aan hebben
<input type="reset" value="Reset alle velden" />		Met een Reset-knop kun je de gebruiker de mogelijkheid geven om alle velden die hij heeft ingevuld weer terug te zetten zoals ze in het begin stonden
<input type="submit" value="Verzenden!" />		Met een submit-knop kan de gebruiker het formulier verzenden
<input type="text" value="Hier kun je in schrijven" />		In een tekstvak kan de gebruiker dingen schrijven.

Voorbeeld-HTML-code:

Resultaat:

Beschrijving

<input type="button"
value="Knop" />

Een knop (button), waar je op kunt klikken. Je kunt er bijvoorbeeld een Javascript-code achter plaatsen.

<input type="checkbox" />
Dit is een checkbox

Dit is een checkbox
Dit is ook een checkbox
Dit is ook een checkbox

Een checkbox (een vakje die je kunt aan- en uitvinken). Je kunt aangeven dat is standaard aangevinkt moet zijn door het attribuut checked="checked" erbij te plaatsen. Je kunt meerdere checkboxen tegelijk aangevinkt hebben.

<input type="file" />

Hiermee kun je een bestand selecteren, die vervolgens kan worden geüpload.

<input type="hidden" />

Een hidden (verborgen) invoerveld kun je niet zien, maar is bedoeld om variabelen gewoon mee te sturen, zonder dat de gebruiker ze kan veranderen

<input type="image"
src="img/smiley.gif" />

Met een Image-invoerveld kun je een plaatje als verzend-knop gebruiken

<input type="password"
value="password" />

Dit is een veld waar je wachtwoorden in kunt voeren. De wachtwoorden zullen worden verborgen door sterretjes (*, asteriks)

<input type="radio" />

Dit is een radio-knop.
Dit is ook een radio-knop.
Dit is ook een radio-knop.

Een radio-knop is bedoeld om 1 keuze te maken. Je kunt daarom maar 1 radio-knop per groep tegelijk aan hebben

<input type="reset"
value="Reset alle velden" />

Met een Reset-knop kun je de gebruiker de mogelijkheid geven om alle velden die hij heeft ingevuld weer terug te zetten zoals ze in het begin stonden

<input type="submit"
value="Verzenden!" />

Met een submit-knop kan de gebruiker het formulier verzenden

<input type="text"
value="Hier kun je in
schrijven" />

In een tekstvak kan de gebruiker dingen schrijven.

Andere invoerelementen

Er zijn ook een aantal andere speciale invoerelementen, die niet via het <input>-element gaan:

Voorbeeld-HTML-code:	Resultaat:	Beschrijving
<textarea> Tekst </textarea>	Tekst	In een textarea kun je meerdere regels tekst schrijven
<input type="checkbox" id="checkbox_1" /> <label for="checkbox_1"> Dit is een checkbox </label>	Dit is een checkbox	Met een label kun je een tekst aan een ander invoerelement koppelen (als je op de tekst klikt, klik je ook op het invoerelement)
<fieldset> <legend> Titel </legend> Formulier </fieldset>	TitelFormulier	Met fieldset kun je een frame om de elementen maken, en met legend kun je dat frame een titel geven
<select> <optgroup label="Basiskleuren"> <option>Cyaan</option> <option>Geel</option> <option>Magenta</option> </optgroup> <optgroup label="Andere Kleuren"> <option>Groen</option> <option>Paars</option> <option>Oranje</option> </optgroup> </select>		Met select kun je een uitschuiflijstje maken. Met optgroup kun je de items groeperen, en met option voeg je een nieuw item toe.

Voorbeeld-HTML-code:

Resultaat:

Beschrijving

<textarea>
    Tekst
</textarea>

In een textarea kun je meerdere regels tekst schrijven

<input type="checkbox"
id="checkbox_1" />
<label for="checkbox_1">
Dit is een checkbox
</label>

Dit is een checkbox

Met een label kun je een tekst aan een ander invoerelement koppelen (als je op de tekst klikt, klik je ook op het invoerelement)

<fieldset>
<legend>
Titel
</legend>
Formulier
</fieldset>

TitelFormulier

Met fieldset kun je een frame om de elementen maken, en met legend kun je dat frame een titel geven

<select>
    <optgroup label="Basiskleuren">
        <option>Cyaan</option>
        <option>Geel</option>
        <option>Magenta</option>
    </optgroup>

    <optgroup label="Andere Kleuren">
        <option>Groen</option>
        <option>Paars</option>
        <option>Oranje</option>
    </optgroup>
</select>

Met select kun je een uitschuiflijstje maken. Met optgroup kun je de items groeperen, en met option voeg je een nieuw item toe.

Voorbeeldformulier:

Ik ga je nu een voorbeeldformulier waar alles wat je hierboven gehad hebt nog een keer terugkomt in een voorbeeldje:

<form action="formtest.php" method="post">
    <fieldset>
        <legend>Persoonlijke Informatie:</legend>
        <table border="1" cellspacing="0">
            <tr>
                <td align="right">
                    Naam:
                </td>
                <td>
                    <input type="text" name="naam">
                </td>
            </tr>
            <tr>
                <td align="right" class="td2">
                    Geslacht:
                </td>
                <td class="td2">
                    <input type="radio" name="geslacht" id="geslacht_onbekend" value="onbekend" checked="checked"> <label for="geslacht_onbekend">Onbekend</label><br />
                    <input type="radio" name="geslacht" id="geslacht_man" value="man"> <label for="geslacht_man">Man</label><br />
                    <input type="radio" name="geslacht" id="geslacht_vrouw" value="vrouw"> <label for="geslacht_vrouw">Vrouw</label>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Lievelingseten:
                </td>
                <td>
                    <select name="lievelingseten">
                        <optgroup label="Groente">
                            <option value="sla">Sla</option>
                            <option value="spinazie">Spinazie</option>
                        </optgroup>
                        
                        <optgroup label="Snoep">
                            <option value="drop">Drop</option>
                            <option value="koek">Koek</option>
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td2" colspan="2" align="center">
                    <input type="checkbox" name="nederland" id="nederland" value="ja"> <label for="nederland">Ik woon in Nederland</label>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Iets over jezelf:
                </td>
                <td>
                    <textarea name="over_jezelf">Type hier iets over jezelf.</textarea>
                </td>
            </tr>
            <tr>
                <td class="td2" align="right">
                    <input type="reset" value="Formulier Leegmaken" />
                </td>
                <td class="td2">
                    <input type="submit" value="Formulier Verzenden" />
                </td>
            </tr>
        </table>
    </fieldset>
</form>

Menu

Cursus HTML - Les 9: Formulieren

Hoe werken formulieren?

Invoervelden

Andere invoerelementen

Voorbeeldformulier:

Info

Contact

Met Dank Aan:

Naam:
Geslacht:	Onbekend Man Vrouw
Lievelingseten:
Ik woon in Nederland
Iets over jezelf:	Type hier iets over jezelf.