FORMULIEREN

tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web

gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar

FORMULIEREN

Basisstructuur

Totaalvoorbeeld

  • Voorbeeld met alle elementen en attributen uit dit hoofdstuk:
    <form>
      <p>
        <label for="username">Gebruikersnaam: *</label>
        <input type="text" id="username" autofocus required>
      </p>
      <p>
        <label for="password">Paswoord: *</label>
        <input type="password" id="password" required placeholder="minstens 8 karakters">
      </p>
      <p>
        <label for="email">Email: *</label>
        <input type="email" id="email" required>
      </p>
      <p>
        <label for="mobile">GSM:</label>
        <input type="tel" id="mobile">
      </p>
      <p>
        <label for="birthdate">Geboortedatum: *</label>
        <input type="date" id="birthdate">
      </p>
      <p>
        <label for="profilepic">Profielfoto: *</label>
        <input type="file" id="profilepic">
      </p>
      <p>
        <label for="webpage">Webpagina: *</label>
        <input type="url" id="webpage">
      </p>
      <p>
        <label for="favcol">Favoriete kleur:</label>
        <input type="color" id="favcolor" value="#f789df">
      </p>
      <p>
        <label for="kids">Aantal kinderen:</label>
        <input type="number" id="kids" value="0">
      </p>
      <p>
        <label for="happiness">Tevredenheid (schaal van 1 tot 10): *</label>
        <input type="range" min="1" max="10" step="1" value="5" id="happiness">
      </p>
      <p>
        <label>Geslacht</label>:
        <label><input type="radio" name="gender" value="f" checked> vrouw</label>
        <label><input type="radio" name="gender" value="m"> man</label>
      </p>
      <p>
        <label for="education">Opleiding:</label>
        <select id="education">
          <option value="-1">Select...</option>
          <option value="0">lagere school</option>
          <option value="1">middelbare school</option>
          <option value="2">hoger onderwijs</option>
          <option value="3">doctoraat</option>
        </select>
      </p>
      <p>
        <label>Interesses</label>:
        <label><input type="checkbox" checked> HTML</label>
        <label><input type="checkbox"> Javascript</label>
        <label><input type="checkbox" checked> CSS</label>
        <label><input type="checkbox"> PHP</label>
      </p>
      <p>
        <label for="desc">Opmerkingen:</label>
        <textarea id="desc" cols="40" rows="5" required></textarea>
      </p>
      <p>
        <button type="submit">Verzenden"</button>
      </p>
    </form>
  • tip: kopieer dit voorbeeld en pas het aan als je een HTML formulier nodig hebt!

[Totaalvoorbeeld met fieldsets]

  • Zelfde voorbeeld, maar nu ook in secties verdeeld met <fieldset> en <legend>:
    <form>
      <fieldset>
        <legend>Verplichte informatie</legend>
        <p>
          <label for="username">Gebruikersnaam: *</label>
          <input type="text" id="username" autofocus required>
        </p>
        <p>
          <label for="password">Paswoord: *</label>
          <input type="password" id="password" required placeholder="minstens 8 karakters">
        </p>
        <p>
          <label for="email">Email: *</label>
          <input type="email" id="email" required>
        </p>
        <p>
          <label for="birthdate">Geboortedatum: *</label>
          <input type="date" id="birthdate">
        </p>
      </fieldset>
      <fieldset>
        <legend>Optionele informatie</legend>
        <p>
          <label for="profilepic">Profielfoto: *</label>
          <input type="file" id="profilepic">
        </p>
        <p>
          <label for="mobile">GSM:</label>
          <input type="tel" id="mobile">
        </p>
        <p>
          <label for="webpage">Webpagina: *</label>
          <input type="url" id="webpage">
        </p>
        <p>
          <label for="favcol">Favoriete kleur:</label>
          <input type="color" id="favcolor" value="#f789df">
        </p>
        <p>
          <label for="kids">Aantal kinderen:</label>
          <input type="number" id="kids" value="0">
        </p>
        <p>
          <label for="happiness">Tevredenheid (schaal van 1 tot 10): *</label>
          <input type="range" min="1" max="10" step="1" value="5" id="happiness">
        </p>
        <p>
          <label>Geslacht</label>:
          <label><input type="radio" name="gender" value="f" checked> vrouw</label>
          <label><input type="radio" name="gender" value="m"> man</label>
        </p>
        <p>
          <label for="education">Opleiding:</label>
          <select id="education">
            <option value="-1">Select...</option>
            <option value="0">lagere school</option>
            <option value="1">middelbare school</option>
            <option value="2">hoger onderwijs</option>
            <option value="3">doctoraat</option>
          </select>
        </p>
        <p>
          <label>Interesses</label>:
          <label><input type="checkbox" checked> HTML</label>
          <label><input type="checkbox"> Javascript</label>
          <label><input type="checkbox" checked> CSS</label>
          <label><input type="checkbox"> PHP</label>
        </p>
        <p>
          <label for="desc">Opmerkingen:</label>
          <textarea id="desc" cols="40" rows="5" required></textarea>
        </p>
        <p>
          <button type="submit">Verzenden"</button>
        </p>
      </fieldset>
    </form>

Formulier structuur

  • Het <form> element
    • is verplicht voor elk formulier, hoe klein ook (bv. zoekformulier)!
    • bevat alles wat tot het formulier behoort, dus ook titels, helpteksten...
    • moet een submit button hebben op het einde
    <form>
      <h3>Registratie</h3>
      ...
      <p>velden met een * zijn verplicht</p>
      ...
      <p><input type="submit" value="Verzend"></p>
    </form>
    

Controls

  • Controls (ook wel inputs, velden, of in correct Nederlands besturingselementen genoemd) zijn de interactieve elementen van het formulier. Er zijn veel manieren om de HTML te coderen, maar deze manier maakt latere layout met CSS makkelijker:
  • → zet elke control in een paragraaf, voorafgegaan door zijn <label>
    <p>
      <label for="your_name">Jouw naam:</label>
      <input type="text" id="your_name">
    </p>
    
  • → uitzondering: nest radiobuttons en checkboxes in <label>, zonder for en id attributen:
    <p>
      <label><input type="radio" name="gender" value="f" checked> vrouw</label>
      <label><input type="radio" name="gender" value="m"> man</label>
    </p>  
    

Attributen — value, name, for, id

  • Elke control kan een value en/of id attribuut hebben. Maak je niet teveel zorgen om hun betekenis. Onthoud voorlopig alleen:
    • het value attribuut bevat de (begin)waarde van een control
    • het name attribuut moet identiek zijn binnen een groep radiobuttons
    • het for attribuut van <label> moet verwijzen naar het id attribuut van de bijhorende control:
    <p>
      <label for="your_name">Jouw naam:</label>
      <input type="text" id="your_name">
    </p>
    
  • indien correct gekoppeld, kan je een control selecteren door op de label te klikken:

Attributen — Placeholder

  • Toon een lichtgrijze helptekst in het veld zelf met het placeholder attribuut:
    <p>
      <label for="name">Jouw naam:</label>
      <input type="text" id="name" placeholder="b.v. John Smith">
    </p>

Attributen — Required

  • Maak een control verplicht met het required attribuut; de browser zal eenvoudige validatie uitvoeren bij het versturen van het formulier:
    <form>
      <p>               
        <label for="email">Jouw email:</label>
        <input type="email" id="email" required>
      </p>               
      <p>               
        <input type="submit" value="Verzenden">
      </p>               
    </form>
    

Labels

  • Een control moet altijd een label hebben, zelfs al is het niet zichtbaar in het uiteindelijke design. In onderstaand (typisch) voorbeeld zijn placeholders gebruikt en labels niet zichtbaar. Toch zijn ze gecodeerd in de HTML (code in het vet):
  • labels helpen software als screen readers voor blinden
  • we verbergen ze later wel weer met CSS

FORMULIEREN

Soorten controls

Tekst (1)

  • Tekst:
    <label for="fname">Voornaam:</label>
    <input type="text" id="fname" placeholder="bv. Bob">
  • Email:
    <label for="email1">Email:</label>
    <input type="email" id="email">
  • Telefoon:
    <label for="mobile">GSM:</label>
    <input type="tel" id="mobile">
  • URL:
    <label for="webpage">Webpagina:</label>
    <input type="url" id="webpage">

Tekst (2)

  • Paswoord:
    <label for="pw">Paswoord:</label>
    <input type="password" id="pw" placeholder="minstens 8 karakters">
    
  • Op het eerste zicht is er weinig verschil tussen de tekstcontrols. Toch is de juiste keuze belangrijk, voor HTML validatie (zie required attribuut ) maar ook voor software. Smartphones bv. zullen hun toetsenbord aanpassen naargelang het type. Screenshots van type tel, url en email op de iPhone:

Tekstvak

  • Een tekstvak voor meerdere regels (b.v. commentaar):
    <label for="bio">Opmerkingen:</label>
    <textarea id="bio" cols="40" rows="5" required></textarea>
    

Datum/kleur

  • Datumkiezer:
    <label for="book_from">Boeken vanaf:</label>
    <input type="date" id="book_from">
  • Kleurkiezer:
    <label for="favcol">Favoriete kleur:</label>
    <input type="color" id="favcolor" value="#f789df">

Numeriek

  • Getal:
    <label for="nr1">Kies een even getal tussen 10 en 20:</label>
    <input type="number" id="nr1" min="10" max="20" step="2">
  • Slider:
    <label for="happiness">Tevredenheid (schaal van 1 tot 10): *</label>
    <input type="range" min="1" max="10" step="1" value="5" id="happiness">

Checkboxes & Radiobuttons

  • Checkboxes:
    <label><input type="checkbox" value="a"> keuze 1</label>
    <label><input type="checkbox" value="b"> keuze 2</label>
    <label><input type="checkbox" value="c"> keuze 3</label>
    
  • meerdere keuzes tegelijk zijn mogelijk
  • Radiobuttons:
    <label><input type="radio" name="group1" value="a"> optie a</label>
    <label><input type="radio" name="group1" value="b"> optie b</label>
    <label><input type="radio" name="group1" value="c"> optie c</label>
    
  • slechts één keuze tegelijk is mogelijk
  • merk op: radiobuttons van dezelfde groep hebben dezelfde name attribuut

Lijst

  • Dropdown lijst:
    <label for="edu">Opleiding: </label>
    <select id="edu">
      <option value="-1">selecteer...</option>
      <option value="0">basisschool</option>
      <option value="1">middelbare school</option>
      <option value="2">hoger onderwijs</option>
    </select>

[Bestandsupload]

  • Bestandsuploadveld:
    <label for="photo">Profielfoto: </label>
    <input type="file" id="photo">
  • Het multiple attribuut laat toe meerdere bestanden tegelijk te selecteren:
    <label for="photo">Profielfoto:</label>
    <input type="file" id="photo" multiple>
  • Het accept attribuut beperkt bestandstypes:
    <input type="file" accept="image/jpeg,image/jpg,image/png">
    <input type="file" accept=".jpeg,.jpg,.png">

Gewone Knop

  • Een eenvoudige knop:
    <input type="button" value="Klik me">
  • Alternatieve syntax met <button> (biedt meer mogelijkheden):
    <button>
      <img src="img/06_forms/ok.png" alt="save icon"/> Opslaan
    </button>
    <button>
      <img src="img/06_forms/cancel.png" alt="cancel icon"/> Annuleren
    </button>
  • deze knoppen doen niks als je erop klikt en zijn enkel zinvol met Javascript
Als je <button> enkel een afbeelding bevat, b.v.
<button type="submit">
  <img src="img/icon_save.png" alt="opslaan">
</button>
let er dan op zeker een alt attribuut te voorzien met dezelfde waarde als de tekst op de knop. Dit helpt screen readers enorm.

Submitknop

  • Een submitknop is een speciale knop die het versturen van het formulier triggert. Gebruik het type="submit" attribuut. De twee mogelijke versies, met <input> of <button>:
    <input type="submit" value="Verzenden">
    <button type="submit">Bevestigen</button>
  • Geef elk formulier een submitknop, zelfs als het niet op het design staat. In volgend voorbeeld staat de submitknop niet in het design, maar wel in de HTML (code in het vet):
  • submit knoppen helpen software als screen readers voor blinden
  • we verbergen ze indien nodig later wel weer met CSS

Resetknop

  • Een resetknop is een speciale knop die het hele formulier herstelt naar de oorspronkelijke waarden. Dit kan nuttig zijn om bv. een lijst filters te wissen. Gebruik het type="reset" attribuut. De twee mogelijke versies, met <input> of <button>:
    <input type="reset" value="Wissen">
    <button type="reset">Wissen</button>
  • submit knoppen helpen software als screen readers voor blinden

Knop of gewone link?

  • Knoppen en links worden vaak verward, omdat links vaak zo opgemaakt zijn, dat ze er als knoppen uitzien en omgekeerd. Het onderscheid is nochtans ondubbelzinnig:
    • in een formulier (verzenden): gebruik een knop
    • buiten een formulier (navigatie): gebruik een link
  • → waar gebruik je een knop, en waar een link?
Odisee logo