Formulieren. Best practices

Transcriptie

1 Formulieren Best practices

2 Waarom HTML formulieren: - Verzamelen gegevens die door bezoekers van website worden achtergelaten. - Bieden mogelijkheid voor bezoekers om te communiceren met website eigenaar. - Geven interactiviteit aan een website.

3 Typische werking van een formulier

4 1 De gebruiker vult het formulier in

5 2 De gebruiker verzendt het formulier

6 3 De server doet iets met de ontvangen gegevens

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

8 5 De browser toont het antwoord aan de gebruiker 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 Maak een formulier in HTML <form>  </form>

12 Essentiële form attributen <form action="verwerk.php" method="post" >  </form> Meer info over deze attributen

13 Het formulier moet verzonden kunnen worden <form action="verwerk.php" method="post">  <input type="submit" value="verzenden"> </form> Of je kan het button element gebruiken

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

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

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 Het invulveld moet een name krijgen (wordt meegestuurd naar server) <form action="verwerk.php" method="post"> <label for="voornaam">voornaam:</label> <input type="text" id="voornaam" name="voornaam" > <input type="submit" value="verzenden"> </form>

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 Placeholder vormgeven ::-webkit-input-placeholder { color: red; } ::-moz-placeholder { color: red; } :-ms-input-placeholder { color: red; } ::placeholder { color: red; }

23 <input type="text" autofocus >

24

25 focus vormgeven input:focus { outline: 0; /* verbergt standaard focus style */ border: 1px solid blue; } 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 Een required formulierveld vormgeven :required { } border-bottom: 3px solid tomato;

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

32 <input type="text" pattern="[0-9][a-z]{3}" >

33

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 Definieer eerst een 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> Wordt niet getoond!

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

38

39

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=" "> </label> <input type="text" name=" " > <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=" "> </label> <input type="text" name=" "> <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=" ">

73 <input type=" ">

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

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

76 Tip Je dubbelcheckt best elke interactiestap bij gebruik van de :valid of :invalid CSS pseudoclasses.

77 <input type=" " required >

78 <input type=" ">

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

92 <input type="date" min=" " max=" " > Je kan de min en max attributen gebruiken Andere mogelijke types: month, week, datetime, time

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.