Homepage » Tutorials » HTML & CSS » Formulieren maken

Formulieren maken

Info
Door:	Admin	Moeilijkheidsgraad:
Views:	90.810	Reacties:	118(Bekijken)
		Log in om zelf te reageren
		Waardering:	9.8/10 (8 stemmen)

Iedereen die regelmatig op internet surft, kent ze: formulieren. Je vult een aantal gegevens in, en dit wordt, nadat je op een knop druk, verzonden naar de mensen achter die site. Zo'n formulier is best handig. Op deze site vind je er ook eentje: klik maar eens op 'add url'. Na het invullen van dit formulier, worden de gegevens naar ons verzonden. In dit deel van de cursus leren we je zelf zo'n formulier te maken en te gebruiken.

Er zijn grofweg twee typen formulierverwerking:

Server-based: het formulier wordt verzonden via een script op de server
Client-based: het formulier wordt verzonden via e-mail.

Wij zullen ons gaan bezighouden met de client-based formulierverking. Dit is een eenvoudige manier om gegevens van je bezoekers te krijgen. We gaan je in deze les leren hoe je het volgende formulier moet maken:

Daar gaan we...nu jij!

Dit ziet er behoorlijk ingewikkeld uit, maar het valt allemaal best mee. Ten eerste goed nieuws: een formulier bestaat uit puur html, dus nog even geen andere talen zoals javascript of php. Je leert hier dus gewoon weer iets meer van html, er is dus niks 'engs' aan een formulier. Het is geen speciale pagina, maar gewoon een deel van een pagina. Je kunt zoveel formulieren op een pagina zetten als je wilt. Ook is het mogelijk om binnen het formulier allerlei andere html-tags

op te nemen, zoals tabellen, afbeeldingen en tekst.

We beginnen bij het begin: een formulier staat tussen de tags <form> en </form>. Deze twee tags geven het begin en het einde van een formulier aan. In deze tags moet je ook aangeven wat je met het formulier willen doen. In ons geval willen we de gegevens per e-mail opgetsuurd krijgen.Dat doen we zo:

<form method="post" action="mailto:jouwemail@jeprovider.nl">
de rest van het formulier(dat leer je straks)
</form>

Invoerelementen

Het eerste element dat we je leren is een invoerveld voor tekst, zoals je dat ook hierboven in het formulier als eerste tag ziet. Eerst willen we natuurlijk aangeven wat er in dit tekstvlak moet komen te staan, de naam in dit geval. Dit gebeurt gewoon met de bekende <p>-tag. Daarna geven we aan dat er een tekstvlak moet komen:

Je ziet na het tekstvlak een paar belangrijke attributen staan. We bespreken die eerst even:

type="text"
Hiermee geef je aan dat het een tekstvlak is.

size="30"
Hiermee geef je aan dat de lengte van het tekstvlak 30 tekens is.

maxlength="50"
De bezoeker kan maximaal 50 tekens invoeren. Dit aantal hoeft niet gelijk te zijn aan de waarde van het attribuut "size", 30 in dit geval.

name="naam"
Je geeft het tekstvlak een naam, zodat je het bij de verwerking kunt herkennen.

Dat was het tekstvlak. Het tweede formulierelement dat we tegenkomen is het tekstvlak e-mail. dit werkt precies hetzelfde als bij het zojuist behandelde tekstvlak naam. In plaats van name="naam" zou je hier kunnen kiezen voor name="email".

We gaan verder in het formulier en komen zogenaamde checkboxen tegen. Je ziet een lijstje, en je kunt aanvinken wat je wilt. Er zijn meerdere opties mogelijk. Die checkboxen maak je zo:

Ook dit is weer behoorlijk simpel, hier hoeven we verder niets aan uit te leggen.

Dan zie je nog twee cirkeltjes. In tegenstelling tot de checkboxen kun je er hier maar eentje selecteren. Logisch, want je bent man of vrouw, terwijl je bijvoorbeeld wel over websites én cursussen info aan kunt vragen. Als je er slechts één kunt selecteren heet het geen checkbox maar een radiobutton. Alles werkt hetzelfde als bij de checkboxen, alleen in plaats van <input type="checkbox"> zeggen we nu natuurlijk <input type=" radio">, de overige dingen, zoals name, blijven gelden(natuurlijk geef je wel een andere name op)

We zijn er bijna, het laatste invoerelement van ons formulier is een selectielijst. Dit werkt iets anders dan je gewend bent, en wel zo:

<select>
<option>Nederland</option>
<option>België</option>
<option>Duitsland</option>
<option>Frankrijk</option>
</select>

Verder kun je hier nog in het element <select> de size invoeren. Voer je die niet in, dan krijg je een selectielijst. Zet je hem bijvoorbeeld op 3, <select name="land" size="3"> dan is het geen dropdown menu, maar een schuifmenuutje.

Dan zie je verder nog een groot leeg vled waar de bezoeker teksten kan invoeren. Dat noemen we een textarea. Je kunt bij een textarea de hoogte opgeven in rows en de breedte in cols. Verder geef je hem een naam met "name", bijvoorbeeld de naam jouwopmerkingen. Ons veld ziet er dus zo uit in de html:

We zijn zover: het kan verzonden worden. Daarvoor hebben we twee knoppen: Verzenden( submit) en Wissen( reset). De betekenis hiervan snap je natuurlijk wel. De broncode hiervan ziet er zo uit.

De Value mag je zelf bedenken. Dit zijn natuurlijk de meest logische, maar in principe kun je erin zetten wat je wilt. De value is de tekst die op de knop verschijnt.

Verder nog één tip: het beste kun je ook het volgende nog in de begintag <form> opnemen:

enctype="text/plain"

Dan wordt het totaal dus:

Het is een kleinigheidje, maar het zorgt er wel voor dat het een beetje fatsoenlijk leesbaar op je mail binnenkomt.

«I-frames Metatags »

118 reacties
Peck	Geplaatst op 16-05-2007 om 12:53
Moderator	Ok, goed dan. Maar met een php-formulier komt het ook binnen via e-mail hoor! Het is gewoon vele makkelijker, maarja je doet wat je wil natuurlijk.
stefanievd	Geplaatst op 16-05-2007 om 08:15
Regular	Ik heb ook gewoon internet explorer 7.0, Het is wel voor een bedrijf maar het is via een website van een klant dus niet voor een officiele pagina dus dan is het makkelijker als de informatie binnen komt via de e-mail. Het is voor me vader en anders snapt ie het niet snap je. krijg nou wat haha ik probeer het nog een keer uit en het werkt wel wat raar. Maar in iedergeval bedankt
Peck	Geplaatst op 15-05-2007 om 19:59
Moderator	Dan snap ik het niet goed, bij mij werkt het met jouw code zowel in FireFox als in Internet Explorer 7.0. Welke browser gebruik jij? Ik zie dat het formulier voor een bedrijf bestemd is, dus misschien is het geen slecht idee om een PHP mailformulier te gebruiken; geen last meer van alle mailprogramma toestanden etc. Op "verzenden" klikken, en de mail wordt wel degelijk verzonden.
stefanievd	Geplaatst op 15-05-2007 om 19:17
Regular	Dit is mijn code van mijn hele formulier. Ik heb alles 10 keer gecontroleerd maar ik kom er niet uit. <form name="form1" method="post" action="mailto:miss_stef190@hotmail.com" enctype="text/plain"> <pre> Bedrijfsnaam: <input type="text" name="bedrijfsnaam"> <input type="radio" name="title" value="dhr">Dhr. <input type="radio" name="title" value="mevr">Mevr. Contactpersoon: <input type="text" name="contactpersoon"> Adres: <input type="text" name="Adres"> Huisnummer: <input type="text" name="huisnummer"> Woonplaats: <input type="text" name="woonplaats"> PC: <input type="text" name="pc" name="postcode" size="4" maxlength="4"> <input type="text" name="pc" name="postcode" size="2" maxlength="2"> Telefoonnummer: <input type="text" name="telefoonnummer"> Telefoonnummer mobiel: <input type="text" name="mobiel"> Voorkeur voor tijd contactopname: <input type="text" name="tijd" name="postcode" size="2" maxlength="2">:<input type="text" name="tijd" name="postcode" size="2" maxlength="2"> uur </pre> <br> <br> <strong>Welke informatie wilt u aanvragen?</strong><br> <br> <input type="checkbox" name="Koop">Koop<br> <input type="checkbox" name="Leasing">Leasing<br> <input type="checkbox" name="financiering">Financiering<br> <input type="checkbox" name="Bedrijfswageninrichting">Bedrijfswageninrichting<br> <input type="checkbox" name="Accesoires">Accesoires<br> <input type="checkbox" name="Onderhoud">Onderhoud<br> <input type="checkbox" name="Schadereparatie">Schadereparatie<br> <input type="checkbox" name="Verhuur">Verhuur<br> <br> <br> <strong>Opmerking:<br></strong> <textarea name="opmerking" cols="40" rows="10"></textarea> <br> <br> <img src="ford.JPG"><br> <br> <br> <input type="Submit" value="Verstuur Formulier">
Peck	Geplaatst op 14-05-2007 om 21:43
Moderator	Ben je zeker dat er in de form-tag 'method="post"' �n 'enctype="text/plain"'? Want dan zou het goed moeten gaan, je bent waarschijnlijk ��n van twee voorgaande dingen vergeten. Werkt het dan nog niet, post dan even de code van je form hier.

Pagina 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...

Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be