Bootstrap gör det enkelt att skapa tilltalande och anpassningsbara formulär genom att erbjuda en samling formulärkontrollklasser och komponenter. Dessa formulärkontrollklasser kan användas för att formatera inmatningsfält, kryssrutor, radioknappar, select, dropdowns och textområden på ett enhetligt sätt över hela webbplatsen.

Vanliga formulärkontrollklasser

form-control-klass

Denna klass används för att styla olika formelement, inklusive inmatningsfält, textområden och rullgardinsmenyer. När den används säkerställer den att formelement är responsiva och visuellt enhetliga över olika enheter och skärmstorlekar.

Viktiga egenskaper hos form-control-klassen

• Responsiv design: Formelement som är stylade med form-control anpassar automatiskt sin bredd för att fylla det tillgängliga utrymmet i sin behållare;
• Enhetlig stil: Genom att använda form-control får formelement en konsekvent stil, inklusive ramar, utfyllnad och typsnittsegenskaper;
• Fokus- och hovringstillstånd: form-control ger visuell återkoppling till användaren genom att ändra utseendet på formelement när de hovras över eller är i fokus.

form-check-klasser

• form-check: Denna klass stylar kryssrutor och radioknappar för att visa dem i linje och applicera enhetlig stil;
• form-check-input: Används på kryssrutor och radioknappens inmatningselement inom en form-check-behållare. Denna klass säkerställer enhetlig stil på inmatningselementen;
• form-check-label: Används för att styla etiketten som är kopplad till kryssrutor och radioknappar. Den säkerställer enhetlig stil på etiketterna och hjälper till att bibehålla justeringen med motsvarande inmatningselement.

Rutnätsystem för formulärlayout

Bootstraps rutnätsystem erbjuder ett kraftfullt verktyg för att organisera formulärelement i flerkolumnslayouter. Genom att använda rutnätsklasser som col-md-6, col-lg-4 och andra kan utvecklare arrangera formulärelement i responsiva, flexibla layouter som anpassar sig sömlöst till olika skärmstorlekar och enheter.

Viktiga egenskaper:

• Responsiva kolumner: Rutnätsklasser gör det möjligt för utvecklare att definiera bredden på formulärelement inom olika brytpunkter. Till exempel anger col-md-6 att kolumnen ska uppta halva bredden av sin behållare på mellanstora skärmar och större. På liknande sätt anger col-lg-4 en kolumnbredd på en tredjedel på stora skärmar;
• Flexibilitet: Det går att kombinera olika rutnätsklasser för att skapa komplexa formulärlayouter;
• Optimerad för mobil: Bootstraps rutnätsystem är i grunden mobilförst, vilket säkerställer att formulärlayouter ser bra ut på mindre skärmar som standard.

Resultat av det responsiva formulärnätets beteende

Formulärvalideringsstilar

Formulärvalideringsstilar ger visuell återkoppling till användare om giltigheten av deras inmatning. Dessa stilar inkluderar indikatorer för lyckade, felaktiga och varningsstatusar, vilket gör det enkelt för användare att förstå om deras inmatning uppfyller de angivna kriterierna.

I det givna exemplet:

• Klassen needs-validation läggs till för att aktivera Bootstraps valideringsstilar;
• Attributet novalidate används för att inaktivera webbläsarens inbyggda formulärvalidering;
• Inmatningsfältet för e-postadress har attributet required, vilket gör det obligatoriskt;
• Klasserna valid-feedback och invalid-feedback används för att visa återkopplingsmeddelanden för giltiga respektive ogiltiga inmatningar;
• Dessutom används JavaScript för att förhindra formulärinlämning om det finns ogiltiga fält och för att applicera klassen was-validated på formuläret.