Maak formulieren in HTML
Je zit ze op verschillende sites... formulieren. Je ziet ze op Bjarno.be in de vorm van plaats-je-reactie, op verschillende fora of anders sites zie je ze regelmatig om in te loggen. Zoekmachine's zoals google of yahoo gebruiken het voornamelijk om zoektermen in te laten geven.Formulieren zijn in HTML heel eenvoudig toe te passen. Even een klein voorbeeldje van een formulier met een tekstbox en een button:
<form method="post" action="">
Artikelid:<br />
<input type="text" name="artikelid" /><br />
<input type="submit" name="submit" value="Zoek op" />
</form>
Een formuliergedeelte starten
Om een formulier te starten moet je het in bepaalde tags zetten. Dit is altijd de FORM-tag. Meestal heeft deze twee attributen:<form method="post" action="" />
Je moet zelf bepalen wat het beste en het veiligste werkt. Voor inlog-formulieren (of andere grote formulieren) werkt POST het beste. GET is handig voor kleine aanpassingen aan de pagina, of bijvoorbeeld welke subpagina er aangeroepen moet worden.
Het voordeel van GET is natuurlijk dat je de url kan kopieeëren met deze waardes. Bij POST is dat minder het geval.
Elementen van een form
Een form bestaat uit verschillende elementen. Checkboxen, radio buttons, tekstvelden, textarea's, selects en buttons zijn de meest gebruikte.Checkboxen
Voorbeeld:Checkbox
<input type="checkbox" name="somecheckbox" /> Checkbox
Radio buttons
Voorbeeld:Jonger dan achtien jaar
Ouder dan achtien jaar of achtien jaar
<input type="radio" name="radiobutton" value="jonger" /> Jonger dan achtien jaar<br />
<input type="radio" name="radiobutton" value="ouder" /> Ouder dan achtien jaar of achtien jaar
Tekstvelden
Voorbeeld:<input type="text" name="username" />
Je kan ook wachtwoorden gebruiken:
Voorbeeld:
<input type="password" name="password" />
Textarea's
Textarea's (of tekstgebieden) zijn ongeveer hetzelfde als tekstvelden. Maar tekstgebieden gaan ook verticaal.Voorbeeld:
<textarea cols="65" rows="5" name="">inhoud</textarea>
Select
Met Select kan je een grote lijst laten zien, die enkel zichtbaar word bij het klikken.Voorbeeld:
<select name="land">
<option value="Belgie">België</option>
<option value="Nederland">Nederland</option>
<option value="Frankrijk">Frankrijk</option>
<option value="Duitsland">Duitsland</option>
<option value="EU">Ander EU-land</option>
<option value="noEU">Niet EU-land</option>
</select>
Submit
Met Submit kan je eenvoudig een formulier verzenden.Voorbeeld:
<input type="submit" value="Verzend" name="submit" />
Een voorbeeldformulier
Dit formulier is een registratieformulier voor een speelgoedfabrikant:| Gebruikersnaam: | |
| Wachtwoord: | |
| Wachtwoord (herhalen): | |
| E-mailadres: | |
| Reden van registratie: | |
| Geslacht: | Man Vrouw |
| Ik ben geïntereseerd in... | |
| Nieuwsbrief: | Stuur mij mails van de nieuwsbrief |
| Verstuur het formulier: |
<form method="get" action="#">
<table><tbody>
<tr><td>Gebruikersnaam:</td><td><input type="text" name="username" /></td></tr>
<tr><td>Wachtwoord:</td><td><input type="password" name="password1" /></td></tr>
<tr><td>Wachtwoord (herhalen):</td><td><input type="password" name="password2" /></td></tr>
<tr><td>E-mailadres:</td><td><input type="text" name="email" /></td></tr>
<tr><td>Reden van registratie:</td><td><textarea name="reason" cols="25" rows="3"></textarea></td></tr>
<tr><td>Geslacht:</td><td><input type="radio" name="geslacht" value="m" />Man<br />
<input type="radio" name="geslacht" value="f" />Vrouw
</td></tr>
<tr><td>Ik ben geïntereseerd in...</td><td>
<select name="intresse">
<option value="bouwdozen">Bouwdozen</option>
<option value="computergames">Computerspellen</option>
<option value="poppen">De poppenspeelset</option>
<option value="kleurplaten">Kleurplaten voor kinderen</option>
</select>
</td></tr>
<tr><td>Nieuwsbrief:</td><td><input type="checkbox" name="newsletter" />Stuur mij mails van de nieuwsbrief</td></tr>
<tr><td>Verstuur het formulier:</td><td><input type="submit" name="verzend" value="Verzend" />
</td></tr>
</tbody></table>
</form>
Reactie's op Maak formulieren in HTML
| timo777 | 17/08/2010 14:11.20 | |
| Waar verzend hij het naar? Timo | ||
| Bjarno | 18/08/2010 20:38.18 | |
| Blijkbaar vergeten te vermelden ;) Als je een formulier maakt heb je deze code: <form action="#"> Op de plaats van # moet je vervolgens de locatie opgeven van het document dat die pagina verwerkt. Hiervoor kan je een php-tutorial volgen :) | ||
| Maarten | 31/10/2010 14:49.58 | |
| Ik ging even een paar tutorials doen omdat nick dat zij. (Ik vroeg Nick om te helpen met een code en hij zij dat ik even hier moest kijken) en ik snap iets niet. Hoe kan ik dit laten verzenden naar bijv. mijn e-mail? | ||
