<form> <!-- hier komen de form elementen die gebruiker om input vragen. --> </form>
Maak een formulier in HTML
<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
<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
<form action="verwerk.php" method="post"> <input type="text" id="voornaam"> <input type="submit" value="Verzenden"> </form>
De gebruiker moet gegevens kunnen invullen
<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
<form action="verwerk.php" method="post"> <p>Jouw voornaam:</p> <input type="text" id="voornaam">
<input type="submit" value="Verzenden"> </form>
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
<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)
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
::-webkit-input-placeholder { color: red; }
::-moz-placeholder { color: red; }
:-ms-input-placeholder { color: red; }
::placeholder { color: red; }
Placeholder vormgeven
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!
<form autocomplete="off">
• Zet autocomplete af voor elk formulierveld • Je kan dit overroepen per individueel veld:
<input type="text" autocomplete>
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
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.
<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!
<label for="country">Your country:</label> <input type="text" list="countries" id="country">
Associeer vervolgens met een veld
Backward compatibility
De meeste browsers die datalist niet kennen, tonen een tekstveld, maar IE9 en lager tonen alle
datalist opties als tekst!
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">
<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>
<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>
<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
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>
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>
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
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>
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>
CSS has a :checked pseudo class for radio and checkbox elements
input:checked + label { color: purple; }
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>
<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.
Tip
• Je dubbelcheckt best elke interactiestap bij gebruik van de :valid of :invalid CSS pseudo-classes.
<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! :)
<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
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!
Plaats labels boven de velden
Veel minder oogfixaties en daarom sneller te begrijpen door je gebruiker
Vervang een label nooit door placeholder tekst
Placeholder tekst verdwijnt wanneer het veld focus krijgt, of wanneer je begint te typen.
Bij een zoekveld kan je ’t eventueel vervangen door het title attribuut
Screenreaders lezen dan de waarde van het titel attribuut voor.
Verplichte velden: duidelijk zijn!
Kleurverschil, vette tekst of * zijn niet voldoende. Plaats (verplicht) vóór het veld.
Probeer het standaard uitzicht van formulierelementen zoveel mogelijk te behouden. Gebruikers herkennen ze in een oogopslag.
Veel gebruikers gebruiken het keyboard om te navigeren door je formuliervelden. Test dit altijd eens.
Meer weten?
Meer weten?
Meer weten?
S
Links en bronnen
• html5doctor.com • w3.org • wufoo.com/html5 • developer.mozilla.org • Codrops CSS reference