Gebruiksvriendelijke formulieren

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

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

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.

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)

Jip heb je een probleem dat ik zo de pagina's even naar mijn webspace over zet (geen reclame + source highligting ;))

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.

@SanThe

Werkt bij mij wel in IE en FF dat groeperen.

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

duidelijke en een tut waar ik zker wat aan ga hebben
ik wist niet dat dat label bestond eigelijk :p

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.

@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

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>

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

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.

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.

je bent bij extra een '; vergeten. (een van de laatste zinnen)

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

als ik naar Keuzelijsten ga en wat invoer krijg ik allemaal crap reclame, waarom?

@Petert:
Omdat dat reclame is die door funpic wordt toegevoegd...

Bedankt voor de tut :)
Als php beginner heb ik er heel veel aan =D

Interessant, maar jammer dat de link niet (meer) werkt.
Heeft iemand de code nog beschikbaar?

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