Formulieren

FORM  INPUT  SELECT  OPTION  TEXTAREA

Met een formulier is het mogelijk om bijvoorbeeld contactformulieren of enquetes te maken en deze te verzenden. Een formulier kan ontzettend veel verschillende soorten invoermogelijkheden en verzendopties hebben. Op deze pagina staan ze uitgelegd.

FORM
Met het FORM element kan je aangeven dat een formulier begint. Je opent FORM met <FORM> en je sluit FORM met </FORM>. Het afsluiten van een formulier doe je helemaal aan het einde van een formulier. In de eerste tag van FORM komen de attributen. De onderstaande attributen behoren dus in dit element:<FORM>.

  • NAME
    Met het NAME attribuut kan er een naam worden gegeven aan een formulier zodat deze makkelijker te onderscheiden zijn.
    <FORM NAME="waarde">

  • METHOD
    Met dit attribuut ga je aangeven hoe de informatie uit het formulier verzonden moet worden. Er zijn hier 2 verschillende manieren voor. Deze lijken op elkaar en het maakt ook niet echt uit welke je gebruikt. De 2 manieren zijn de GET en de POST manier. Met GET wordt de informatie in de URL gestopt en verzonden, bij POST is dit niet zichtbaar.
    <FORM METHOD="post">

  • ACTION
    Met het ACTION attribuut ga je aangeven waar de informatie uit het formulier naar toe moet worden verzonden. Er zijn 2 soorten waar je de formulieren naar toe kan verzenden.
    • Naar een andere pagina of een website. Dus naar een URL De waarde is nu ACTION="pagina2.html".
    • Naar een e-mail adres. Dan wordt het de volgende waarde: ACTION="mailto: naam@domein.nl"
    <FORM ACTION="waarde">

INPUT
Het INPUT type element is een ontzettend uitgebreid element. Met dit element ga je aangeven dat de gebruiker hier iets mag invullen of verzenden. Het INPUT element moet niet afgesloten worden, omdat je alleen met attributen en waardes werkt in dit element. De onderstaande attributen behoren dus in dit element:<INPUT>.

  • TYPE
    Het TYPE attribuut is het uitgebreidste attribuut in het INPUT element. Met de waarden van het TYPE attribuut kan je aangeven wat voor soort invoermogelijkheid er is en wat de verzendmogelijkheid is.
    <INPUT TYPE="waarde">

    • text
      Met deze waarde kan de gebruiker 1 regel tekst invoeren.
      Voorbeeld
      <INPUT TYPE="text">

    • password
      Met deze waarde kan de gebruiker een wachtwoord op 1 regel invoeren. De tekst die wordt ingevoerd komen als rondjes op het scherm te staan.
      Voorbeeld
      <INPUT TYPE="password">

    • hidden
      Met deze waarde wordt er niks op het scherm getoond. Je kan met deze waarde informatie doorgeven die in de VALUE van het INPUT element wordt gezet.
      Voorbeeld
      <INPUT TYPE="hidden" VALUE="informatie">

    • file
      Met deze waarde kan de gebruiker een bestand oproepen van de computer.
      Voorbeeld
      <INPUT TYPE="file">

    • radio
      Met deze waarde kan de gebruiker een keuze maken tussen verschillende mogelijkheden. Let op! Met radio kan er maar 1 optie geselecteerd worden. In het voorbeeld hieronder wordt het VALUE en NAME attribuut gebruikt, let op dit komt verderop aan bod op deze pagina.
      Voorbeeld
      Optie 1: <INPUT TYPE="radio" NAME="opties" VALUE="optie1">
      Optie 2: <INPUT TYPE="radio" NAME="opties" VALUE="optie2">
      Optie 1:
      Optie 2:

    • checkbox
      Met deze waarde kan de gebruiker een keuze maken tussen verschillende mogelijkheden. In tegenstelling tot de radio waarde kunnen er bij een checkbox meerdere mogelijkheden gekozen worden. In het voorbeeld hieronder wordt het VALUE en NAME attribuut gebruikt, let op dit komt verderop aan bod op deze pagina.
      Voorbeeld
      Optie 1: <INPUT TYPE="checkbox" NAME="opties" VALUE="optie1">
      Optie 2: <INPUT TYPE="checkbox" NAME="opties" VALUE="optie2">
      Optie 1:
      Optie 2:

    • submit
      Met deze waarde maak je een knop aan. Met deze knop kan je de informatie gaan verzenden. Met de VALUE waarde geef je aan wat er op de knop moet komen staan.
      Voorbeeld
      <INPUT TYPE="submit" NAME="verzendknop" VALUE="Verzenden">

    • reset
      Met deze waarde maak je een knop aan, die de ingevulde informatie kan wissen. Met de VALUE waarde geef je aan wat er op de knop moet komen staan.
      Voorbeeld
      <INPUT TYPE="reset" NAME="wisknop" VALUE="Wis alles">

    • image
      Met deze waarde kan je een afbeelding als knop gebruiken. Met de VALUE waarde geef je aan wat er op de knop moet komen staan. Het SRC attribuut moet er bijgevoegd worden om aan te geven om welke afbeelding het gaat. Meer over SRC kunt u lezen in het hoofdstuk Afbeeldingen.
      Voorbeeld
      <INPUT TYPE="image" SRC="./images/knop.jpg" NAME="plaatjeknop" VALUE="Verzenden">

  • NAME
    Met het NAME attribuut kan je een invoerveld of knop een naam geven. Hiermee kan elk invoerveld uniek worden, omdat je het een eigen naam geven.
    <INPUT NAME="waarde">

  • VALUE
    Met het VALUE attribuut kan er informatie aan een invoermethode worden gehangen. Bij text en password is het mogelijk om met VALUE een vooraf ingestelde waarde te laten verschijnen. Met radio en checkbox kan je een optie vooraf geselecteerd zetten. Bij een knop kan je de tekst van de knop met VALUE bepalen.
    <INPUT VALUE="waarde">

  • SIZE
    Dit attribuut is alleen bij een text en password invoerveld te gebruiken. De waarde die je aangeeft is het aantal karakters wat in het invoerveld past.
    <INPUT SIZE="waarde">

SELECT
Met het SELECT element geef je aan, dat je een keuzelijst gaat maken. Dit doe je in combinatie van het OPTION element. In het SELECT element geef je met het NAME attribuut een unieke waarde aan de keuzelijst. Je opent SELECT met <SELECT> en je sluit SELECT met </SELECT>. Het afsluiten van een keuzelijst doe je helemaal aan het einde van een keuzelijst. In de eerste tag van SELECT komen de attributen. De onderstaande attributen behoren dus in dit element:<SELECT>.

  • NAME
    Met het NAME attribuut kan er een naam worden gegeven aan een keuzelijst zodat deze makkelijker te onderscheiden zijn.
    <SELECT NAME="waarde">

  • MULTIPLE
    Met het MULTIPLE attribuut geef je aan dat er een keuzelijst gemaakt wordt waarmee je meerdere opties kan selecteren. .
    <SELECT MULTIPLE>

  • SIZE
    Met het SIZE attribuut geef je aan hoeveel keuzes er zichtbaar zijn voor de gebruiker in de keuzelijst.
    <SELECT MULTIPLE SIZE="waarde">

OPTION
Dit element komt na het SELECT element. Ze horen bij elkaar. Met het OPTION element geef je de keuzes straks aan in de keuzelijst. Je opent OPTION met <OPTION> en je sluit OPTION met </OPTION>. Het afsluiten van OPTION doe je na de tekst die achter de start OPTION staat. In de eerste tag van OPTION komen de attributen. De onderstaande attributen behoren dus in dit element:<OPTION>.

  • VALUE
    Met het VALUE attribuut wordt er informatie in de OPTION gestopt. Als in de keuzelijst een optie wordt gekozen, dan wordt deze informatie dankzij VALUE verzonden.
    <OPTION VALUE="waarde">

  • SELECTED
    Dit attribuut is niet verplicht, maar als je een bepaalde keuze vooraf geselecteerd wilt hebben staan. Dan gebruik je bij de gewenste keuze het SELECTED attribuut.
    <OPTION SELECTED>

Voorbeeld van een keuzelijst
<SELECT NAME="opties" >
<OPTION VALUE="optie1">Optie 1</OPTION>
<OPTION VALUE="optie2">Optie 2</OPTION>
<OPTION VALUE="optie3">Optie 3</OPTION>
<OPTION VALUE="optie4">Optie 4</OPTION>
</SELECT>



Voorbeeld van een keuzelijst die gebruikt maakt van multiple
<SELECT NAME="opties" MULTIPLE SIZE="waarde">
<OPTION VALUE="optie1">Optie 1</OPTION>
<OPTION VALUE="optie2">Optie 2</OPTION>
<OPTION VALUE="optie3">Optie 3</OPTION>
<OPTION VALUE="optie4">Optie 4</OPTION>
</SELECT>


TEXTAREA
Met het TEXTAREA element is het mogelijk om een tekstvak te maken. Bij een TEXTAREA kan je tekst over meerdere regels typen. Dit is dus anders als bij het INPUT element. Je opent TEXTAREA met <TEXTAREA> en je sluit TEXTAREA met </TEXTAREA>. Het afsluiten van een textarea doe je meteen achter de tag die het opent. In de eerste tag van TEXTAREA komen de attributen. De onderstaande attributen behoren dus in dit element:<TEXTAREA>.

  • NAME
    Met het NAME attribuut kan er een naam worden gegeven aan een textarea zodat deze makkelijker te onderscheiden zijn.
    <TEXTAREA NAME="waarde">
  • COLS
    Met het COLS attribuut geef je aan hoe breed het tekstvak mag zijn. De waarde is uitgedrukt in karakters.
    <TEXTAREA COLS="waarde">
  • ROWS
    Met het ROWS attribuut geef je aan hoe hoog het tekstvak mag zijn. De waarde is uitgedrukt in het aantal rijen.
    <TEXTAREA ROWS="waarde">

Voorbeeld van een tekstveld
<TEXTAREA NAME="tekstvak" COLS="30" ROWS="8" >
</TEXTAREA>