NL

Forms

Buttons
   
        

        
   
        

        
   
        

        
Buttons inside btn-container

<a href> tag<a href> tag
Buttons only icon (1:1 squared/round)




form-control
form-check checkbox
form-check checkbox with icon
btn-check checkbox
input-group btn-check checkbox
form-check radio
form-check radio with icon
btn-check radio
input-group btn-check radio
Label change on checked
form-check form-switch
form-check form-switch checkbox
NeeJa, graag
EuroUS Dollar
form-check form-switch radio
Input groups
€
€
€
€,00
m2

className .form-control ON the input-group.
Use label with "for" on input-group-text.

Help text

Please use a minimum of 8 characters and include at least 1 number.

Forgot password?

File inputs (JS)

Toegestane bestanden zijn txt, xml, csv, xls, xlsx, doc, docx, json, pdf, zip, jpg, jpeg en png. Bestanden mogen maximaal 5 MB groot zijn. Afbeeldingen dienen minimaal 300 pixels breed of hoog te zijn.

AddressLookup (JS)
Password switch (JS)
Datepicker (Flatpickr JS)
Color type (JS)
Range type (JS)
€
€
€
Min
Max
Floating labels (JS)
Floating labels on load (JS)
form-inline
form-inline with columns

(create space with empty cols)

form-inline with labels as column

Voorbeeldformulieren

Gebruk deze forms om snel je eigen form op te zetten.


Goede regels voor formulieren:

  • Gebruik <fieldset> en <legend> om delen logisch en overzichtelijk te houden.
  • Velden horen een logische breedte te hebben die past bij de input, NIET 100% breed.
  • Gebruik GEEN placeholders als label.
    (tenzij als floating label of hele korte forms zoals een login)

Persoonsgegevens
Contactgegevens
Adresgegevens (with AddressLookup)
Bedrijfsgegevens
Register

Please use a minimum of 8 characters and include at least 1 number.

Login

Forgot password?

Offerte
Reservering
Contact
forms:.title