Crowlkit - Invulformulieren maken

Je kan invulveldenof ganse formulierenmaken en die gegevens bewaren voor de duur van een "sessie". 

Een sessie duurt zo lang dat de webapp open blijft staan in je browser. Sluit je de pagina af, dan zijn alle bewaarde gegevens weer weg. Indien we die data zouden bewaren, dan moeten we een GDPR-melding toevoegen.

Hoe voeg je een formulier toe?  
Een invoerveld moet niet noodzakelijk in een
-element staan, maar een knop met data-function="saveform" werkt enkel in een -element. 

Invoervelden

Je kan tekstvelden, selectieknoppen (aan- en uitvink), kleurselectors, uploadvelden en schuifregelaars toevoegen aan je formulieren en webapps.

1. Tekstinvoer

<input-text label="Uw naam" name="name" placeholder="Vul je naam in">
</input-text>

Je kan ook een groter invoerveld voor tekst maken door het attribuut "large" toe te voegen:

<input-text label="Korte biografie" large="" name="biography" placeholder="Schrijf in drie regels je biografie">
</input-text>

Je merkt dat elk invoerveld een aantal attributen heeft: 

  • label: de tekst die boven het invoerveld wordt geplaats. 
  • large: als je dit attribuut toevoegt, dan krijg je een groter invoerveld voor tekst. 
  • name: als je deze waarde voor de duur van de sessie wil bewaren, zorg dan dat je in dezelfde pagina niet twee keer dezelfde "name" gebruikt. 
  • placeholder: een standaardtekst die als "instructie" op de achtergrond van het invoerveld te plaatsen om de gebruiker in te lichten over wat precies moet worden ingevoerd. 
  • id: je kan een element naast een "name" ook een "id" geven. Ook die id moet "uniek" zijn binnen één pagina. Die id kan je gebruiken als je zelf code gaat toevoegen. 

2. Uitklapmenu's (select)

De thema-selector is in feite al een uitklapmenu. Maar je kan ook je eigen uitklapmenu's toevoegen. Een uitklapmenu bevat een aantal "opties". Die opties hebben een tekstinhoud, maar ook een value (een waarde). Het is die value die je kan bewaren of opvragen.  

Het label heeft het attribuut "for". Dat attribuut verwijst naar het id van het select-element.

<select id="autos">
     <option disabled="" selected="">KIES EEN AUTO</option>
     <option value="mercedes">Mercedes</option>
     <option value="skoda">Skoda</option>
</select>

Zoals je in het onderstaande voorbeeld ziet, bevat de eerste optie twee parameters:

  • disabled: dit betekent dat de gebruiker die niet kan "selecteren".
  • selected: de gebruiker ziet dit als eerste optie. De optie is standaard geselecteerd.

3. Aan- en uitvinken

Als de gebruiker maar twee mogelijkheden heeft, kan je in plaats van een selectiemenu makkelijker een input-checker toevoegen. Een input-checker kan je meerdere attributen meegeven:

<input-checker label_1="Penseel" label_2="Gom" name="pencil" id="pencil">
</input-checker>
  • label_1:de waarde die voor de knop staat (bijvoorbeeld: penseel)
  • label_2:de waarde die achter de knop staat (bijvoorbeeld: gom)
  • name:de naam om onder die naam te bewaren in geval je de formulier-inhoud wil bewaren
  • id:een uniek id
  • value:de initiële waarde. Als je de regelaar aanpast met de muis of de stem, dan wijzigt de value. In principe zijn er maar 2 mogelijke waardes. 0 komt overeen met de linkerpositie van de knop, 1 komt overeen met de rechterpositie van de knop.

4. Schuifregelaars

Met input-range kan je een schuifregelaar toevoegen aan je pagina. Je kan meerdere attributen meegeven aan je schuifregelaar:

<input-range id="dikte" label="Dikte penseel" name="pencilsize" min="5" max="120" value="20">
</input-range>
  • id:een unieke naam voor je schuifregelaar.
  • label:welke tekst plaats je voor de schuifregelaar.
  • name:een naam om onder die naam te bewaren in geval je de formulier-inhoud wil bewaren.
  • min:minimumwaarde van de schuifregelaar.
  • max:maximumwaarde van de schuifregelaar. 
  • value:de initiële waarde. Als je de schuifregelaar aanpast met de hand/muis, dan wijzigt deze waarde.

5. Kleurselectie

Het kan handig zijn om een kleurselectie toe te voegen voor bijvoorbeeld een tekenprogramma.

<input-color id="kleur" colormodes="" return="hex" value="#000000">
</input-color>

Je kan meerdere attributen toekennen:

  • id:een unieke naam voor je kleurselector.
  • name:een naam om onder die naam te bewaren in geval je de formulier-inhoud wil bewaren.
  • label:een tekst die als label voor de kleurselector verschijnt.
  • colormodes:een attribuut zonder waarde. Als je colormodes toevoegt, kan de gebruiker kiezen tussen hex, rgb en rgba. Bij rgba verschijnt automatisch een schuifregelaar om de transparantie in te stellen.
  • return:kan drie waardes bevatten: hex, rgb, rgba. Dit is de manier waarop de kleurselector de kleurwaarde teruggeeft. Bij hex krijg je bijvoorbeeld voor wit #ffffff terug, bij rgb in dat geval rgb(255,255,255).
  • value:de initiële waarde van de kleurselector. Dit attribuut wijzigt als de gebruiker een andere kleur selecteert.

6. Uploadveld

Een upload-zone uploadt in dit geval niet echt een document of afbeelding naar de server, maar naar je webapp. De afbeelding blijft bewaart voor de tijd van de sessie. De file-types bepalen welk soort bestanden door de upload-zone worden aanvaard.

<upload-zone return="source" file-types="image/jpeg,image/jpg,image/png">
   <p>Upload een afbeelding</p>
</upload-zone>
1. target

Dit attribuut bepaalt het doelelement waar de gedropte bestanden (afbeeldingen of video's) worden toegevoegd.

  • Voorbeeld:
  • Als geen target is opgegeven of het attribuut leeg is, wordt het bestand standaard aan de toegevoegd.
2. return

Dit attribuut bepaalt wat er wordt geretourneerd na het droppen van een bestand.

  • Mogelijke waarden:
    • "image": Retourneert een afbeeldingselement als het bestand een afbeelding is.
    • "video": Retourneert een video-element als het bestand een video is.
    • Andere waarden kunnen worden gebruikt om alleen de inhoud van het bestand in base64-formaat te retourneren.
Volgende pagina