Toegankelijke en semantische HTML formulieren

109
Formulieren Best practices

Transcript of Toegankelijke en semantische HTML formulieren

FormulierenBest practices

HTML formulieren laten de gebruiker data naar je webpagina verzenden.

Typische werking van een formulier

De gebruiker vult het formulier in

1

De gebruiker verzendt het formulier

2

De server doet iets met de ontvangen gegevens

3

De server stuurt een antwoord terug naar de browser van de gebruiker

4

De browser toont het antwoord aan de gebruiker

5

Bedankt! We hebben je gegevens goed ontvangen!

Het verwerken van de gegevens aan de serverkant moet via een

programmeertaal als php gebeuren.

Formuliermogelijkheden in HTML

<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)

Attributen voor formuliervelden

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

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 type="text" autofocus>

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!

<input type="text" autocomplete>

Standaard waarde—toont eerder ingevulde gegevens

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

<form autocomplete="off">

• Zet autocomplete af voor elk formulierveld • Je kan dit overroepen per individueel veld:

<input type="text" autocomplete>

<input type="text" required>

:required { border-bottom: 3px solid tomato; }

Een required formulierveld vormgeven

:optional { border: 1px solid green; }

Een niet-required formulierveld vormgeven

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

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">

Dit is een aanvaardbare fall-back in oudere browsers

<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

Formulierelementen

Flashback: wat zijn de belangrijkste formulierelementen van HTML4?

<input type="text">

Met label

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

<textarea>Your text</textarea>

Met label

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

<input type="password">

Met label

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

<input type="file">

Met label

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

<input type="submit">

<input type="radio">

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

fieldset en legend

<input type="checkbox">

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; }

<select> <option>Nederlands</option> <option>African</option> </select>

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>

Nieuwe formelementen in HTML5

<input type="search">

<input type="search">

<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.

<input type="email">

<input type="email">

:invalid { border: 1px solid red; }

invalid formelementen vormgeven

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

valid formelementen vormgeven

Tip

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

<input type="email" required>

<input type="email">

<input type="url">

<input type="url">

<input type="url">

<input type="tel">

<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="tel">

<input type="number">

<input type="number">

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

<input type="range">

Wanneer je input verwacht zoals number, maar minder specifiek

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

<input type="date">

<input type="date">

<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

<input type="date">

<input type="color">

<input type="color">

The color picker on Blackberry

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!

Gebruiksvriendelijke en toegankelijke formulieren

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.

Gebruik fieldset, zeker bij langere formulieren

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

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

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