Formulieren | HTML cursus

On Youtube: HTML formulieren

https://www.youtube.com/watch?v=zCshW95Dr28

Overzicht

Elementen en attributen voor formulieren

De elementen gebruikt in een formulier:

element	betekenis
`<form>`	duidt de formulier aan
`<fieldset>`	deel van het formulier
`<legend>`	titel van een fieldset
`<label>`	label behorend bij een form control
`<input>`	inputveld; dit kan een tekst, email, kleur, radiobutton enz... zijn
`<select>`	dropdown control
`<option>`	optie van een dropdown control
`<textarea>`	tekstvak (b.v. voor commentaar)
`<button>`	form button (submit, reset of gewone button)

Algemene attributen:

attribuut	voorbeeld	waarden	betekenis
`id`	`<input type="text" id="inpNaam">`	tekst (zonder spaties)	unieke id voor een control
`for`	`<label for="inpNaam">`	control id	linkt een <label> aan een control
`type`	`<input type="email">`	`text`, `email`, `color`, `radio`, `checkbox`...	type form control
`value`	`<input type="text" value="Rogier">`	tekst, getal, kleur...	waarde van de control
`name`	`<input type="radio" name="geslacht" value="m"> <input type="radio" name="geslacht" value="v">`	tekst (groepnaam)	naam van een radiobuttongroep
`placeholder`	`<input type="text" placeholder="jouw naam">`	tekst	achtergrondtekst van de control
`required`	`<input type="text" required>`	-	vereist veld

screenshot van het `required` attribuut in actie

Specifieke attributen:

attribuut	voorbeeld	waarden	betekenis
`min`, `max`, `step`	`<input type="number" min="1" max="100" step="5">`	getal	minimum, maximum en stap van een number control
`rows`, `cols`	`<textarea rows="5" cols="40">`	getal	5 tekstrijen en 40 karakters per regel
`accept`	`<input type="file" accept=".jpeg,.jpg,.png">`	tekst	beperking bestandstypes
`multiple`	`<input type="file" multiple>`	-	sta keuze van meerdere files toe
`checked`	`<input type="radio" checked>`	-	optie is aangevinkt
`selected`	`<option selected>waarde</option>`	-	dropdown waarde is geselecteerd

Lijst controls

Controls voor het ingeven van waarden:

type	voorbeeld
tekstveld	`<label for="fname">Voornaam:</label> <input type="text" id="fname" placeholder="bv. Bob">`
email	`<label for="email1">Email:</label> <input type="email" id="email">`
tel	`<label for="mobile">GSM:</label> <input type="tel" id="mobile">`
url	`<label for="webpage">Webpagina:</label> <input type="url" id="webpage">`
password	`<label for="pw">Paswoord:</label> <input type="password" id="pw">`
bestand	`<label for="photo">Profielfoto: </label> <input type="file" id="photo">`
getal	`<label for="nr1">Even getal tussen 10 en 20:</label> <input type="number" id="nr1" min="10" value="12" max="20" step="5">`
dropdown	`<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>`
datum	`<label for="bdate">Geboortedatum:</label> <input type="date" id="bdate">`
kleur	`<label for="favcolor">Favoriete kleur:</label> <input type="color" id="favcolor" value="#f789df">`
tekstvak	`<label for="bio">Opmerkingen:</label> <textarea id="bio" cols="40" rows="5"></textarea>`
slider	`<label for="rating">Tevredenheid (schaal van 1 tot 10): *</label> <input type="range" min="1" max="10" step="1" value="5" id="rating">`
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>`
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>`
submitbutton	`<button type="submit">verzenden</button>`
resetbutton	`<button type="reset">wissen</button>`
gewone button	`<button type="button">knop 1</button>`

Voorbeelden

Loginformulier

De code van een eenvoudig formulier, b.v. een login:

<form>
   <div>
      <label for="login">Login: *</label>
      <input type="text" id="login" autofocus placeholder="b.v. rogiervdl" required>
   </div>
   <div>
      <label for="password">Paswoord: *</label>
      <input type="password" id="password" required>
   </div>
   <div>
      <button type="submit">Verzenden</button>
      <a href="">paswoord vergeten?</a>
   </div>
</form>

we structureren het formulier met één <div> per label/control; dit vereenvoudigt latere layout en opmaak met CSS
let op dat <label for="..."> verwijst naar een id-attribuut van een bestaande control

Totaalformulier

De code van een uitgebreid formulier (fieldsets/legends zijn niet verplicht en mag je altijd weglaten):

<form>
   <fieldset>
      <legend>Verplichte informatie</legend>
      <div>
         <label for="login">Login: *</label>
         <input type="text" id="login" autofocus required>
      </div>
      <div>
         <label for="password">Paswoord: *</label>
         <input type="password" id="password" required placeholder="minstens 8 karakters">
      </div>
      <div>
         <label for="email">Email: *</label>
         <input type="email" id="email" required>
      </div>
      <div>
         <label for="birthdate">Geboortedatum: *</label>
         <input type="date" id="birthdate">
      </div>
   </fieldset>
   <fieldset>
      <legend>Optionele informatie</legend>
      <div>
         <label for="profilepic">Profielfoto: *</label>
         <input type="file" id="profilepic">
      </div>
      <div>
         <label for="mobile">GSM:</label>
         <input type="tel" id="mobile">
      </div>
      <div>
         <label for="webpage">Webpagina: *</label>
         <input type="url" id="webpage">
      </div>
      <div>
         <label for="favcol">Favoriete kleur:</label>
         <input type="color" id="favcolor" value="#f789df">
      </div>
      <div>
         <label for="kids">Aantal kinderen:</label>
         <input type="number" id="kids" value="0">
      </div>
      <div>
         <label for="happiness">Tevredenheid (schaal van 1 tot 10): *</label>
         <input type="range" min="1" max="10" step="1" value="5" id="happiness">
      </div>
      <div>
         <label>Geslacht</label>:
         <label><input type="radio" name="gender" value="f" checked> vrouw</label>
         <label><input type="radio" name="gender" value="m"> man</label>
      </div>
      <div>
         <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>
      </div>
      <div>
         <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>
      </div>
      <div>
         <label for="desc">Opmerkingen:</label>
         <textarea id="desc" cols="40" rows="5" required></textarea>
      </div>
   </fieldset>
   <div>
      <button type="reset">Wissen</button>
      <button type="submit">Verzenden</button>
   </div>
</form>

Als je een formulier nodig heb, kopieer simpelweg dit totaalvoorbeeld en pas het aan, zo vergeet je niks.

Aandachtspunten

Opbouw van het formulier

Elk formulier, klein of groot, bestaat uit volgende onderdelen:

een <form> element
<p> of <div> elementen met daarin <label> en de control
onderaan een <button type="submit">

Linken `<label>` aan control

Er zijn twee manieren om labels aan een control te linken:

door <label for="..."> te laten verwijzen naar het id-attribuut van de control
door de control te nesten in een <label>, zonder for-attribuut

Vergelijken we de twee voor een tekstveld

<!-- for/id syntax -->
<div>
  <label for="login">Login: *</label>
  <input type="text" id="login">
</div>

<!-- geneste syntax -->
<div>
   <label> Login: * <input type="text" id="login"></label>
 </div>

De tweede syntax is wat korter en lijkt eenvoudiger; toch wordt de eerste syntax als de beste gezien omdat het meer flexibiliteit geeft qua opmaak met CSS later. De enige situaties waar we — alweer om praktische redenen bij layout — toch voor de tweede syntax kiezen is bij radiobuttons en checkboxes:

<!-- for/id syntax -->
<div>
   <label>Geslacht</label>:
   <label for="genderF">vrouw</label>
   <input type="radio" name="gender" value="f" id="genderF">
   <label for="genderM">man</label>
   <input type="radio" name="gender" value="m" id="genderM">
</div>

<!-- geneste syntax -->
<div>
   <label>Geslacht</label>:
   <label><input type="radio" name="gender" value="f"> vrouw</label>
   <label><input type="radio" name="gender" value="m"> man</label>
</div>

Het is belangrijk labels correct te linken aan hun control:

het is een hulpmiddel voor toepassingen als browsers (autofill), password managers e.d.
voor blinden is maakt het de betekenis van de control duidelijk en welke waarde verwacht wordt
als extra kan je dan op de label klikken om de control te activeren

Je kan zelf controleren of het correct gelinkt is: als je op het label klikt, moet de control geactiveerd worden

Belang juist type van `<input>`

Visueel zie je geen verschil tussen <input type="text">, <input type="email">, <input type="tel"> of <input type="url">. Toch is de juiste keuze belangrijk om drie redenen:

voor blinden is het duidelijker welk type input verwacht wordt
voor validatie met het required attribuut moet het type kloppen
op mobiele devices past het toetsenbord zich aan naargelang het type

toetsenborden op mobiele devices voor telefoon, url en email

Design vs. HTML

Verborgen labels

Designers houden van minimalisme, en laten graag al eens dingen weg. Op deze screenshot zie je b.v. zie je geen labels staan (wel placeholders), terwijl ze wél (altijd!) moeten gecodeerd worden in HTML:

<form id="frmSignup">
   <div>
      <label for="email">Mobile Number or Email</label>
      <input type="email" id="email" placeholder="Mobile Number or Email" required>
   </div>
   <div>
      <label for="fullname">Full Name</label>
      <input type="text" id="fullname" placeholder="Full Name" required>
   </div>
   <div>
      <label for="username">Username</label>
      <input type="text" id="username" placeholder="Username" required>
   </div>
   <div>
      <label for="password">Password</label>
      <input type="password" id="password" placeholder="Password" required>
   </div>
   <p>People who use our service... <a href="#">Learn More</a></p>
   <p>By signing up, you agree to our <a href="#">Terms</a>...</p>
   <button type="submit">Next</button>
</form>

We zullen dan later deze labels weer onzichtbaar maken met CSS:

#frmSignup label { display: none; }

Verborgen submitknop

Een ander voorbeeld is de submitbutton die vaak weggelaten wordt, maar wél in de HTML gecodeerd moet worden. Op volgende screenshot ontbreken zowel label als submitknop:

<form>
   <div>
      <label for="search">Zoeken</label>
      <input type="search" id="search" placeholder="Waar ben je naar op zoek?">
   </div>
   <button type="submit">Go</button>
</form>

Button of gewone link?

Buttons en links worden vaak verward, omdat links vaak zo opgemaakt zijn, dat ze er als buttons uitzien en omgekeerd. Het onderscheid is nochtans ondubbelzinnig:

een button is een actie op een een formulier: verzenden of wissen
een link dient voor navigatie, i.e. om content te openen (andere pagina, e-mail, sms...)

→ waar gebruik je op volgende screenshot een knop, en waar een link?

06. HTML formulieren