Bootstrap maakt het eenvoudig om aantrekkelijke en aanpasbare formulieren te creëren door een verzameling formulierelement-klassen en componenten aan te bieden. Deze formulierelement-klassen kunnen worden gebruikt om invoervelden, selectievakjes, keuzerondjes, selectievakken, dropdowns en tekstvakken consistent te stylen op de gehele website.

Veelgebruikte formulierelement-klassen

form-control klasse

Deze klasse wordt gebruikt om verschillende formelementen te stylen, waaronder invoervelden, tekstgebieden en selectievakjes. Wanneer toegepast, zorgt het ervoor dat formelementen responsief zijn en visueel consistent blijven op verschillende apparaten en schermformaten.

Belangrijkste kenmerken van de form-control klasse

• Responsief ontwerp: Formelementen gestyled met form-control passen automatisch hun breedte aan om de beschikbare ruimte binnen hun container op te vullen;
• Uniforme styling: Door form-control toe te passen, krijgen formelementen een consistente stijl, inclusief randen, opvulling en lettertype-eigenschappen;
• Focus- en hoverstatussen: form-control biedt visuele feedback aan gebruikers door het uiterlijk van formelementen te wijzigen wanneer ze worden aangewezen of gefocust.

form-check klassen

• form-check: Deze klasse stylet checkbox- en radioknop-invoervelden zodat ze inline worden weergegeven en voorziet ze van consistente styling;
• form-check-input: Toegepast op checkbox- en radioknop-invoervelden binnen een form-check container. Deze klasse zorgt voor een consistente stijl van de invoervelden;
• form-check-label: Gebruikt om het label te stylen dat hoort bij checkbox- en radioknop-invoervelden. Het zorgt voor een consistente stijl van de labels en helpt bij het behouden van de uitlijning met de bijbehorende invoervelden.

Rastersysteem voor formulierlay-out

Het rastersysteem van Bootstrap biedt een krachtig hulpmiddel voor het organiseren van formelementen in meerkoloms lay-outs. Door gebruik te maken van rasterklassen zoals col-md-6, col-lg-4 en andere, kunnen ontwikkelaars formelementen rangschikken in responsieve, flexibele lay-outs die zich naadloos aanpassen aan verschillende schermformaten en apparaten.

Belangrijkste kenmerken:

• Responsieve kolommen: Rasterklassen stellen ontwikkelaars in staat om de breedte van formelementen binnen verschillende breekpunten te definiëren. Bijvoorbeeld, col-md-6 geeft aan dat de kolom de helft van de breedte van zijn container moet innemen op middelgrote schermen en groter. Evenzo specificeert col-lg-4 een kolombreedte van een derde op grote schermen;
• Flexibiliteit: Het combineren van verschillende rasterklassen maakt het mogelijk om complexe formulierlay-outs te creëren;
• Geoptimaliseerd voor mobiel: Het rastersysteem van Bootstrap is van nature mobile-first, waardoor formulierlay-outs standaard goed weergegeven worden op kleinere schermen.

Resultaat van het gedrag van het responsieve formulierrooster

Formulier validatiestijlen

Formulier validatiestijlen bieden visuele feedback aan gebruikers over de geldigheid van hun invoer. Deze stijlen omvatten indicatoren voor succes-, fout- en waarschuwingsstatussen, waardoor gebruikers eenvoudig kunnen begrijpen of hun invoer aan de vereiste criteria voldoet.

In het gegeven voorbeeld:

• De klasse needs-validation wordt toegevoegd om de validatiestijlen van Bootstrap in te schakelen;
• Het attribuut novalidate wordt gebruikt om de browser-eigen formulier validatie uit te schakelen;
• Het invoerveld voor het e-mailadres heeft het attribuut required, waardoor het verplicht is;
• De klassen valid-feedback en invalid-feedback worden gebruikt om feedbackberichten te tonen voor respectievelijk geldige en ongeldige invoer;
• Daarnaast wordt JavaScript gebruikt om het verzenden van het formulier te voorkomen als er ongeldige velden zijn en om de klasse was-validated toe te passen op het formulier.