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