Formulieren in HTML/CSS

Formulieren in HTML/CSS

formulieren maken

Met een formulier kan informatie worden ingevoerd en verzonden door een bezoeker van je website. Denk bijvoorbeeld aan de voor- en achternaam, het e-mailadres en adresgegevens. Formulieren worden gebruikt voor allerlei doeleinden, zoals het aanmelden voor een nieuwsbrief of forum, het plaatsen van een bestelling of als contactformulier. In deze les bekijken we hoe je een formulier kunt maken in HTML.

De <form> tag

Als je een formulier wilt opnemen in een pagina dan begin je met de <form> tag. Met deze tag vertel je de browser dat er een formulier volgt en geef je aan wat er met de gegevens in het formulier moet gebeuren. In de voorbeelden op deze pagina sturen we de ingevoerde gegevens naar een e-mailadres. Er zijn echter ook veel scripts waarmee je formulieren vaak een stuk beter kunt verwerken. Voor websites waar je zulke scripts kunt vinden, verwijs ik je naar de pagina met PHP scripts.

De begintag van een formulier is:

<form method="post" action="mailto:jouwemail@adres.nl">

In de code plaats je je eigen e-mailadres direct achter mailto: in de code, dus zonder een spatie ertussen. Met method="post" geven we de manier aan waarop de data moet worden verzonden. Als we klaar zijn met het maken van het formulier dan sluiten we altijd weer af met de eindtag </form>.

Opdrachten

<input> voor tekstvelden

Met de <input> tag kunnen we een tekstveld maken in een formulier. Bijvoorbeeld:

Bovenkant formulier

Vul je voornaam in:

Onderkant formulier

 

De code die we hiervoor gebruiken is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Vul je voornaam in:</em>
< input type="text" size="20" maxlength="40" name="voornaam">
< /form>

Als je het veld met je muisknop activeert dan kun je er in typen. De <input> tag heeft de volgende attributen:

  • type: geeft aan wat voor soort input er volgt. Mogelijke waarden zijn bijvoorbeeld: text, submit, en radio.
  • size: de breedte van het veld. Gemeten wordt in spaties.
  • maxlength: het maximum aantal karakters dat ingevoerd mag worden in het veld.
  • name: hiermee geef je het veld een naam, zodat er later naar verwezen kan worden.

    In het voorbeeld hierboven gebruikten we een tekstveld (type="text") met een breedte van 20 en een maximum aantal karakters van 40. We gaven het veld de naam "voornaam" in het name attribuut.

 

Opdracht 2

Het formulier verzenden

Nu moet een bezoeker het formulier nog kunnen verzenden naar ons e-mailadres. Dit doen we door een submit knop toe te voegen. Doorgaans plaats je deze knop aan het einde van de code van het formulier. Om de verzendknop te maken, voegen we type="submit" toe aan een nieuwe <input> tag. Met het value attribuut geef je de tekst aan die op de knop moet komen, bijvoorbeeld "Verzenden" of "Versturen". De code voor de verzendknop wordt als volgt:

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

Nu voegen we de verzendknop toe aan het formulier met het tekstveld dat we hierboven gemaakt hebben:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Vul je voornaam in:</em> <input type="text" size="20" maxlength="40" name="voornaam"><br>
< input type="submit" value="Verzenden">
< /form>

 

Het resultaat ziet er als volgt uit:

Bovenkant formulier

Vul je voornaam in:

Opdracht 3

Als we bezoekers een grotere tekst willen laten invoeren dan kunnen we hiervoor de <textarea> tag gebruiken. Dit kan bijvoorbeeld nuttig zijn als we een bezoeker om commentaar vragen of we hem/haar een vraag willen laten stellen. Een voorbeeld van een textarea:

Bovenkant formulier

Opmerkingen:

Onderkant formulier

 

Met behulp van de attributen rows en cols geven we aan uit hoeveel rijen (de hoogte) en kolommen (de breedte) het tekstvak zal bestaan. Het bovenstaande tekstvak bestaat uit 7 rijen en 25 kolommen en heeft de naam "opmerkingen" gekregen:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Opmerkingen:</em><br>
< textarea rows="7" cols="25" name="opmerkingen"></textarea>
< input type="submit" value="Verzenden">
< /form>

De <textarea> tag moet afgesloten worden met de eindtag: </textarea>. Voor de <input> tag is dit niet noodzakelijk.

Opdracht 4

Radio button

Met een radio button kunnen we een bezoeker een antwoord laten selecteren uit meerdere mogelijkheden. Je bent deze radio buttons ongetwijfeld wel eens tegengekomen op andere websites. Ze worden bijvoorbeeld vaak gebruikt voor een poll of een quiz.

In de code gebruiken we de volgende attributen:

  • type: nu kiezen we voor een radio button en daarom vullen we hier radio in.
  • name: hiermee geven we aan welke radio buttons bij elkaar horen.
  • value: geeft de informatie aan die zal worden verzonden als de bezoeker deze radio button selecteert.

Een voorbeeld van het gebruik van radio buttons:

Bovenkant formulier

Wat voor kleur ogen heb je?
Blauw Bruin Grijs Groen
Draag je een bril?
Ja Nee

Onderkant formulier

 

De code voor deze twee sets radio buttons is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Wat voor kleur ogen heb je?</em><br>
< input type="radio" name="oogkleur" value="blauw">Blauw
< input type="radio" name="oogkleur" value="bruin">Bruin
< input type="radio" name="oogkleur" value="grijs">Grijs
< input type="radio" name="oogkleur" value="groen">Groen<br>
< em>Draag je een bril?</em><br>
< input type="radio" name="bril" value="welbril">Ja
< input type="radio" name="bril" value="geenbril">Nee<br>
< input type="submit" value="Verzenden">
< /form>

Checkbox

De checkbox lijkt op de radio button, maar de check box geeft de bezoeker de mogelijkheid om meerdere opties te selecteren. Verder gebruik je de name en value attributen op dezelfde wijze:

Bovenkant formulier

Wat zijn je favoriete soorten muziek?
Pop Rock House Hip Hop

Onderkant formulier

 

De HTML code voor deze checkboxes is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Wat zijn je favoriete soorten muziek?</em><br>
< input type="checkbox" name="muzieksoort" value="Pop" checked>Pop
< input type="checkbox" name="muzieksoort" value="Rock">Rock
< input type="checkbox" name="muzieksoort" value="House">House
< input type="checkbox" name="muzieksoort" value="Hip Hop">Hip Hop<br>
< input type="submit" value="Verzenden">
< /form>

Valt je iets op in dit voorbeeld? Bij deze checkbox staat al een standaardkeuze aangevinkt. In het vakje voor "Pop" staat al een vinkje. Dit zie je in de code terug: value="Pop" checked. "Checked" geeft aan dat een optie standaard geselecteerd moet worden. Dit kan handig zijn om te gebruiken als je weet dat een groot deel van je bezoekers een bepaalde optie zullen aanvinken. Je kunt checked op dezelfde wijze gebruiken voor de radio buttons.

 

Opdracht 5

 

Drop down list

Een drop down list is een andere manier waarop bezoekers een optie kunnen selecteren. In een drop down lijst gebruiken we de <select> en <option> tags. Zo'n lijst ziet er bijvoorbeeld zo uit:

Bovenkant formulier

Welke film uit deze lijst vind je het beste?
The GodfatherPulp FictionThe Shawshank RedemptionRaiders of the Lost ArkSpartacus

Onderkant formulier

 

De HTML code:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Welke film uit deze lijst vind je het beste?</em><br>
< select name="film">
< option>The Godfather</option>
< option>Pulp Fiction</option>
< option>The Shawshank Redemption</option>
< option>Raiders of the Lost Ark</option>
< option>Spartacus</option>
< /select>
< input type="submit" value="Verzenden">
< /form>

Een lijst met meerdere keuzemogelijkheden

We kunnen ook een lijst maken waarin meerdere mogelijkheden geselecteerd kunnen worden door de bezoekers. We maken daarvoor gebruik van het multiple attribuut. Met het attribuut size kunnen we bepalen hoeveel keuzemogelijkheden er getoond worden voordat de bezoeker moet scrollen in de lijst. Door selected toe te voegen aan een <option> tag kunnen we een standaardkeuze selecteren.

Hier is een voorbeeld van een lijst met meerdere keuzemogelijkheden:

Bovenkant formulier

Selecteer je favoriete drankjes:
BierWijnColaSinasVruchtensapWodkaIJsthee

Onderkant formulier

 

Zoals je ziet worden er vier opties in beeld getoond en wordt "Bier" als een standaardkeuze geselecteerd. Je kunt in de lijst meerdere opties selecteren door de control toest ingedrukt te houden.

De HTML code voor de bovenstaande lijst is:

<form method="post" action="mailto:jouwemail@adres.nl">
< em>Selecteer je favoriete drankjes:</em><br>
< select multiple name="drankjes" size="4">
< option value="bier" selected>Bier</option>
< option value="wijn">Wijn</option>
< option value="cola">Cola</option>
< option value="sinas">Sinas</option>
< option value="vruchtensap">Vruchtensap</option>
< option value="wodka">Wodka</option>
< option value="ijsthee">IJsthee</option>
< /select>
< input type="submit" value="Verzenden">
< /form>

Formulier in html met CSS
Een formulier is een heel byzonder element, omdat er diverse besturingselementen in worden gebruikt die alleen bij formulieren voorkomen.
Een formulier wordt omsloten door de tags <form> en </form> .
Omdat een formulier een belangrijk item is voor de webmakers, zal ik eerst het html gedeelte tonen, zodat u ook kan zien wat css er voor fraais aan kan toevoegen.
Action zorgt voor de verwerking van de formuliergegevens .
Method is de manier hoe het formulier actie neemt.
Er zijn de methode <post en get> Post verstuurd de gegevens van het formulier apart.

Quiz maken

We maken een quiz voor de ICT opleiding.

 

Bedenk zelf de vragen 

Maken van een kleine quiz

Maken van een quiz

  • Het arrangement Formulieren in HTML/CSS is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

    Auteur
    peter doornbosch
    Laatst gewijzigd
    14-03-2017 13:35:40
    Licentie

    Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 3.0 Nederlands licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om:

    • het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
    • het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
    • voor alle doeleinden, inclusief commerciële doeleinden.

    Meer informatie over de CC Naamsvermelding 3.0 Nederland licentie.

    Aanvullende informatie over dit lesmateriaal

    Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

    Eindgebruiker
    leerling/student
    Moeilijkheidsgraad
    gemiddeld

    Bronnen

    Bron Type
    Maken van een kleine quiz
    http://blanken5.home.xs4all.nl/quizMaken/#slide-1     		Link
    Maken van een quiz
    https://blanken5.home.xs4all.nl/quizMaken.html     		Link

  • Downloaden

    Het volledige arrangement is in de onderstaande formaten te downloaden.

    Metadata

    LTI

    Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI koppeling aan te gaan.

    Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.

    Arrangement

    IMSCC package

    Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.

    Voor developers

    Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op onze Developers Wiki.

  • Wikiwijs is een dienst van