Formulieren

Voorbeelden en gebruiksrichtlijnen voor besturingsstijlen voor formulieren, lay-outopties en aangepaste componenten voor het maken van een breed scala aan formulieren.

Overzicht

De formulierbesturingen van Bootstrap breiden onze opnieuw opgestarte formulierstijlen uit met klassen. Gebruik deze klassen om u aan te melden voor hun aangepaste weergaven voor een meer consistente weergave tussen browsers en apparaten.

Zorg ervoor dat u een geschikt type -attribuut gebruikt voor alle invoer (bijv. , email voor e-mailadres of number voor numerieke informatie) om te profiteren van nieuwere invoeropties zoals e-mailverificatie, nummerkeuze en meer.

Hier is een snel voorbeeld om de vormstijlen van Bootstrap te demonstreren. Blijf lezen voor documentatie over vereiste klassen, formulierindeling en meer.

Formulierbesturingselementen

Bekijk onze aangepaste formulieren om <select> s.

Voor bestandsinvoer, vervang .form-control voor .form-control-file.

Grootte

Stel hoogtes in met behulp van klassen als .form-control-lg en .form-control-sm.

Alleen-lezen

Voeg de readonly boolean attribuut op een invoer om wijziging van de waarde van de invoer te voorkomen. Alleen-lezen invoer lijkt lichter (net als uitgeschakelde invoer), maar behoudt de standaardcursor.

Alleen-lezen platte tekst

Als u <input readonly> -elementen in uw formulier wilt opmaken als platte tekst, gebruikt u de .form-control-plaintext class om de standaard opmaak van formuliervelden te verwijderen en de juiste marge en opvulling te behouden.

Selectievakjes en radios

Standaard selectievakjes en radios zijn verbeterd met behulp van .form-check, een enkele klasse voor beide invoertypes die de lay-out en het gedrag van hun HTML-elementen verbetert. Selectievakjes zijn voor het selecteren van een of meer opties in een lijst, terwijl radios zijn voor het selecteren van een van de vele opties.

Uitgeschakelde selectievakjes en radios worden ondersteund, maar om een not-allowed cursor op zweeftekst van de bovenliggende <label>, u moet het disabled -kenmerk toevoegen aan het .form-check-input. Het uitgeschakelde kenmerk past een lichtere kleur toe om de status van de invoer aan te geven.

Het gebruik van selectievakjes en radios is gebouwd om HTML-gebaseerde formuliervalidatie te ondersteunen en biedt beknopte, toegankelijke labels. Als zodanig zijn onze <input> s en <label> s elementen op hetzelfde niveau, in tegenstelling tot een <input> binnen een <label>. Dit is iets meer uitgebreid omdat je id en for attributen moet specificeren om de <input> en <label>.

Standaard (gestapeld)

Standaard wordt elk aantal selectievakjes en radios die direct op hetzelfde niveau staan verticaal gestapeld en op de juiste afstand met .form-check.

Inline

Groepeer selectievakjes of radios op dezelfde horizontale rij door .form-check-inline toe te voegen aan een .form-check.

Zonder labels

Voeg .position-static toe aan invoer binnen .form-check die geen labeltekst hebben. Vergeet niet om nog steeds een soort label voor ondersteunende technologieën te verstrekken (gebruik bijvoorbeeld aria-label).

Layout

Aangezien Bootstrap display: block en width: 100% toepast op bijna al onze formulierelementen , formulieren worden standaard verticaal gestapeld. Er kunnen aanvullende klassen worden gebruikt om deze lay-out per formulier te variëren.

Formuliergroepen

De .form-group -klasse is de gemakkelijkste manier om wat structuur aan formulieren toe te voegen. Het biedt een flexibele klasse die de juiste groepering van labels, bedieningselementen, optionele helptekst en formuliervalidatieberichten aanmoedigt. Standaard is het alleen van toepassing margin-bottom, maar het pikt extra stijlen op in .form-inline als dat nodig is. Gebruik het met <fieldset> s, <div> s of bijna elk ander element.

Formulierraster

Meer complexe formulieren kunnen worden gebouwd met behulp van onze rasterklassen. Gebruik deze voor formulierlay-outs waarvoor meerdere kolommen, verschillende breedtes en extra uitlijningsopties nodig zijn.

Formulierrij

U kunt ook .row ruilen voor .form-row, een variatie op onze standaard rasterrij die de standaard kolomgoten overschrijft voor strakkere en compactere lay-outs.

Meer complexe lay-outs kunnen ook worden gemaakt met het rastersysteem.

Horizontale vorm

Maak horizontale formulieren met het raster door de klasse .row toe te voegen om groepen te vormen en de .col-*-* klassen om de breedte van uw labels en besturingselementen te specificeren. Zorg ervoor dat u .col-form-label toevoegt aan uw <label> s, zodat ze verticaal gecentreerd zijn met de bijbehorende besturingselementen voor formulieren.

Soms moet je misschien marge- of opvulhulpprogrammas gebruiken om die perfecte uitlijning te creëren die je nodig hebt. We hebben bijvoorbeeld de padding-top op ons label met gestapelde radio-ingangen verwijderd om de tekstbasislijn beter uit te lijnen.

Horizontaal formulierlabel grootte

Kolomgrootte

Zoals getoond in de vorige voorbeelden, kunt u met ons rastersysteem een willekeurig aantal .col s binnen een .row of .form-row. Ze verdelen de beschikbare breedte gelijkmatig over de twee. U kunt ook een subset van uw kolommen kiezen om meer of minder ruimte in te nemen, terwijl de resterende .col s de rest gelijkmatig verdelen, met specifieke kolomklassen zoals .col-7.

Auto-sizing

In het onderstaande voorbeeld wordt een flexbox-hulpprogramma gebruikt om de inhoud verticaal te centreren en verandert .col naar .col-auto zodat uw kolommen slechts zoveel ruimte innemen als nodig is. Anders gezegd: de kolombegrootte zelf op basis van de inhoud.

Je kunt dat dan nogmaals remixen met maatspecifieke kolomklassen.

En natuurlijk worden besturingselementen voor aangepaste formulieren ondersteund.

Inline formulieren

Gebruik de .form-inline klasse om een reeks labels, formulierbesturingen en knoppen op één horizontale rij weer te geven. Formulierbesturingselementen in inline-formulieren verschillen enigszins van hun standaardstatus.

• Besturingselementen zijn display: flex, waardoor HTML-witruimte wordt samengevouwen en u uitlijningscontrole kunt bieden met spacing en flexbox-hulpprogrammas.
• Besturingselementen en invoergroepen ontvangen width: auto om de Bootstrap-standaard width: 100% te overschrijven.
• Besturingselementen worden alleen inline weergegeven in viewports die ten minste 576 px breed zijn om rekening te houden met smalle viewports op mobiele apparaten.

Mogelijk moet u de breedte en uitlijning van afzonderlijke formulierbesturingselementen handmatig aanpassen met afstandsbedieningen (zoals hieronder weergegeven). Zorg er ten slotte voor dat u altijd een <label> toevoegt aan elk formulierelement, zelfs als u het moet verbergen voor bezoekers die geen schermlezer zijn met .sr-only .

Aangepaste formulierbesturingen en selecties worden ook ondersteund.

Help-tekst

Helptekst op blokniveau in formulieren kan worden gemaakt met .form-text (voorheen bekend als .help-block in v3). Inline helptekst kan flexibel worden geïmplementeerd met behulp van elk inline HTML-element en hulpprogramma-klassen zoals .text-muted.

De helptekst onder de invoer kan worden opgemaakt met .form-text. Deze klasse bevat display: block en voegt een bovenmarge toe voor een gemakkelijke spatiëring van de bovenstaande invoer.

Inline-tekst kan elk typisch inline HTML-element gebruiken (of het nu een <small>, <span> of iets anders is) met niets meer dan een utility-klasse.

Uitgeschakelde formulieren

Voeg het disabled booleaanse attribuut toe aan een invoer om gebruikersinteracties te voorkomen en te laten verschijnen lichter.

Voeg de disabled kenmerk toe aan een <fieldset> om alle besturingselementen binnenin uit te schakelen.

Validatie

Geef uw gebruikers waardevolle, bruikbare feedback met HTML5-formuliervalidatie, beschikbaar in al onze ondersteunde browsers. Kies uit de standaardvalidatiefeedback van de browser, of implementeer aangepaste berichten met onze ingebouwde klassen en starters JavaScript.

Hoe het werkt

Hier is hoe formuliervalidatie werkt met Bootstrap:

• HTML-formuliervalidatie wordt toegepast via CSSs twee pseudo-klassen, :invalid en :valid. Het is van toepassing op <input>, <select> en <textarea> -elementen.
• Bootstrap scopes de :invalid en :valid stijlen naar bovenliggende .was-validated klasse, meestal toegepast op de <form>. Anders wordt elk verplicht veld zonder waarde weergegeven als ongeldig bij het laden van de pagina. Op deze manier kun je kiezen wanneer je ze wilt activeren (meestal nadat een poging is gedaan om het formulier in te dienen).
• Als reserve kunnen .is-invalid en .is-valid klassen kunnen worden gebruikt in plaats van de pseudo-klassen voor validatie aan de serverzijde. Ze hebben geen .was-validated bovenliggende klasse nodig.
• Vanwege beperkingen in de manier waarop CSS werkt, kunnen we (momenteel) geen stijlen toepassen op een <label> die vóór een formulierbesturingselement in de DOM komt zonder de hulp van aangepast JavaScript.
• Alle moderne browsers ondersteunen de constraint validation API, een reeks JavaScript-methoden voor het valideren van formulierbesturingselementen.
• Feedbackberichten kunnen de standaardinstellingen van de browser gebruiken (verschillend voor elke browser, en unstylaable via CSS) of onze aangepaste feedbackstijlen met aanvullende HTML en CSS.
• U kunt aangepaste validiteitsberichten verstrekken met setCustomValidity in JavaScript.

Met dat in gedachten, overweeg dan de volgende demos voor onze aangepaste formuliervalidatiestijlen, optionele server-side klassen en standaard browserinstellingen.

Aangepaste stijlen

Voor aangepaste Bootstrap-formuliervalidatieberichten moet u het novalidate booleaanse kenmerk toevoegen aan uw <form>. Dit schakelt de standaard feedback-tooltips van de browser uit, maar biedt nog steeds toegang tot de formuliervalidatie-APIs in JavaScript. Probeer het onderstaande formulier in te dienen; ons JavaScript onderschept de verzendknop en geeft feedback aan u door.

Wanneer u probeert te verzenden, ziet u de :invalid en :valid stijlen toegepast op uw formulierbesturingselementen.

Browserstandaards

Bent u niet geïnteresseerd in aangepaste feedbackberichten voor validatie of het schrijven van JavaScript om het gedrag van formulieren te veranderen? Allemaal goed, je kunt de standaardinstellingen van de browser gebruiken. Probeer het onderstaande formulier te verzenden. Afhankelijk van uw browser en besturingssysteem ziet u een iets andere stijl van feedback.

Hoewel deze feedbackstijlen niet kunnen worden gestileerd met CSS, kunt u de feedbacktekst nog steeds aanpassen via JavaScript.

Serverzijde

We raden aan om validatie aan de clientzijde te gebruiken, maar als u serverzijde nodig heeft, kunt u ongeldige en geldige formuliervelden aangeven met .is-invalid en .is-valid. Merk op dat .invalid-feedback ook wordt ondersteund door deze klassen.

Ondersteunde elementen

Onze voorbeeldformulieren tonen native tekstuele <input> s hierboven, maar er zijn formuliervalidatiestijlen beschikbaar voor onze besturingselementen voor aangepaste formulieren.

Tooltips

Als uw formulierlay-out het toelaat, kunt u de .{valid|invalid}-feedback klassen voor .{valid|invalid}-tooltip klassen om validatiefeedback weer te geven in een vormgegeven tooltip. Zorg ervoor dat u een ouder heeft met position: relative erop voor het plaatsen van tooltips. In het onderstaande voorbeeld hebben onze kolomklassen dit al, maar uw project vereist mogelijk een alternatieve configuratie.

Aangepaste formulieren

Voor nog meer maatwerk en kruis browserconsistentie, gebruik onze volledig aangepaste formulierelementen om de standaardinstellingen van de browser te vervangen. Ze zijn gebouwd bovenop semantische en toegankelijke opmaak, dus ze zijn solide vervangers voor elk standaard formulierbesturingselement.

Selectievakjes en radios

Elk selectievakje en radio is verpakt in een <div> met een broer of zus <span> om ons aangepaste besturingselement te maken en een <label> voor de begeleidende tekst. Structureel is dit dezelfde aanpak als onze standaard .form-check.

We gebruiken de sibling selector (~) voor al onze <input> staten – zoals :checked – om onze aangepaste formulierindicator correct op te maken. In combinatie met de .custom-control-label class, kunnen we ook de tekst voor elk item opmaken op basis van de <input> s staat.

We verbergen de standaard <input> met opacity en gebruiken de .custom-control-label om een nieuwe aangepaste formulierindicator in plaats daarvan met ::before en ::after. Helaas kunnen we geen aangepaste versie maken van alleen de <input> omdat CSSs content niet op dat element werkt.

In de aangevinkte staten gebruiken we base64 embedded SVG-pictogrammen van Open Iconic. Dit geeft ons de beste controle over styling en positionering in browsers en apparaten.

Selectievakjes

Aangepaste selectievakjes kan ook de :indeterminate pseudoklasse gebruiken wanneer deze handmatig is ingesteld via JavaScript (er is geen beschikbaar HTML-kenmerk om het op te geven).

Als je jQuery gebruikt, zou zoiets als dit voldoende moeten zijn:

Radios

Inline

Uitgeschakeld

Aangepaste selectievakjes en radios kunnen ook worden uitgeschakeld. Voeg het disabled booleaanse attribuut toe aan het <input> en de aangepaste indicator en labelbeschrijving worden automatisch opgemaakt.

Selecteer menu

Aangepast <select> menus hebben alleen een aangepaste klasse nodig, .custom-select om de aangepaste stijlen te activeren.

U kunt ook kiezen uit kleine en grote aangepaste selecties om overeenkomen met onze tekstinvoer van vergelijkbare grootte.

Het multiple -attribuut wordt ook ondersteund:

Net als het size attribuut:

Bestandsbrowser

De bestandsinvoer is het meest van het stel en vereist extra JavaScript als je ze wilt koppelen met functioneel Kies bestand… en geselecteerde bestandsnaam tekst.

We verbergen het standaardbestand <input> via en geef in plaats daarvan de stijl <label>. De knop wordt gegenereerd en gepositioneerd met ::after. Ten slotte declareren we een width en height op de <input> voor de juiste afstand voor omringende inhoud .

De strings vertalen of aanpassen

De :lang() pseudo-klasse wordt gebruikt om de vertaling van de “Browse” -tekst in andere talen. Vervang of voeg vermeldingen toe aan de $custom-file-text Sass-variabele met de relevante taal-tag en gelokaliseerde strings. De Engelse strings kunnen op dezelfde manier worden aangepast.Hier is bijvoorbeeld hoe iemand een Spaanse vertaling kan toevoegen (de taalcode van het Spaans is es):

Hier is lang(es) in actie op de aangepaste bestandsinvoer voor een Spaanse vertaling:

U moet de taal van uw document (of substructuur daarvan) correct instellen om de juiste tekst te laten zien. Dit kan worden gedaan met het lang -attribuut in het <html> -element of de Content-Language HTTP-header , naast andere methoden.