Gebruiksvriendelijke formulieren

Door Eric Cartman, 19 jaar geleden, 4.201x bekeken

Iedere websitebouwer heeft of gaat wel eens te maken krijgen met formulieren. Maar waar sommigen geen rekening mee houden is de gebruiksvriendelijkheid van het formulier. Formulieren die niet gebruiksvriendelijk zijn kunnen je bezoeker kosten, en dat

Gesponsorde koppelingen

Inhoudsopgave

  1. Labels
  2. Accesskey
  3. Keuzelijsten
  4. Extra's

 

Er zijn 22 reacties op 'Gebruiksvriendelijke formulieren'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jan Koehoorn
Jan Koehoorn
19 jaar geleden
 
0 +1 -0 -1
Lijkt me voor beginners een handige opzet.

Tip mijnerzijds:
- je links naar voorbeelden werken (nog) niet
- ik zou er ook bij vermelden dat je het aantal velden tot een minimum moet beperken
- en als je ?cht een lang formulier wilt, dat je dan met pagina's moet gaan werken
- misschien ook een link erbij naar useit.com van Jacob Nielsen. Hij heeft erg veel over formulieren geschreven en weet alles van usability
Eric Cartman
Eric Cartman
19 jaar geleden
 
0 +1 -0 -1
Dankjewel Jan voor de tips, ik ga ze zeker gebruiken bij 'extra's'!
Het klopt inderdaad dat mijn links het niet deden (als het goed is was (--url--) zichtbaar), omdat funpic moeilijk deed... Maar als het goed is doen de links het nu wel...
Niels Beckers
Niels Beckers
19 jaar geleden
 
Jip: bedankt voor deze tutorial ik vind hem echt zeer leerrijk dat van de labels ga ik nu ook zelf gebruiken en de keuenlijsten vind ik ook ZEER interresant.
Bedankt.
Robert Deiman
Robert Deiman
19 jaar geleden
 
0 +1 -0 -1
Ik sluit me helemaal aan bij Jan en Niels. Ik vindt het een duidelijke tut., met ook wel nuttige informatie. (nu weet ik eindelijk hoe ik radiobuttons kan laten selecteren wanneer op de tekst wordt geklikt).
En ook het stukje van de accesskey vindt ik goed, Is wel heel handig. Is het ook mogelijk om bijvoorbeeld Ctrl+Alt daarvoor te gebruiken, of Ctrl+Shift? (die worden vaak niet gebruikt door andere progjes)
Eris -
Eris -
19 jaar geleden
 
0 +1 -0 -1
Jip heb je een probleem dat ik zo de pagina's even naar mijn webspace over zet (geen reclame + source highligting ;))
- SanThe -
- SanThe -
19 jaar geleden
 
0 +1 -0 -1
Erg interessante tut. Bedankt.
Vraagje: Klopt het dat het groeperen wel in Firefox werkt en niet in Internet Explorer? (Is bij mij in ieder geval zo)

Edit: Tip: Ik zou bij de verzendknop de 'V' ook even onderstrepen.
Kalle P
Kalle P
19 jaar geleden
 
0 +1 -0 -1
@SanThe

Werkt bij mij wel in IE en FF dat groeperen.
Hipska BE
Hipska BE
19 jaar geleden
 
0 +1 -0 -1
-- bij extra's zou ik eventueel ng icoontjes zetten --

bv. bij email een emailicoontje adres een brievenbusje en bij nickname een ventje en bij pasword een sleutel ofzo...

kan je de label ook aan de andere kant van je textbox laten zetten?
Henkjan
henkjan
19 jaar geleden
 
0 +1 -0 -1
duidelijke en een tut waar ik zker wat aan ga hebben
ik wist niet dat dat label bestond eigelijk :p


19 jaar geleden
 
0 +1 -0 -1
Toevoeging aan label. De label tag is voornamelijk belangrijk voor blinde mensen. Zet daarom niet Plaats cursor in tekst veld maar de naam van het veld. Zo kunnen zij zien wat er in dat veld moet komen.
Tip: Laat duidelijk zien welke velden er verplicht zijn. Dat kan met * maar zijn meestal niet zo zichtbaar. Ik heb een persoonlijke voorkeur voor deze manier, als je op een veld staat dat er dan staat verplicht of niet.
Eric Cartman
Eric Cartman
19 jaar geleden
 
0 +1 -0 -1
@Robert: Volgens mij moet je dan met Javascript gaan werken, maar dat weet ik niet helemaal zeker. Bovendien is het niet echt handig om andere toetsencombinaties te gaan maken, omdat windowsgebruikers gewendt zijn aan de alt+[letter] combinatie.

@Eris: Geen problemen mee hoor!

@SanThe: Zoals Kalle al zei, het groeperen in keuzelijsten werkt hier perfect in Internet Explorer. Waarschijnlijk ligt het aan je versie van de browser, misschien dat ie dat niet onderseund...

@Hipska: Bedankt voor de tip, ik ga het zeker gebruiken. Wat betreft je vraag over de label-tag: Hij kan overal, waar je maar wilt.

@Webmakelarij: Natuurlijk is de tabel-tag in eerste instantie voor de blinde internetters, maar is ook zeer handig voor de internetters die gewoon goed zicht hebben. (Je 'syntax' klopt niet helemaal: 'Zo kunnen zij zien wat er in dat veld moet komen. ' =p)
Wat betreft 'de verplichte-velden-kwestie'; ik doe het zelf liever zo. Dit is wat duidelijker (vindt ik zelf).
http://jerseyboy.je.funpic.de/formulieren/formulier5.html
Pim Vernooij
Pim Vernooij
19 jaar geleden
 
0 +1 -0 -1
De <label> tag is bij xhtml1.1 verplicht. Als je gewoon tekst tussen je formulier gaat zetten, is je pagina niet meer xhtml valid. Ook de <fieldset> tag is bij xhtml1.1 verplicht, misschien zou je daar iets over kunnen schrijven ?

/edit ik zie dat je in de link hierboven xhtml1.1 gebruikt, en ook de <fieldset> tag, maar het is nog steeds niet xhtml1.1 valid... de opbouw is zo:

<fieldset>
<form>
<label for"invoerveld"></label>
<input type="text" id="invoerveld" value=""/>
</form>
</fieldset>
Willem vp
Willem vp
19 jaar geleden
 
0 +1 -0 -1
@Webmakerij:
Leuk truukje, om met show/hide aan te geven of een veld al dan niet verplicht is. Het nadeel is echter dat je verplicht elk veld moet aanklikken om te kijken of je er iets moet invullen, en dat is toch niet zo gebruikersvriendelijk. Ik zou het zelf dan ook altijd combineren met het al eerder genoemde * of een afwijkend kleurtje voor verplichte velden.

@Jip:
Er zitten nog wat typo's in je formulier5, zoals laber ipv label en acceskey ipv accesskey.
Jelmer -
Jelmer -
19 jaar geleden
 
0 +1 -0 -1
Nu we toch even bezig zijn met acceskey's onderstrepen, hoe zet je dan een streep in een <input type="button|submit|reset"/>? Of zit hier nog een klein gebrek in de toegankelijkheid geboden door browsers.

Misschien is het ook een idee om een scriptje te maken dat de acceskey's onderstreept (automatisch) waneer je alt (bij mij trouwens ctrl) indrukt. Ik zal er eens over nadenken.


19 jaar geleden
 
0 +1 -0 -1
Quote:
Ook de <fieldset> tag is bij xhtml1.1 verplicht,
Wel, mijn site is xhtml 1.1 valid, en ik gebruik geen fielsets. Het gaat erom dat je je form in een containing tag zet, niet speciaal in een fielset.
Niels Beckers
Niels Beckers
19 jaar geleden
 
0 +1 -0 -1
je bent bij extra een '; vergeten. (een van de laatste zinnen)
Eric Cartman
Eric Cartman
19 jaar geleden
 
0 +1 -0 -1
Jelmer:
Nu we toch even bezig zijn met acceskey's onderstrepen, hoe zet je dan een streep in een <input type="button|submit|reset"/>? Of zit hier nog een klein gebrek in de toegankelijkheid geboden door browsers.

Misschien is het ook een idee om een scriptje te maken dat de acceskey's onderstreept (automatisch) waneer je alt (bij mij trouwens ctrl) indrukt. Ik zal er eens over nadenken.


-- edit --
Bedankt niels, daar heb ik even overheen gekeken...

Ik ben er zelf ook nog niet helemaal achter hoe je op buttons een letter kunt onderstrepen, al heb ik dat wel eens gezien... Je zou bijvoorbeeld de broncode van een site die dat heeft kunnen bekijken, daar leer je ook best veel van...
Petert
Petert
19 jaar geleden
 
0 +1 -0 -1
als ik naar Keuzelijsten ga en wat invoer krijg ik allemaal crap reclame, waarom?
Dutchcamel
dutchcamel
19 jaar geleden
 
0 +1 -0 -1
@Petert:
Omdat dat reclame is die door funpic wordt toegevoegd...
Altin
Altin
19 jaar geleden
 
0 +1 -0 -1
Bedankt voor de tut :)
Als php beginner heb ik er heel veel aan =D
Burdy
Burdy
19 jaar geleden
 
0 +1 -0 -1
Interessant, maar jammer dat de link niet (meer) werkt.
Heeft iemand de code nog beschikbaar?
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Eric Cartman
Eric Cartman
19 jaar geleden
 
0 +1 -0 -1
De code staat gewoon in de tutorial zelf, de links waren alleen met een doctype, html, head en body erbij zodat je het in werking kon zien...

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Labels
  2. Accesskey
  3. Keuzelijsten
  4. Extra's

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.