Een deel van de gebruikersinterface (GUI = Graphical User Interface) bestaat uit (invul)formulieren.
De gebruiker kan informatie ingeven in invulvelden, een selectie maken in een keuzelijst, een item kiezen door een item aan te vinken, een radioknop aanklikken voor een keuze, een datum uit een kalender kiezen, enzovoort.
Een goed gekozen titel van het formulier zorgt ervoor dat de gebruiker weet welke informatie hij/zij kan ingeven, kan wijzigen of kan verwijderen.
Je kan in de titel ook aangeven wat er van de gebruiker wordt verwacht bv. “Selectie klant”, “Beheer artikelen”, “Zoek leverancier”, enz.
De velden van een (invul)formulier krijgen meestal een geschikt label dat bij dat veld hoort (bv. html tag label).
Het label kan vóór of boven het veld staan.
Er wordt meestal aangeduid of het veld verplicht moet ingevuld worden.
Achter het label kan ook een foutboodschap getoond worden als de invoer niet voldoet aan bepaalde voorwaarden.
Een label mag met een hoofdletter beginnen en kan eventueel uit meerdere woorden bestaan vermits het eigenlijk “gewone” tekst is.
De inhoud van een (invul)veld kan van een specifiek (data)type zijn bv. een wachtwoord, een ja/nee keuzevak, een (decimaal) getal, een bedrag in valuta, enz.
Afhankelijk van het (data)type zal er in het formulier een specifiek veld moeten gebruikt worden. Zo wordt bij het ingeven van een wachtwoord de ingave vervangen door bv. bolletjes (html tag input type=’password’).
Een keuzelijst wordt dan weer samengesteld met de html tags select en option.
Nadat in een (invul)formulier de nodige gegevens zijn ingevuld of geselecteerd wil de gebruiker het formulier verlaten om bv. de gegevens te laten toevoegen aan een database of om een andere module op te roepen die gebruik maakt van de ingevulde of geselecteerde waarden van het formulier.
Hiervoor worden er in het formulier actieknoppen voorzien.
De tekst of het pictogram geeft aan welke actie er zal uitgevoerd worden bv. “toevoegen”, “leegmaken”, “zoeken”, “login”, “start”, enz.
Bij het uitwerken van een project is het belangrijk dat je een goede keuze maakt van de gebruikte kleuren. Soms moet je de reeds aanwezige “huisstijl” gebruiken. Er is dan een kleurenpallet vooropgesteld waaraan je je moet houden.
Bij het uitwerken van een website kan je bv. gebruik maken van de voorgedefiniëerde kleuren uit het CSS-bestand (bv. het W3.CSS bestand of het Bootstrap CSS bestand van w3schools.com).
In het CSS-bestand zijn ook specifieke lettertypen gedefiniëerd.
Je kan ook gebruik maken van (Bootstrap) thema’s waarbij de algehele vormgeving van de website een “eigen” karakter krijgt.

Een lijst bevat informatie die meestal uit een database wordt gehaald.
De titel geeft in een korte benaming weer welke informatie in de lijst kan gevonden worden bv. “Klantenlijst”, “Overzicht van de bestellingen”, “Resultaten van een zoekopdracht”, enz …
Er moet vooraf bepaald worden welke informatie er in de lijst moet opgenomen worden en in welke vorm.
Een kolom bevat informatie uit één of meerdere velden van de database tabel(len). Zo kan je bv. tekstdelen aan mekaar kleven: voornaam en familienaam, straat en huisnummer, postcode en gemeente, enz…
Specifieke velden kunnen in een lijst anders weergegeven worden zoals bv. een ja/nee veld kan met een aanvink vakje worden weergegeven, een bedrag kan decimalen of een valuta teken bevatten, een verwijzing naar een afbeelding kan vervangen worden door de afbeelding zelf, enz…
Het id-veld (primaire sleutel) wordt niet opgenomen in de lijst. Klantennummers, ordernummers, factuurnummers e.d. uiteraard wel.
De kolomkoppen moeten goed gekozen worden zodat duidelijk is tot welk domein de informatie in die kolom behoort bv. voornamen, gemeenten, telefoonnummers, enz…
De breedte van de kolommen moet voldoende breed zijn om voldoende informatie te tonen. Indien nodig moet een tekst terugloop ingesteld (of geprogrammeerd) worden. Er kan ook overwogen worden om meerdere weergave rijen per record te gebruiken.
De hoogte van elke rij moet zodanig gekozen worden dat de lijst duidelijk leesbaar is.
Net zoals bij de formulieren gebruik je dezelfde “huisstijl”.
De kleuren en lettertypes kunnen ook gehaald worden uit stijlbestanden.
De lijst kan zich ook aanpassen aan de grootte van het scherm door gebruik te maken van “responsive design” methoden (uit het CSS bestand).
Bij het tonen van een lijst worden de kolomkoppen meestal omgevormd tot hyperlinks of knoppen die kunnen dienen om de lijst te sorteren volgens dat criterium. Als de gebruiker op de link of knop klikt worden de rijen van de lijst gesorteerd volgens dat (achterliggend) veld.
Optioneel kunnen er extra knopjes voorzien worden om oplopend of aflopend te laten sorteren.
Een lange lijst tonen op een beeldscherm vereist dat de gebruiker (langdurig) door de lijst moet “scrollen”. Om dit op te vangen wordt er meestal een paginering ingesteld.
De paginering zorgt ervoor dat er maar een beperkt aantal records zichtbaar is en dat de gebruiker de pagineringsknoppen kan aanklikken om een volgende, vorige, eerste of laatste pagina op te roepen.
De paginering wordt ingesteld op een vooraf gedefiniëerd aantal rijen. De gebruiker kan eventueel een keuze maken uit het aantal rijen dat getoond wordt bv. per 10, 25, 50, 100 rijen.
De pagineringsknoppen kunnen bovenaan en/of onderaan de lijst worden getoond.