Bootstrap gør det nemt at oprette attraktive og fleksible formularer ved at tilbyde et udvalg af formular kontrolklasser og komponenter. Disse kontrolklasser kan bruges til at style inputfelter, afkrydsningsfelter, radioknapper, select, dropdowns og tekstområder ensartet på hele hjemmesiden.

Almindelige formular kontrolklasser

form-control klasse

Denne klasse bruges til at style forskellige formelementer, herunder inputfelter, tekstområder og dropdowns. Når den anvendes, sikrer den, at formelementer er responsive og visuelt ensartede på tværs af forskellige enheder og skærmstørrelser.

Nøglefunktioner ved form-control klassen

• Responsivt design: Formelementer stylet med form-control tilpasser automatisk deres bredde for at udfylde den tilgængelige plads i deres container;
• Ensartet styling: Ved at anvende form-control får formelementer ensartet styling, herunder kanter, polstring og skriftegenskaber;
• Fokus- og hover-tilstande: form-control giver visuel feedback til brugeren ved at ændre udseendet af formelementer, når de holdes over eller er i fokus.

form-check klasser

• form-check: Denne klasse styler checkbox- og radioknap-inputs, så de vises på linje og får ensartet styling;
• form-check-input: Anvendes på checkbox- og radioknap-inputelementer inden for en form-check container. Denne klasse sikrer ensartet styling af inputelementerne;
• form-check-label: Bruges til at style etiketten, der er tilknyttet checkbox- og radioknap-inputs. Den sikrer ensartet styling af etiketterne og hjælper med at opretholde justering med de tilsvarende inputelementer.

Gitter-system til formularlayout

Bootstraps gitter-system tilbyder et effektivt værktøj til at organisere formelementer i flerkolonners layouts. Ved at anvende gitterklasser som col-md-6, col-lg-4 og andre, kan udviklere arrangere formelementer i responsive, fleksible layouts, der tilpasser sig problemfrit til forskellige skærmstørrelser og enheder.

Nøglefunktioner:

• Responsive kolonner: Gitterklasser gør det muligt for udviklere at definere bredden på formelementer ved forskellige breakpoints. For eksempel angiver col-md-6, at kolonnen skal optage halvdelen af containerens bredde på mellemstore og større skærme. Tilsvarende angiver col-lg-4 en kolonnebredde på en tredjedel på store skærme;
• Fleksibilitet: Det er muligt at kombinere gitterklasser for at skabe komplekse formularlayouts;
• Optimeret til mobil: Bootstraps gitter-system er grundlæggende mobil-først, hvilket sikrer, at formularlayouts ser gode ud på mindre skærme som standard.

Resultatet af den responsive formulargrids opførsel

Formularvalideringsstile

Formularvalideringsstile giver visuel feedback til brugerne om gyldigheden af deres indtastninger. Disse stilarter omfatter indikatorer for succes-, fejl- og advarselsstatus, hvilket gør det nemt for brugerne at forstå, om deres indtastning opfylder de nødvendige kriterier.

I det givne eksempel:

• Klassen needs-validation tilføjes for at aktivere Bootstraps valideringsstile;
• Attributten novalidate bruges til at deaktivere browserens indbyggede formularvalidering;
• Inputfeltet til e-mailadressen har attributten required, hvilket gør det obligatorisk;
• Klasserne valid-feedback og invalid-feedback bruges til at give feedbackmeddelelser for henholdsvis gyldige og ugyldige input;
• Derudover anvendes JavaScript til at forhindre formularindsendelse, hvis der er ugyldige felter, og til at tilføje klassen was-validated til formularen.