űrlapok

Példák és használati útmutatók az űrlapvezérlő stílusokhoz, az elrendezési beállításokhoz és az egyéni összetevőkhöz a legkülönbözőbb űrlapok létrehozásához.

Áttekintés

A Bootstrap űrlapvezérlői osztályokkal bővítik az újraindított űrlapstílusainkat. Ezekkel az osztályokkal választhatja testreszabott megjelenítőiket a böngészők és az eszközök közötti következetesebb megjelenítés érdekében.

Ügyeljen arra, hogy minden bemeneten (pl. Megfelelő type attribútumot használjon). , email e-mail címhez vagy number numerikus információkhoz) az újabb beviteli vezérlők, például az e-mail ellenőrzés, a számválasztás és egyebek előnyeinek kihasználásához.

Itt egy rövid példa a Bootstrap formastílusainak bemutatására. Olvassa el a szükséges osztályokról, az űrlapelrendezésről és egyebekről szóló dokumentációt.

Űrlapvezérlők

Ne felejtse el felfedezni az egyéni űrlapjainkat a <select> s.

A fájlbemeneteknél cserélje le a .form-control elemet a .

Méretezés

Állítsa be a magasságot olyan osztályok használatával, mint a .form-control-lg és .form-control-sm.

Csak olvasható

Adja hozzá a readonly logikai attribútum egy bemeneten, hogy megakadályozza a bemenet értékének módosítását. A csak olvasható bemenetek könnyebbnek tűnnek (csakúgy, mint a letiltott bemenetek), de megtartják a normál kurzort.

Csak olvasható sima szöveg

Ha <input readonly> elemeket szeretne formázni formában egyszerű szövegként, használja a .form-control-plaintext class az alapértelmezett űrlapmező stílusának eltávolításához, valamint a megfelelő margó és kitöltés megőrzéséhez.

Jelölőnégyzetek és rádiók

Alapértelmezett a jelölőnégyzeteket és a rádiókat a .form-check segítségével javíthatjuk, egy olyan osztály mindkét bemeneti típushoz, amely javítja a HTML-elemek elrendezését és viselkedését. A jelölőnégyzetek egy vagy több opció kiválasztására szolgálnak egy listában, míg a rádiók egy vagy több opció kiválasztására szolgálnak.

A letiltott jelölőnégyzetek és rádiók támogatottak, de not-allowed kurzor a szülő <label> egérrel, hozzá kell adnia a disabled attribútumot a .form-check-input. A letiltott attribútum világosabb színt alkalmaz a bemenet állapotának jelzésére.

A jelölőnégyzetek és a rádiók használata a HTML-alapú űrlapellenőrzés támogatására és tömör, hozzáférhető címkék biztosítására szolgál. Mint ilyen, a <input> s és <label> értékeink testvérelemek, szemben a <input> egy <label> belül. Ez valamivel bőbeszédűbb, mivel meg kell adnia a id és a for attribútumokat a <input> és <label>.

Alapértelmezett (halmozott)

Alapértelmezés szerint tetszőleges számú jelölőnégyzet és rádió, amelyek azonnal testvérek, függőlegesen kerülnek egymásra és megfelelően elosztva a következővel: .form-check.

Beépített

Jelölje be a jelölőnégyzeteket vagy rádiókat ugyanazon a vízszintes soron a .form-check-inline hozzáadásával bármely .form-check elemhez.

Címkék nélkül

Adja hozzá a .position-static elemet a .form-check belüli bemenetekhez, amelyek nem tartalmaznak címkeszöveget. Ne felejtsen el továbbra is biztosítani valamilyen formájú címkét a segítő technológiák számára (például aria-label használatával).

Elrendezés

Mivel a Bootstrap szinte minden űrlapvezérlőnkre alkalmazza a display: block és a width: 100% , az űrlapok alapértelmezés szerint függőlegesen rakódnak össze. További osztályok használhatók az elrendezés űrlaponkénti változtatására.

Űrcsoportok

A .form-group osztály a legegyszerűbb módszer hogy valamilyen struktúrát adjon a formákhoz. Rugalmas osztályt biztosít, amely ösztönzi a címkék, vezérlők, opcionális súgószövegek és űrlap-hitelesítési üzenetek megfelelő csoportosítását. Alapértelmezés szerint csak a margin-bottom alkalmazást alkalmazza, de szükség esetén további stílusokat vesz fel a .form-inline könyvtárba. Használja <fieldset> s, <div> s vagy szinte bármely más elem mellett.

Formarács

Összetettebb űrlapok készíthetők rácsosztályaink segítségével. Használja ezeket több oszlopot, változó szélességet és további igazítási opciókat igénylő űrlapelrendezésekhez.

Űrlap sor

A .row elemet felcserélheti a következőre: .form-row, a szokásos rácssorunk egy olyan változata, amely felülírja az alapértelmezett oszlop ereszcsatornákat a szorosabb és kompaktabb elrendezés érdekében.

Bonyolultabb elrendezéseket is létrehozhatunk a rácsrendszerrel.

Vízszintes űrlap

Hozzon létre vízszintes űrlapokat a rács segítségével úgy, hogy hozzáadja a .row osztályt csoportok kialakításához és a .col-*-* osztályok a címkék és vezérlők szélességének megadásához. Ne felejtse el hozzáadni a .col-form-label -t az <label> eihez is, hogy függőlegesen középre kerüljenek a hozzájuk tartozó űrlapvezérlőkkel.

Időnként szükség lehet margó vagy kitöltő segédprogramok használatára a tökéletes igazítás létrehozásához. Például eltávolítottuk a padding-top -t egymásra helyezett rádiós bemenetek címkénkről, hogy jobban igazítsuk a szöveg alapvonalát.

Vízszintes űrlapcímke méretezés

oszlopméretezés

Amint azt az előző példák is mutatják, rácsrendszerünk lehetővé teszi tetszőleges számú .col s egy .row vagy .form-row belül. A rendelkezésre álló szélességet egyenlően osztják meg közöttük. Kiválaszthatja az oszlopok egy részhalmazát is, hogy nagyobb vagy kevesebb helyet foglaljon el, míg a fennmaradó .col ek ugyanúgy felosztják a többit, meghatározott oszloposztályokkal, például .col-7.

Automatikus méretezés

Az alábbi példa egy flexbox segédprogrammal függőlegesen középre állítja a tartalmat és megváltoztatja a .col – .col-auto, így az oszlopok csak annyi helyet foglalnak el, amennyi szükséges. Másképp fogalmazva: az oszlop a tartalom alapján méretezi magát.

Ezután még egyszer újramixelheti méretspecifikus oszloposztályokkal.

És természetesen az egyéni űrlapvezérlők is támogatottak.

Inline űrlapok

Használja a .form-inline osztály címkék, űrlapvezérlők és gombok sorozatának megjelenítéséhez egyetlen vízszintes sorban. Az inline űrlapokon lévő űrlapvezérlők kissé eltérnek az alapértelmezett állapotaiktól.

• A vezérlők display: flex, összecsukják az esetleges HTML-helyeket és lehetővé teszik az igazítás vezérlését térköz és flexbox segédprogramok.
• A vezérlők és a beviteli csoportok width: auto fogadással felülbírálják a Bootstrap alapértelmezett width: 100%.
• A vezérlők csak sorban jelennek meg a legalább 576 képpontos szélességű nézetablakokban a szűk nézetablakok mobileszközökön történő elszámolásához.

Lehet, hogy manuálisan kell foglalkoznia az egyes űrlapvezérlők szélességével és igazításával. távolságtartó segédprogramokkal (az alábbiak szerint). Végül mindenképpen adjon meg egy <label> -t minden űrlapvezérlőhöz, még akkor is, ha el kell rejtenie a nem képernyőolvasók elől a .sr-only .

Az egyéni űrlapvezérlők és -választók szintén támogatottak.

Súgószöveg

Az űrlapok blokkszintű súgószövegei létrehozhatók a .form-text (korábban .help-block néven ismert a v3-ban). A beillesztett súgószöveg rugalmasan végrehajtható bármilyen beépített HTML elem és segédprogram osztály, például .text-muted használatával.

A bemenetek alatti súgó szövege . Ez az osztály tartalmazza a következőt: display: block, és néhány felső margót ad a fenti bemenetek közötti egyszerű távolsághoz.

A beágyazott szöveg bármilyen tipikus belső HTML-elemet használhat (legyen az <small>, <span> vagy valami más). semmi mással, csak egy segédosztályral.

Letiltott űrlapok

Adja hozzá a disabled logikai attribútumot egy bemenethez a felhasználói interakciók megakadályozása és megjelenése érdekében könnyebb.

Adja hozzá a disabled attribútum egy <fieldset> attribútumhoz az összes vezérlő letiltásához.

Érvényesítés

Értékes, működőképes visszajelzést adhat a felhasználóinak HTML5-űrlap-ellenőrzéssel, amely minden támogatott böngészőnkben elérhető. Válasszon a böngésző alapértelmezett ellenőrzési visszajelzései közül, vagy hajtson végre egyedi üzeneteket a beépített osztályokkal és az indító JavaScript-sel.

Hogyan működik

Így működik az űrlapellenőrzés a Bootstrap-tal:

• A HTML-űrlapellenőrzést a CSS két álosztályán keresztül alkalmazzák, :invalid és :valid. <input>, <select> és <textarea> elemekre vonatkozik.
• A Bootstrap átfogja a :invalid és :valid stílusokat a szülő .was-validated osztályba, általában a <form>. Ellenkező esetben az érték nélkül kötelező bármely mező érvénytelennek tűnik az oldal betöltésekor. Így kiválaszthatja, hogy mikor aktiválja őket (általában az űrlap elküldésének megkísérlése után).
• Tartalékként .is-invalid és .is-valid osztályok használhatók az ál-osztályok helyett a szerveroldali ellenőrzéshez. Nem igényelnek .was-validated szülő osztályt.
• A CSS működésének korlátai miatt nem (jelenleg) alkalmazhatunk stílusokat egy <label>, amely a DOM-ban egy űrlapvezérlő elé kerül, az egyéni JavaScript segítsége nélkül.
• Minden modern böngésző támogatja a kényszer-érvényesítési API-t, egy sor JavaScript-módszert az űrlap-vezérlők ellenőrzéséhez.
• A visszajelzési üzenetek felhasználhatják a böngésző alapértelmezett beállításait (az egyes böngészőknél eltérőek és a CSS-n keresztül nem stílusozhatók), vagy az egyéni visszajelzési stílusainkat további HTML és CSS használatával.
• Egyéni érvényességi üzeneteket adhat meg a setCustomValidity a JavaScript-ben.

Ezt szem előtt tartva vegye fontolóra a következő bemutatókat az egyéni űrlapellenőrzési stílusainkhoz, az opcionális kiszolgálóoldali osztályokhoz és a böngésző alapértelmezéseihez.

Egyéni stílusok

Az egyéni Bootstrap űrlap-ellenőrző üzenetekhez hozzá kell adnia a novalidate logikai attribútumot a <form>. Ez letiltja a böngésző alapértelmezett visszacsatolási tippjeit, de továbbra is hozzáférést biztosít az űrlap-ellenőrzési API-khoz a JavaScript-ben. Próbálja meg beküldeni az alábbi űrlapot; JavaScriptünk elkapja a beküldés gombot és visszajelzést küld Önnek.

A beküldési kísérlet során látni fogja a :invalid és :valid stílusok az űrlapvezérlőkhöz.

A böngésző alapértelmezései

Nem érdekelnek az egyéni érvényesítési visszajelzés üzenetek vagy a JavaScript írása az űrlap viselkedésének megváltoztatásához? Minden jó, használhatja a böngésző alapértelmezett beállításait. Próbálja meg beküldeni az alábbi űrlapot. Böngészőjétől és operációs rendszerétől függően a visszajelzés kissé eltérő stílusát fogja látni.

Bár ezeket a visszajelzési stílusokat nem lehet CSS-sel stilizálni, a visszajelzés szövegét továbbra is testre szabhatja a JavaScript segítségével.

Szerveroldal

Javasoljuk az ügyféloldali érvényesítés használatát, de ha szerveroldalra van szüksége, akkor érvénytelen és érvényes űrlapmezőket .is-invalid és .is-valid. Ne feledje, hogy a .invalid-feedback is támogatott ezekkel az osztályokkal.

Támogatott elemek

Példapéldáink natív szöveges <input> eket mutatnak fent, de űrlapellenőrzési stílusok rendelkezésre állnak az egyéni űrlapvezérlőink számára is.

Eszköztippek

Ha az űrlap elrendezése lehetővé teszi, akkor felcserélheti a .{valid|invalid}-feedback osztályok az .{valid|invalid}-tooltip osztályokhoz az érvényesítési visszajelzés megjelenítéséhez stílusú eszköztippben. Ügyeljen arra, hogy legyen szülő position: relative rajta az eszköztipp pozícionálásához. Az alábbi példában oszloposztályaink már rendelkeznek ezzel, de a projektje alternatív beállítást igényelhet.

Egyéni űrlapok

További testreszabáshoz és keresztezéshez A böngésző konzisztenciája a teljesen egyedi űrlapelemeinkkel cserélje ki a böngésző alapértelmezett értékeit. Szemantikus és hozzáférhető jelölések tetejére épülnek, így minden alapértelmezett űrlapvezérlő szilárd helyettesítői.

Jelölőnégyzetek és rádiók

Minden jelölőnégyzet és rádió be van csomagolva egy <div> egy testvérrel <span> az egyéni vezérlőnk létrehozásához és egy <label> a kísérő szöveghez. Szerkezetileg ez ugyanaz a megközelítés, mint az alapértelmezett .form-check.

A testvérválasztót (~) használjuk minden <input> állapotunk – például :checked – az egyéni űrlap-indikátor megfelelő stílusának megalkotásához. A .custom-control-label osztállyal kombinálva az egyes elemek szövegét is stílusozhatjuk a <input> állapota alapján.

Az alapértelmezett <input> elemet elrejtjük a opacity paranccsal, és a .custom-control-label segítségével létrehozhatunk egy új egyéni űrlapjelző a helyén ::before és ::after jelöléssel Sajnos csak <input> -ből nem tudunk egyedi létrehozni, mert a CSS content nem működik ezen az elemen.

A bejelölt állapotokban a Base64 beágyazott SVG ikonokat használjuk az Open Iconic alkalmazásból. Ez biztosítja a legjobb irányítást a stílus és a böngészők és eszközök közötti pozícionáláshoz.

Jelölőnégyzetek

Egyéni jelölőnégyzetek a :indeterminate álosztályt is felhasználhatja, ha manuálisan állítja be a JavaScript-et (a megadásához nincs elérhető HTML-attribútum).

Ha jQuery-t használsz, valami hasonlónak elégnek kell lennie:

Rádiók

Beépített

Letiltva

Az egyéni jelölőnégyzetek és rádiók szintén kikapcsolhatók. Adja hozzá a disabled logikai attribútumot a <input> fájlhoz, és az egyéni mutató és a címke leírása automatikusan stílusba kerül.

Menü kiválasztása

Egyéni <select> a menüknek csak egy egyéni osztályra van szükségük, .custom-select az egyéni stílusok elindításához.

Kisebb és nagyobb egyéni választások közül is választhat egyezzen hasonló méretű szövegbevitellel.

A multiple attribútum szintén támogatott:

Csakúgy, mint a size attribútum:

fájlböngésző

A fájlbemenet a leggyakoribb és további JavaScript-et igényel, ha a funkcionális Válasszon fájlt… és a kiválasztott fájlnév szöveget szeretné összekapcsolni.

Az <input> alapértelmezett fájlt elrejtjük a és ehelyett a <label> stílust adja meg. A gombot a ::after gombbal állítják elő és helyezik el. Végül kijelentjük, hogy a <input> width és height a környező tartalom megfelelő távolságának biztosítása érdekében .

A karakterláncok lefordítása vagy testreszabása

A :lang() ál-osztály arra szolgál, hogy lehetővé tegye a “Tallózás” szöveg más nyelvre történő fordítását. nyelvek. Felülírhatja vagy hozzáadhatja a bejegyzéseket a $custom-file-text Sass változóhoz a megfelelő nyelvcímkével és lokalizált karakterláncokkal. Az angol karakterláncok ugyanúgy testreszabhatók.Például a következőképpen adhatunk hozzá spanyol fordítást (a spanyol nyelv kódja es):

Íme lang(es) a spanyol fordítás egyéni fájlbevitelében:

A megfelelő szöveg megjelenítéséhez helyesen kell beállítania a dokumentum (vagy annak alfa) nyelvét. Ez megtehető a lang attribútummal a <html> elemen vagy a Content-Language HTTP fejlécen. , egyéb módszerek mellett.