Toegankelijke en semantische HTML formulieren: tips en trucks.

1. Formulieren
Best practices

2. HTML formulieren laten de gebruiker
data naar je webpagina verzenden.

3. Typische werking
van een formulier

4. De gebruiker vult het formulier in
1

5. De gebruiker verzendt het formulier
2

6. De server doet iets met de
ontvangen gegevens
3

7. De server stuurt een antwoord terug
naar de browser van de gebruiker
4

8. De browser toont het antwoord aan
de gebruiker
5
Bedankt! We hebben je gegevens goed ontvangen!

9. Het verwerken van de gegevens aan
de serverkant moet via een
programmeertaal als php gebeuren.

10. Formuliermogelijkheden
in HTML

11. <form>
<!-- hier komen de form elementen
die gebruiker om input vragen. -->
</form>
Maak een formulier in HTML

12. <form action="verwerk.php" method="post">
<!-- hier komen de form elementen
die gebruiker om input vragen. -->
</form>
Essentiële form attributen
Meer info over deze attributen

13. <form action="verwerk.php" method="post">
<!-- hier komen de form elementen
die gebruiker om input vragen. -->
<input type="submit" value="Verzenden">
</form>
Het formulier moet verzonden
kunnen worden
Of je kan het button element gebruiken

14. <form action="verwerk.php" method="post">
<input type="text" id="voornaam">
<input type="submit" value="Verzenden">
</form>
De gebruiker moet gegevens
kunnen invullen

15. <form action="verwerk.php" method="post">
<label for="voornaam">Voornaam:</label>
<input type="text" id="voornaam">
<input type="submit" value="Verzenden">
</form>
Het invulveld moet een beschrijvend
label krijgen dat de gebruiker helpt

16. <form action="verwerk.php" method="post">
<p>Jouw voornaam:</p>
<input type="text" id="voornaam">
<input type="submit" value="Verzenden">
</form>

17. Gebruik altijd een label
• Zorg voor een duidelijke link tussen het label en het
formulierelement: het for attribuut van het label geef
je dezelfde waarde als de id van het formelement
• Plaats een label vóór het formulierelement:
screenreaders lezen het voor maar negeren andere tekst
• Een label is klikbaar en maakt je formulier dus
gebruiksvriendelijker
• Een label kan je makkelijk vormgeven met CSS
• Dankzij cursor:pointer toon je de gebruiker dat het
label klikbaar is

18. <form action="verwerk.php" method="post">
<label for="voornaam">Voornaam:</label>
<input type="text" id="voornaam" name="voornaam">
<input type="submit" value="Verzenden">
</form>
Het invulveld moet een name krijgen
(wordt meegestuurd naar server)

19. Attributen voor formuliervelden

20. <input type="text" placeholder="Family name">

21. Toegankelijkheidstips
• Hou placeholder tekst kort en duidelijk
• Gebruik het title attribuut voor langere tekst
• Gebruik nooit enkel placeholder, een label
element is vereist (screenreaders)
• Plaats het label vóór het inputveld
• Browsers die placeholder niet ondersteunen,
zullen het gewoon negeren
• Gebruik placeholder! Je formulier wordt
gebruiksvriendelijker

22. ::-webkit-input-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
::placeholder {
color: red;
}
Placeholder vormgeven

23. <input type="text" autofocus>

25. input:focus {
outline: 0; /* verbergt standaard focus style */
border: 1px solid blue;
}
focus vormgeven
Opgepast: standaard browser :focus stijl nooit
afzetten zonder zelf stijl te geven! Usability!

26. <input type="text" autocomplete>
Standaard waarde—toont eerder ingevulde gegevens

27. <input type="text" autocomplete="off">

28. <form autocomplete="off">
• Zet autocomplete af voor elk formulierveld
• Je kan dit overroepen per individueel veld:
<input type="text" autocomplete>

29. <input type="text" required>

30. :required {
border-bottom: 3px solid tomato;
}
Een required formulierveld
vormgeven

31. :optional {
border: 1px solid green;
}
Een niet-required formulierveld
vormgeven

32. <input type="text" pattern="[0-9][A-Z]{3}">

34. Toegankelijkheidstips
• Verklaar het vereiste patroon aan de gebruiker
in het title of placeholder attribuut, of
tenminste in tekst naast het veld — sommige
browsers zullen de title tekst tonen als het
veld onjuist werd ingevuld!
• Gebruik alleen pattern wanneer dit strikt
noodzakelijk is. Frustreer je gebruikers niet.
• Oudere browsers negeren pattern gewoon

35. list
Koppelt een datalist aan een bepaald veld. De
waarde van het list attribuut moet hetzelfde
zijn als de id van een datalist element.
datalist
Een vooraf gedefinieerde lijst met opties.

36. <datalist id="countries">
<option value="Belgium">Belgium</option>
<option value="Sweden">Sweden</option>
<option value="Norway">Norway</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</datalist>
Definieer eerst een lijst met opties
Wordt niet getoond!

37. <label for="country">Your country:</label>
<input type="text" list="countries"
id="country">
Associeer vervolgens met een veld

40. Backward compatibility
De meeste browsers die datalist niet kennen,
tonen een tekstveld, maar IE9 en lager tonen alle
datalist opties als tekst!

41. Mogelijke oplossing
<label for="country">Your country:</label>
<datalist id="countries">
<select name="country">
<option value="Belgium">Belgium</option>
<option value="Sweden">Sweden</option>
<option value="Norway">Norway</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
</select>
If other, please specify:
</datalist>
<input type="text" id="country" list="countries">

42. Dit is een aanvaardbare fall-back in
oudere browsers

43. <form action="" method="" novalidate>
• Kan enkel gebruikt worden op het form element.
• Formulier zal niet gevalideerd worden bij submit.
<form action="process.php" novalidate>
<label for="email">Email:</label>
<input type="text" name="email" >
<input type="submit" value="Submit">
</form>

44. <input type="submit" formnovalidate>
• Kan enkel gebruikt worden op een submitknop.
• Formulier zal niet gevalideerd worden bij submit.
<form action="process.php">
<label for="email">Email:</label>
<input type="text" name="email">
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
</form>

45. <input type="submit" value="Submit"
formaction="process.php">
• Kan enkel gebruikt worden op submitknoppen
• Heeft hetzelfde effect als het action attribuut
op het form element
• Als een formulier verzonden wordt, checkt de
browser eerst of er een formaction attribuut
is. Als dat er niet is, gaat de browser op zoek naar
een action attribuut op het form element.
• Bestaan ook: formmethod, formenctype en
formtarget

46. Formulierelementen

47. Flashback: wat zijn de belangrijkste
formulierelementen van HTML4?

48. <input type="text">

49. Met label
<label for="naam">Hoe is jouw naam?</label>
<input type="text" id="naam" name="naam">

50. <textarea>Your text</textarea>

51. Met label
<label for="vraag">Je opmerking</label>
<textarea id="vraag" name="vraag"></textarea>

52. <input type="password">

53. Met label
<label for="pas">Je paswoord</label>
<input type="password" id="pas" name="paswoord">

54. <input type="file">

55. Met label
<label for="foto">Upload je foto</label>
<input type="file" id="foto" name="foto">

56. <input type="submit">

57. <input type="radio">

58. Met label
<input type="radio" name="maaltijd" value="frietjes"
id="frietjes">
<label for="frietjes">Frietjes</label>
<input type="radio" name="maaltijd" value="pizza"
id="pizza">
<label for="pizza">Pizza</label>
<input type="radio" name="maaltijd" value="boterham"
id="boterham">
<label for="boterham">Boterhammetjes</label>

59. Best ook met fieldset en legend
<fieldset>
<legend>Maak je keuze</legend>
<input type="radio" name="maaltijd"
value="frietjes" id="frietjes">
<label for="frietjes">Frietjes</label>
<input type="radio" name="maaltijd"
value="pizza" id="pizza">
<label for="pizza">Pizza</label>
<input type="radio" name="maaltijd"
value="boterham" id="boterham">
<label for="boterham">Boterhammetjes</label>
</fieldset>

60. fieldset en legend
• Gebruik fieldset om inhoudelijk
gerelateerde formulierelementen te groeperen
• Het is dus perfect om radio buttons of
checkboxes te groeperen
• Gebruik legend optioneel als bijschrift bij een
fieldset

61. fieldset en legend

62. <input type="checkbox">

63. Met label
<input type="checkbox" name="ploeg" value="rsca"
id="rsca">
<label for="rsca">Anderlecht</label>
<input type="checkbox" name="ploeg" value="club"
id="club">
<label for="club">Club Brugge</label>
<input type="checkbox" name="ploeg" value="gent"
id="gent">
<label for="gent">AA Gent</label>

64. Best ook met fieldset en legend
<fieldset>
<legend>Vink je voorkeur aan</legend>
<input type="checkbox" name="ploeg" value="rsca"
id="rsca">
<label for="rsca">Anderlecht</label>
<input type="checkbox" name="ploeg" value="club"
id="club">
<label for="club">Club Brugge</label>
<input type="checkbox" name="ploeg" value="gent"
id="gent">
<label for="gent">AA Gent</label>
</fieldset>

65. CSS has a :checked pseudo class
for radio and checkbox elements
input:checked + label {
color: purple;
}

66. <select>
<option>Nederlands</option>
<option>African</option>
</select>

67. Met label
<label for="taal">Kies je taal</label>
<select id="taal" name="taal">
<option value="dutch">Nederlands</option>
<option value="african">African</option>
</select>

68. Nieuwe formelementen in HTML5

69. <input type="search">

70. <input type="search">

71. <input type="search">
Oude browsers die de nieuwe formulierelementen
niet kennen, vallen terug op een standaard
tekstveld. Je kan het dus gerust bekijken als
ingebakken progressive enhancement.

72. <input type="email">

73. <input type="email">

74. :invalid {
border: 1px solid red;
}
invalid formelementen vormgeven

75. input:not([type='submit']):valid {
border: 1px solid green;
}
valid formelementen vormgeven

76. Tip
• Je dubbelcheckt best elke interactiestap bij
gebruik van de :valid of :invalid CSS pseudo-
classes.

77. <input type="email" required>

78. <input type="email">

79. <input type="url">

80. <input type="url">

81. <input type="url">

82. <input type="tel">

83. <input type="tel">
• Er wordt geen specifieke syntax opgedrongen
want telefoonnummers verschillen wereldwijd
• Je kan het pattern attribuut gebruiken als je
per sé een specifieke syntax wil opdringen
• Usability tip: doe het niet! :)

84. <input type="tel">

85. <input type="number">

86. <input type="number">

87. <input type="number" min="4" max="18"
step="0.5" value="9" id="shoe-size">

88. <input type="range">
Wanneer je input verwacht zoals number, maar minder specifiek

89. <input type="range" min="1" max="100"
value="50">

90. <input type="date">

91. <input type="date">

92. <input type="date" min="2014-01-01"
max="2014-12-31">
• Je kan de min en max attributen gebruiken
• Andere mogelijke types: month, week,
datetime, time

93. <input type="date">

94. <input type="color">

95. <input type="color">
The color picker on Blackberry

96. Onthou
• Browsers die deze nieuwe input types niet kennen,
vallen altijd terug op input type="text"
• Je formulier wordt door de nieuwe input types
gebruiksvriendelijker voor een groeiend aantal
gebruikers
• Eventueel kan je browser support detecteren via
JavaScript feature detection (bijv. Modernizr)
• Valideer wat de gebruiker ingeeft altijd server-side
• Zoals steeds: test in zoveel mogelijk browserversies en
op zoveel mogelijk verschillende apparaten!

97. Gebruiksvriendelijke en
toegankelijke formulieren

98. Plaats labels boven de velden
Veel minder oogfixaties en daarom sneller te
begrijpen door je gebruiker

99. Vervang een label nooit door
placeholder tekst
Placeholder tekst verdwijnt wanneer het veld
focus krijgt, of wanneer je begint te typen.

100. Bij een zoekveld kan je ’t eventueel
vervangen door het title attribuut
Screenreaders lezen dan de waarde van het titel
attribuut voor.

101. Verplichte velden: duidelijk zijn!
Kleurverschil, vette tekst of * zijn niet voldoende.
Plaats (verplicht) vóór het veld.

102. Gebruik fieldset, zeker bij langere
formulieren

103. Probeer het standaard uitzicht van
formulierelementen zoveel mogelijk
te behouden. Gebruikers herkennen
ze in een oogopslag.

104. Niemand vult graag formulieren in.
Vraag zo weinig mogelijk van je
gebruiker. Hou het simpel.

105. Veel gebruikers gebruiken het
keyboard om te navigeren door je
formuliervelden. Test dit altijd eens.

106. Meer weten?

107. Meer weten?

108. Meer weten?
S

109. Links en bronnen
• html5doctor.com
• w3.org
• wufoo.com/html5
• developer.mozilla.org
• Codrops CSS reference