voorbeelden en gebruiksrichtlijnen voor formulierbesturingsstijlen, opmaakopties en aangepaste componenten voor het maken van een grote verscheidenheid aan formulieren.
overzicht
Bootstrap ‘ s formulierbesturingselementen breiden uit op onze opnieuw opgestart formulierstijlen met klassen. Gebruik deze klassen om te kiezen voor hun aangepaste displays voor een consistentere weergave tussen browsers en apparaten.
zorg ervoor dat u een geschikt type attribuut gebruikt op alle ingangen (bijv.,, email voor e-mailadres of number voor numerieke informatie) om te profiteren van nieuwere invoercontroles zoals e-mailverificatie, nummerselectie en meer.
Hier is een snel voorbeeld om de Vormstijlen van Bootstrap aan te tonen. Blijf lezen voor documentatie over de vereiste klassen, vorm lay-out, en meer.
Form controls
verken onze aangepaste formulieren voor verdere stijl <select>s.
voor bestandsinvoer wisselt u de .form-control voor .form-control-file.,
Sizing
stel hoogtes in met klassen als .form-control-lg en .form-control-sm.
Readonly
voeg hetreadonly Booleaanse attribuut op een invoer toe om wijziging van de waarde van de invoer te voorkomen. Alleen-lezen ingangen lijken lichter (net als uitgeschakelde ingangen), maar behouden de standaard cursor.,
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>alleen leesbare tekst
Als u <input readonly> elementen in uw formulier wilt hebben die als platte tekst zijn opgemaakt, gebruik dan de .form-control-plaintext klasse om de standaard formulierveld styling te verwijderen en de juiste marge en opvulling te behouden.
Range-ingangen
stel horizontaal schuifbare range-ingangen in met .form-control-range.,
selectievakjes en radio ’s
standaard selectievakjes en radio’ s worden verbeterd met behulp van.form-check, een enkele klasse voor beide invoertypen die de lay-out en het gedrag van hun HTML-elementen verbetert. Selectievakjes zijn voor het selecteren van een of meerdere opties in een lijst, terwijl radio ‘ s zijn voor het selecteren van een optie uit vele.
uitgeschakelde selectievakjes en radio ‘ s worden ondersteund. Het attribuut disabled zal een lichtere kleur toepassen om de status van de invoer aan te geven.,
Checkboxes en radio ‘ s zijn gebouwd om HTML-gebaseerde formuliervalidatie te ondersteunen en beknopte, toegankelijke labels te bieden. Als zodanig zijn onze <input>s en <label>s verwante elementen in tegenstelling tot een <input> binnen een <label>. Dit is iets uitgebreider omdat u id en for attributen moet opgeven om de <input> en <label>te relateren.,
Default (stacked)
standaard wordt elk aantal selectievakjes en radio ‘ s die direct verwant zijn verticaal gestapeld en op de juiste afstand geplaatst met .form-check.
Inline
groepeer selectievakjes of radio ‘ s op dezelfde horizontale rij door .form-check-inlinetoe te voegen aan elke.form-check.,
zonder labels
voeg .position-static toe aan ingangen binnen
div id=”25b2793915″> die geen labeltekst hebben. Vergeet niet om nog steeds een of andere vorm van label voor ondersteunende technologieën (bijvoorbeeld, met behulp vanaria-label).,
Layout
aangezien Bootstrap display: block en width: 100% toepast op bijna al onze formulierbesturingen, zullen formulieren standaard verticaal gestapeld worden. Extra klassen kunnen worden gebruikt om deze lay-out per formulier te variëren.
Form groups
de .form-group klasse is de makkelijkste manier om een structuur aan formulieren toe te voegen. Het biedt een flexibele klasse die de juiste groepering van labels, controles, optionele helptekst en formuliervalidatie messaging aanmoedigt., Standaard wordt alleen margin-bottom toegepast, maar het pikt extra stijlen op in .form-inline indien nodig. Gebruik het met <fieldset>s, <div>s, of bijna elk ander element.
Form raster
complexere vormen kunnen worden gebouwd met behulp van onze rasterklassen. Gebruik deze voor formulierindelingen die meerdere kolommen, verschillende breedtes en extra uitlijningsopties vereisen.,
Form row
U kunt ook .row ruilen voor .form-row, een variatie van onze standaard rasterrij die de standaard kolomgoten overschrijft voor strakkere en compactere lay-outs.
complexere lay-outs kunnen ook worden gemaakt met het rastersysteem.
horizontale vorm
maak horizontale vormen met het raster door de .row klasse toe te voegen aan groepen en gebruik de .col-*-* klassen om de breedte van uw labels en besturingselementen te specificeren., Zorg ervoor dat u ook .col-form-label toevoegt aan uw <label>s, zodat ze Verticaal gecentreerd zijn met de bijbehorende vormcontroles.
soms moet u misschien marge-of padding-hulpprogramma ‘ s gebruiken om de perfecte uitlijning te maken die u nodig hebt. We hebben bijvoorbeeld de padding-top op ons label gestapelde radio-ingangen verwijderd om de tekstbasis beter uit te lijnen.,
horizontale formaatlabelgrootte
kolomgrootte
zoals getoond in de vorige voorbeelden, kunt u met ons rastersysteem elk aantal .cols plaatsen binnen een .row of .form-row. Ze verdelen de beschikbare breedte gelijk tussen hen. U kunt ook een subset van uw kolommen kiezen om meer of minder ruimte in te nemen, terwijl de resterende .cols de rest even splitsen, met specifieke kolomklassen zoals .col-7.,
auto-sizing
het voorbeeld hieronder gebruikt een flexbox-hulpprogramma 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 kolomformaten zelf op basis van de inhoud.
u kunt dat dan opnieuw remixen met grootte-specifieke kolomklassen.
en natuurlijk worden aangepaste formulierbesturingselementen ondersteund.,
Inline forms
Gebruik de klasse .form-inline om een reeks labels, formulierbesturingselementen en knoppen op één horizontale rij weer te geven. Form controles binnen inline formulieren variëren enigszins van hun standaard status.
- besturingselementen zijn
display: flex, waarbij elke HTML-witruimte wordt ingeklapt en u de uitlijningscontrole kunt bieden met spatiëring en flexbox-hulpprogramma ‘ s. - besturingselementen en invoergroepen ontvangen
width: autoom de Bootstrap standaard te overschrijvenwidth: 100%., - besturingselementen verschijnen alleen inline in viewports die ten minste 576px breed zijn om rekening te houden met smalle viewports op mobiele apparaten.
Het kan nodig zijn om handmatig de breedte en uitlijning van individuele formulierbesturingen aan te pakken met spatiëring-hulpprogramma ‘ s (zoals hieronder getoond). Tot slot, zorg ervoor dat u altijd een <label> bij elke vormcontrole opneemt, zelfs als u het moet verbergen voor niet-screenreader bezoekers met .sr-only.
aangepaste formulierbesturingen en selecties worden ook ondersteund.,
alternatieven voor verborgen labels
ondersteunende technologieën zoals schermlezers zullen problemen hebben met uw formulieren als u geen label voor elke invoer toevoegt. Voor deze inline formulieren kunt u de labels verbergen met de .sr-only klasse. Er zijn andere alternatieve methoden om een label voor ondersteunende technologieën aan te bieden, zoals de eigenschap aria-label, aria-labelledby of title., Indien geen van deze aanwezig is, kunnen ondersteunende technologieën gebruik maken van de eigenschap placeholder, indien aanwezig, maar merk op dat het gebruik van placeholder als vervanging voor andere etiketteringsmethoden niet wordt aanbevolen.
Helptekst
helptekst op blokniveau in formulieren kan worden aangemaakt met .form-text (voorheen bekend als .help-block in v3). Inline help tekst kan flexibel worden geïmplementeerd met behulp van elk inline HTML element en utility classes zoals .text-muted.,
hulptekst associëren met formulierbesturingen
hulptekst moet expliciet worden geassocieerd met het formulierbesturingselement waarmee het verband houdt met het aria-describedby attribuut. Dit zal ervoor zorgen dat ondersteunende technologieën—zoals schermlezers—deze helptekst aankondigen wanneer de gebruiker zich concentreert of de controle betreedt.
hulptekst onder invoer kan worden opgemaakt met .form-text. Deze klasse omvat display: block en voegt enige bovenmarge toe voor eenvoudige spatiëring van de bovenstaande ingangen.,
Inline text kan elk typisch inline HTML-element gebruiken (of het nu een <small>, <span>, of iets anders) met niets meer dan een utility class.
uitgeschakelde formulieren
voeg het disabled Booleaanse attribuut toe aan een invoer om gebruikersinteracties te voorkomen en het lichter te laten lijken.,
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>voeg het disabled attribuut toe aan een <fieldset> om alle besturingselementen binnen uit te schakelen.
waarschuwing met ankers
standaard zullen browsers alle native form controles (<input>, <select> en <button> elementen) binnen een <fieldset disabled> Als uitgeschakeld, het voorkomen van zowel toetsenbord en muis interacties op hen., Als uw formulier echter ook <a ... class="btn btn-*"> elementen bevat, krijgen deze alleen een stijl van pointer-events: none. Zoals opgemerkt in de sectie over uitgeschakeld staat voor knoppen (en specifiek in de sub-sectie voor anker elementen), deze CSS eigenschap is nog niet gestandaardiseerd en wordt niet volledig ondersteund in Internet Explorer 10, en zal niet voorkomen dat toetsenbordgebruikers van de mogelijkheid om zich te concentreren of te activeren van deze links. Dus om veilig te zijn, gebruik aangepaste JavaScript om dergelijke links uit te schakelen.,
Cross-browser compatibiliteit
hoewel Bootstrap deze stijlen in alle browsers zal toepassen, ondersteunen Internet Explorer 11 en lager niet volledig het disabled attribuut op een <fieldset>. Gebruik aangepaste JavaScript om de fieldset in deze browsers uit te schakelen.
Validation
geef waardevolle, bruikbare feedback aan uw gebruikers met HTML5 form validation-beschikbaar in al onze ondersteunde browsers. Kies uit de browser standaard validatie feedback, of implementeren aangepaste berichten met onze ingebouwde klassen en starter JavaScript.,
we raden op dit moment aan aangepaste validatiestijlen te gebruiken, omdat standaard validatieberichten van native browser niet consistent worden blootgesteld aan ondersteunende technologieën in alle browsers (met name Chrome op desktop en mobiel).
hoe het werkt
Hier is hoe form validation werkt met Bootstrap:
- HTML form validation wordt toegepast via de twee pseudo-klassen van CSS,
:invaliden:valid. Het is van toepassing op<input>,<select>, en<textarea>elementen., - Bootstrap scopes de
:invaliden:validstijlen naar ouder.was-validatedklasse, meestal toegepast op de<form>. Anders wordt elk verplicht veld zonder waarde weergegeven als ongeldig bij het laden van de pagina. Op deze manier kunt u kiezen wanneer u ze wilt activeren (meestal na het indienen van het formulier wordt geprobeerd). - om het uiterlijk van het formulier te resetten (bijvoorbeeld, in het geval van dynamische formulierinzendingen die AJAX gebruiken), verwijdert u de
.was-validatedklasse van de<form>opnieuw na het indienen., - als fallback kunnen
.is-invaliden.is-validklassen worden gebruikt in plaats van de pseudo-klassen voor validatie aan de serverzijde. Ze vereisen geen.was-validatedouderklasse. - vanwege beperkingen in hoe CSS werkt, kunnen we (op dit moment) geen stijlen toepassen op een
<label>die vóór een formulier controle in de DOM komt zonder de hulp van aangepaste JavaScript. - alle moderne browsers ondersteunen de constraint validation API, een reeks JavaScript-methoden voor het valideren van formulierbesturingen.,
- Feedbackberichten kunnen gebruik maken van de standaardwaarden van de browser (verschillend voor elke browser, en onbruikbaar via CSS) of onze aangepaste feedbackstijlen met extra HTML en CSS.
- u kunt aangepaste validiteitsmeldingen voorzien van
setCustomValidityIn JavaScript.
overweeg met dat in gedachten de volgende demo ‘ s voor onze aangepaste formuliervalidatiestijlen, optionele serverklassen en browserstandaarden.,
aangepaste stijlen
voor aangepaste Bootstrap formulier validatieberichten, moet u het novalidate boolean attribuut toevoegen aan uw <form>. Dit schakelt de browser standaard feedback tooltips, maar biedt nog steeds toegang tot de vorm validatie API ‘ s in JavaScript. Probeer het onderstaande formulier in te dienen; onze JavaScript zal de knop Verzenden onderscheppen en feedback aan u doorgeven. Wanneer u probeert te verzenden, ziet u de :invalid en :valid stijlen toegepast op uw formulierbesturingen.,
aangepaste feedbackstijlen passen aangepaste kleuren, randen, scherpstelstijlen en achtergrondpictogrammen toe om feedback beter te communiceren. Achtergrondpictogrammen voor <select>s zijn alleen beschikbaar met .custom-select, en niet .form-control.
Browser defaults
geen interesse in aangepaste validatie feedback berichten of het schrijven van JavaScript om vorm gedrag te veranderen? Alles goed, u kunt de browser standaardinstellingen gebruiken. Probeer het formulier hieronder in te dienen. Afhankelijk van uw browser en besturingssysteem ziet u een iets andere stijl van feedback.,
hoewel deze feedbackstijlen niet kunnen worden opgemaakt met CSS, kunt u de feedbacktekst nog steeds aanpassen via JavaScript.
serverzijde
we raden aan om client-side validation te gebruiken, maar als u server-side validation nodig hebt, kunt u ongeldige en geldige formuliervelden aangeven met .is-invalid en .is-valid. Merk op dat .invalid-feedback ook wordt ondersteund met deze klassen.,
ondersteunde elementen
Validatiestijlen zijn beschikbaar voor de volgende formulierbesturingen en componenten:
Tooltips
als uw formulieropmaak dit toestaat, kunt u de .{valid|invalid}-feedback klassen voor .{valid|invalid}-tooltip klassen om validatiefeedback weer te geven in een gestileerde tooltip. Zorg ervoor dat er een ouder met position: relative op staat voor tooltip-positionering. In het voorbeeld hieronder hebben onze kolomklassen dit al, maar uw project kan een alternatieve setup vereisen.,
aanpassen
Validatietoestanden kunnen worden aangepast via Sass met de$form-validation-states kaart. Deze Sass-kaart bevindt zich in ons _variables.scss bestand en wordt in een lus geplaatst om de standaard valid/invalid validatietoestanden te genereren. Inbegrepen is een geneste kaart voor het aanpassen van de kleur en het pictogram van elke staat. Terwijl er geen andere staten worden ondersteund door browsers, die met behulp van aangepaste stijlen kunnen eenvoudig meer complexe vorm feedback toe te voegen.,
merk op dat we niet aanraden deze waarden aan te passen zonder ook de form-validation-state mixin te wijzigen.
Aangepaste formulieren
gebruik onze volledig aangepaste formulierelementen om de standaardwaarden van de browser te vervangen voor nog meer aanpassingen en consistentie tussen browsers. Ze zijn gebouwd op de top van semantische en toegankelijke markup, dus ze zijn solide vervanging voor elke standaard formulier controle.,
selectievakjes en radio ‘ s
elk selectievakje en radio <input> en <label> koppeling is verpakt in een <div> om onze aangepaste controle aan te maken. Structureel is dit dezelfde aanpak als onze standaard .form-check.
we gebruiken de sibling selector (~) voor al onze <input> statussen—zoals :checked—om onze aangepaste formulierindicator correct te stylen., In combinatie met de .custom-control-label klasse, kunnen we de tekst voor elk item ook stylen op basis van de status van <input>.
we verbergen de standaard <input> met opacity en gebruiken de .custom-control-label om een nieuwe aangepaste formulier indicator te bouwen in zijn plaats met ::before en ::after. Helaas kunnen we geen aangepaste bouwen van alleen de <input> omdat CSS ‘ s content niet werkt op dat element.,
in de aangevinkte toestanden gebruiken we Base64 ingebedde SVG-pictogrammen uit Open Iconic. Dit biedt ons de beste controle voor styling en positionering tussen browsers en apparaten.
Checkboxes
aangepaste checkboxes kunnen ook gebruik maken van de :indeterminate pseudo-klasse wanneer handmatig ingesteld via JavaScript (er is geen HTML-attribuut beschikbaar om het op te geven).,
Als je het gebruik van jQuery, iets zoals dit zou moeten volstaan:
$('.your-checkbox').prop('indeterminate', true)Radio
Inline
Uitgeschakeld
Maat aan te vinken en radio ‘ s kunnen ook worden uitgeschakeld., Voeg hetdisabled boolean attribuut toe aan de<input> en de aangepaste indicator en label beschrijving zullen automatisch worden opgemaakt.
Schakelaars
een schakelaar heeft de opmaak van een aangepast selectievakje, maar gebruikt de klasse .custom-switch om een schakelaar weer te geven. Switches ondersteunen ook hetdisabled attribuut.,
Selecteer menu
aangepast <select>menu ‘ s hebben alleen een aangepaste klasse nodig, .custom-selectom de aangepaste stijlen te activeren. Aangepaste stijlen zijn beperkt tot het eerste uiterlijk van <select>en kunnen de <option>s niet wijzigen vanwege browserbeperkingen.
u kunt ook kiezen uit kleine en grote aangepaste selecties die overeenkomen met onze Tekstinvoer van gelijke grootte.,
het multiple attribuut wordt ook ondersteund:
net als het sizeattribuut:
Range
create custom <input type="range">besturingselementen met.custom-range. De track (de achtergrond) en thumb (de waarde) zijn beide ontworpen om hetzelfde te verschijnen in alle browsers. Zoals alleen IE en Firefox ondersteuning “vullen” hun track van links of rechts van de duim als een middel om visueel de voortgang aan te geven, we ondersteunen het momenteel niet.,
<label for="customRange1">Example range</label><input type="range" class="custom-range">Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
<label for="customRange2">Example range</label><input type="range" class="custom-range" min="0" max="5">By default, range inputs “snap” to integer values., Om dit te veranderen, kunt u een step waarde opgeven. In het voorbeeld hieronder verdubbelen we het aantal stappen door step="0.5"te gebruiken.
<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">bestandsbrowser
De aanbevolen plugin om aangepaste bestandsinvoer te animeren: bs-custom-file-input, dat gebruiken we momenteel hier in onze docs.,
De bestandsinvoer is de meest lastige van de groep en vereist extra JavaScript als u ze wilt aansluiten met functionele Bestand kiezen… en geselecteerde bestandsnaam tekst.
we verbergen het standaardbestand <input> via opacity en in plaats daarvan style de <label>. De knop wordt gegenereerd en gepositioneerd met ::after. Tot slot verklaren we een width en height op de <input> voor juiste spatiëring voor omringende inhoud.,
de strings vertalen of aanpassen met SCSS
de:lang() pseudo-klasse wordt gebruikt om vertaling van de “Browse” tekst in andere talen mogelijk te maken. Overschrijf of voeg items toe aan de $custom-file-text Sass variabele met de relevante taal tag en gelokaliseerde strings. De Engelse snaren kunnen op dezelfde manier worden aangepast., Bijvoorbeeld, hier is hoe men een Spaanse vertaling kan toevoegen (Spaanse taalcode is es):
$custom-file-text: ( en: "Browse", es: "Elegir");Hier is lang(es) in actie op de aangepaste bestandsinvoer voor een Spaanse vertaling:
moet u de taal van uw document (of subtree daarvan) correct instellen om de juiste tekst te laten zien., Dit kan onder andere worden gedaan met het lang attribuut op het <html> element of de Content-Language HTTP header.
het vertalen of aanpassen van de tekenreeksen met HTML
Bootstrap biedt ook een manier om de “Browse” tekst in HTML te vertalen met hetdata-browse attribuut dat kan worden toegevoegd aan het aangepaste invoerlabel (voorbeeld in het Nederlands):
Leave a Reply