Form

Elk veld in een formulier bestaat uit een .input met een .input__label en een .input__control. De input heeft een id nodig, het label element verwijst naar dat id met het for attribuut.

Voeg de class .input--invalid toe aan invalide velden.
Eventuele errors worden in een .input__error blok getoond, tussen het label en de input.

Extra aanwijzingen kunnen in een .input__hint geplaatst worden. Voorzie de hint ook van een ID, en verwijs in de input met het attribuut aria-describedby naar dat ID. Op die manier kan een screenreader ook de relatie tussen de input en de hint leggen.

Verder knop

Gebruik als verder knop een button tag ipv een <input type="submit">. Internet Explorer rendert de pagina niet goed wanneer je een input tag gebruikt.

HTML5 input types

Gebruik waar mogelijk de HTML5 input types (number, email), met uitzondering van het type date. Kijk voor de mogelijkheden op MDN.

Bijvoorbeeld Frank Masmeijer
U heeft het veld Naam beheerder nog niet ingevuld
jaar
toevoeging
  of naar de vorige stap

Bestanden upload

Voor het uploaden van bestanden biedt Uno alleen de styling van de componenten. Het afhandelen van de upload is afhankelijk van de gekozen techniek.

De gekozen bestanden worden getoond in een .list-files(meerdere bestanden) of .list-file bij enkele bestanden.
Vermeld in de title van de verwijder knop ook de bestandsnaam

Door het attribuut multiple op de input te plaatsen, kunnen er meerdere bestanden tegelijk geupload worden. Het is aan te raden de gekozen bestanden in javascript bij te houden, aangezien deze lijst wordt overschreven zodra de gebruiker weer op 'Bestand uploaden' klikt en een ander bestand kiest.

  • c50bed25.jpg JPG, 396.05 kB
  • formulier.pdf PDF, 1.05 mB
Toegestane bestanden: PDF, Word, afbeeldingen. Maximale bestandsgrootte 5mB
Eventuele foutmeldingen worden onder de bestanden getoond.
c50bed25.jpg JPG, 396.05 kB

input groottes

Stem het formaat van een input af op de te verwachten inhoud. Een veld voor een postcode hoeft niet 100% van de beschikbare breedte in te nemen. Met de verschillende modifiers kan een input vergroot / verkleind worden.

Valuta input

Als je valuta als input verwacht, kun je de volgende HTML-structuur en modifier class gebruiken.

Euro
Dollar

Horizontale uitlijning labels

Voor medewerkersschermen bestaat er ook de mogelijkheid om de labels voor het inputveld te plaatsten. gebruik hiervoor de class input--horizontal.

Deze variant gebruiken we alleen voor medewerkersschermen. Voor klantschermen gebruik je altijd de variant met het label erboven. We willen klanten door schermen heen leiden en hanteren het principe van één vraag per pagina. Medewerkers willen vaak een overzicht van alle gegevens, daarom mag je daar van dit principe afwijken. Om te voorkomen dat input--horizontal per abuis op klantschermen terecht komt, werkt de modifier alleen als de .theme--xxl-breakpoint aan de body is meegegeven.

Bijvoorbeeld Frank Masmeijer
Bijvoorbeeld Frank Masmeijer
U heeft het veld Naam beheerder nog niet ingevuld

Benodigde stylesheets

  • /uno/components/button/button.css
  • /uno/components/form/form.css
  • /uno/components/form/input.css
  • /uno/components/form/file.css
  • /uno/components/form/checkbox.css
  • /uno/components/label/label.css