Forms (Magyar)

példák és használati útmutatók az űrlapvezérlési stílusokhoz, az elrendezési lehetőségekhez és az egyedi komponensekhez az űrlapok széles választékának létrehozásához.

áttekintés

Bootstrap form controls bővíteni a újraindított formában stílusok osztályok. Ezekkel az osztályokkal választhatja be a testreszabott kijelzőket a böngészők és eszközök közötti konzisztensebb megjelenítéshez.

minden bemeneten használjon megfelelő type attribútumot (pl.,,email e-mail címhez vagynumber numerikus információkhoz), hogy kihasználhassa az újabb bemeneti vezérlőket, például az e-mail ellenőrzést, a számválasztást stb.

itt egy gyors példa a Bootstrap formastílusainak bemutatására. Olvassa tovább a szükséges osztályok dokumentációját, az űrlap elrendezését stb.

Form controls

ügyeljen arra, hogy vizsgálja meg az egyéni formák további stílus <select>s.

fájl bemenetek, swap a.form-control.form-control-file div>.,

méretezés

magasságok beállítása olyan osztályokkal, mint a .form-control-lgés .form-control-sm.

Readonly

adja hozzá areadonly boolean attribútumot egy bemeneten, hogy megakadályozza a bemenet értékének módosítását. A csak olvasható bemenetek könnyebbek (csakúgy, mint a letiltott bemenetek), de megtartják a standard kurzort.,

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

olvasható egyszerű szöveg

Ha <input readonly> elemek az egyszerű szövegformátumú űrlapban használja a .form-control-plaintext osztályt az alapértelmezett űrlapmező stílusának eltávolításához, valamint a megfelelő margó és padding megőrzéséhez.

tartomány bemenetek

állítsa vízszintesen görgethető tartomány bemenetek segítségével .form-control-range.,

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

alapértelmezett jelölőnégyzetek és rádiók javulnak a .form-check, egy osztály mindkét bemeneti típushoz, amely javítja HTML elemeik elrendezését és viselkedését. A jelölőnégyzetek egy vagy több lehetőség kiválasztására szolgálnak a listában, míg a rádiók egy lehetőség kiválasztására szolgálnak sok közül.

letiltott jelölőnégyzetek és rádiók támogatottak. Adisabled 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>s testvérelemek, szemben a<input>egy<label>. Ez valamivel beszédesebb, mivel meg kell adnia a idés forattribútumokat a <input>és <label>.,

alapértelmezett (halmozott)

alapértelmezés szerint tetszőleges számú jelölőnégyzet és rádió, amelyek közvetlen testvér lesz függőlegesen egymásra, és megfelelően elosztva.form-check.

Inline

Csoport jelölőnégyzeteket, vagy rádiók ugyanazon a vízszintes sor hozzáadásával .form-check-inline bármilyen .form-check.,

címkék nélkül

Add .position-static belül .form-check, hogy nincs címkeszöveg. Ne feledje, hogy továbbra is adjon valamilyen címkét a segítő technológiákhoz (például a aria-labelhasználatával).,

Layout

mivel Bootstrap vonatkozik display: block és width: 100% szinte minden űrlapvezérlőnkre az űrlapok alapértelmezés szerint függőlegesen veremeznek. További osztályok használhatók ezen elrendezés formánként történő változtatására.

Form csoportok

a .form-group osztály a legegyszerűbb módja annak, hogy bizonyos struktúrákat adjunk az űrlapokhoz. Rugalmas osztályt biztosít, amely ösztönzi a címkék, az ellenőrzések, az opcionális súgószöveg és az űrlap-érvényesítési üzenetek megfelelő csoportosítását., Alapértelmezés szerint csak a margin-bottom – ra vonatkozik, de szükség szerint további stílusokat vesz fel a .form-inline – ban. Használja a <fieldset>s, <div>s, vagy szinte bármilyen más elem.

Form grid

bonyolultabb űrlapok építhetők a grid osztályok segítségével. Ezeket több oszlopot, változatos szélességet és további igazítási lehetőségeket igénylő formaelrendezésekhez használja.,

Form row

akkor is swap .row .form-row, egy változata a standard rács sor, amely felülírja az alapértelmezett oszlop ereszcsatornák szigorúbb és kompaktabb elrendezések.

bonyolultabb elrendezések is létrehozhatók a rácsrendszerrel.

vízszintes forma

Hozzon létre vízszintes űrlapokat a rácskal a .rowosztály hozzáadásával csoportok kialakításához és a osztályok segítségével adja meg a címkék és vezérlők szélességét., Feltétlenül adja hozzá a.col-form-label<label>s – ot, így azok függőlegesen középre vannak állítva a hozzájuk tartozó űrlapvezérlőkkel.

időnként előfordulhat, hogy margót vagy párnázó segédprogramokat kell használnia a szükséges tökéletes igazítás létrehozásához. Például eltávolítottuk apadding-top – ot a halmozott rádióbemenetek címkéjén, hogy jobban igazítsuk a szöveg alapvonalát.,

vízszintes formacímke méretezése

oszlop méretezése

amint az az előző példákban látható, rácsrendszerünk lehetővé teszi, hogy tetszőleges számú .cols-t helyezzen el egy .row vagy .form-row. A rendelkezésre álló szélességet egyenlően osztják fel közöttük. Az oszlopok egy részhalmazát is kiválaszthatja, hogy több vagy kevesebb helyet foglaljon el, míg a fennmaradó .cols egyenlően osztja meg a többit, olyan oszloposztályokkal, mint a .col-7.,

Auto-sizing

az alábbi példa egy flexbox segédprogramot használ a tartalom függőleges középpontjába, és megváltoztatja a .col .col-auto értéket, így az oszlopok csak annyi helyet foglalnak el, amennyire szükséges. Más módon, az oszlop mérete maga a tartalom alapján.

akkor majd remix, hogy ismét a méret-specifikus oszlop osztályok.

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

Inline forms

használja a .form-inline osztályt egy sor címke, forma vezérlő és gomb megjelenítéséhez egyetlen vízszintes sorban. Form controls belül inline forms kissé eltérnek az alapértelmezett Államok.

• vezérlők display: flex, összeomló HTML fehér tér, amely lehetővé teszi, hogy igazítás vezérlés térköz és flexbox segédprogramok.
• vezérlők és beviteli csoportok width: auto a Bootstrap alapértelmezett width: 100%felülbírálásához.,
• A vezérlők csak sorban jelennek meg a legalább 576px szélességű nézetablakokban, hogy a mobileszközökön keskeny nézetportokat lehessen figyelembe venni.

előfordulhat, hogy manuálisan kell kezelnie az egyes űrlapvezérlők szélességét és igazítását a térköz segédprogramokkal (az alábbiak szerint). Végül feltétlenül mindig tartalmazzon egy<label> minden űrlapvezérlővel, még akkor is, ha el kell rejtenie a nem képernyőolvasó látogatóktól a.sr-only.

egyéni űrlapvezérlők és kiválasztások szintén támogatottak.,

súgószöveg

blokk szintű súgószöveg az űrlapokban a.form-text segítségével hozható létre (korábban.help-block a v3-ban). Inline súgó szöveg rugalmasan megvalósítható bármely inline HTML elem és segédprogram osztályok, mint a .text-muted.,

súgó szöveg alatti bemenetek lehet stilizált .form-text. Ez az osztály tartalmazza a display: block értéket, és hozzáad néhány felső margót a fenti bemenetektől való könnyű távolság érdekében.,

az Inline szöveg bármilyen tipikus inline HTML elemet használhat (legyen az a <small>, <span> vagy valami más), nem más, mint egy segédprogram osztály.

letiltott űrlapok

adja hozzá a disabled logikai attribútumot egy bemenethez, hogy megakadályozza a felhasználói interakciókat, és könnyebbé tegye azt.,

<input class="form-control" type="text" placeholder="Disabled input here..." disabled>

adja hozzá a disabled attribútumot a <fieldset> az összes vezérlő letiltása.

Validation

értékes, megvalósítható visszajelzést nyújt a felhasználóknak a HTML5 Form validation segítségével-minden támogatott böngészőnkben elérhető. Válasszon a böngésző alapértelmezett validációs visszajelzéseiből, vagy valósítson meg egyedi üzeneteket a beépített osztályainkkal, valamint a starter JavaScript segítségével.,

hogyan működik

így működik a Form validation Bootstrap:

• HTML form validation a CSS két pszeudo-osztályán keresztül történik, és :valid. Ez vonatkozik a <input>, <select>és <textarea> elemekre.,
• a:invalid és:valid.was-validated osztály, általában a<form>osztályra alkalmazzák. Ellenkező esetben az érték nélküli kötelező mező érvénytelennek tűnik az oldal betöltésekor. Így kiválaszthatja, hogy mikor aktiválja őket (általában az űrlap benyújtásának megkísérlése után).
• az űrlap megjelenésének visszaállításához (például dinamikus űrlap beküldése esetén az AJAX használatával) távolítsa el a .was-validated osztályt a <form> osztályból a benyújtás után.,
• tartalékként és .is-valid osztályok használhatók a szerver oldali validációhoz használt álosztályok helyett. Nem igényelnek .was-validated szülőosztályt.
• a CSS működésének korlátozásai miatt (jelenleg) nem alkalmazhatunk stílusokat a <label> – ra, amely a DOM-ban az űrlapvezérlés előtt jön létre egyéni JavaScript nélkül.
• minden modern böngésző támogatja a constraint validation API-t, egy sor JavaScript módszert az űrlapvezérlők érvényesítésére.,
• a visszajelzési üzenetek felhasználhatják a böngésző alapértékeit (minden böngészőnél eltérő, CSS-en keresztül nem definiálható) vagy az egyéni visszacsatolási stílusokat további HTML-vel és CSS-vel.
• egyedi érvényességi üzeneteket adhat meg asetCustomValidity JavaScript-ben.

ezt szem előtt tartva, fontolja meg a következő demókat az egyéni űrlap érvényesítési stílusainkhoz, az opcionális szerver oldali osztályokhoz, valamint a böngésző alapértelmezett értékeihez.,

egyéni stílusok

az egyéni Bootstrap form validációs üzenetekhez a novalidatelogikai attribútumot kell hozzáadnia a <form>. Ez letiltja a böngésző alapértelmezett feedback tooltips, de még mindig hozzáférést biztosít az űrlap validation API-k JavaScript. Próbálja meg elküldeni az alábbi űrlapot; a JavaScript elfogja a küldés gombot, majd továbbítja a visszajelzést az Ön számára. A beküldési kísérlet során megjelenik a:invalid és a:valid stílusok az űrlapvezérlőkre.,

Az egyéni visszajelzési stílusok egyéni színeket, szegélyeket, fókuszstílusokat és háttérikonokat alkalmaznak a visszajelzések jobb kommunikációjához. A <select>s háttérikonok csak a .custom-select, nem pedig a .form-controlalatt érhetők el.

böngésző Alapértékei

nem érdekli az egyéni érvényesítési visszajelzési ü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 értékeit. Próbálja meg benyújtani az alábbi űrlapot. Böngészőjétől és operációs rendszerétől függően kissé eltérő visszajelzési stílus jelenik meg.,

bár ezeket a visszacsatolási stílusokat nem lehet stílusosítani a CSS-vel, a visszacsatolási szöveget továbbra is testreszabhatja a JavaScript segítségével.

Server side

javasoljuk a kliens oldali érvényesítést, de ha szerver oldali érvényesítésre van szüksége, akkor érvénytelen és érvényes űrlapmezőket jelölhet meg és .is-valid. Vegye figyelembe, hogy a.invalid-feedback ezekkel az osztályokkal is támogatott.,

Támogatott elemek

Ellenőrzési stílusok érhetők el az alábbi űrlap-vezérlőelemek, valamint összetevők:

Tippek

Ha a képernyő-elrendezés lehetővé teszi, lehet cserélni a .{valid|invalid}-feedback osztályok .{valid|invalid}-tooltip osztályok megjelenítéséhez érvényesítési visszajelzéseket a stílusú tooltip. Ügyeljen arra, hogy a szülő position: relative rajta tooltip pozicionálás. Az alábbi példában oszloposztályaink már rendelkeznek ezzel, de a projekthez alternatív beállítás szükséges.,

testreszabása

Validation Államok testreszabható keresztül Sass a $form-validation-states térkép. A _variables.scss fájlban található Sass térkép át van hurkolva az alapértelmezett valid/invalid validációs állapotok létrehozásához. Ide tartozik egy beágyazott térkép az egyes államok színének és ikonjának testreszabásához. Míg a böngészők nem támogatnak más állapotokat, az egyéni stílusokat használók könnyen hozzáadhatnak összetettebb űrlap-visszajelzést.,

Felhívjuk figyelmét, hogy nem javasoljuk ezen értékek testreszabását a form-validation-state mixin módosítása nélkül.

Egyéni űrlapok

a Még Több testreszabáshoz és a böngészők közötti konzisztenciához használja teljesen egyedi formaelemeinket a böngésző alapértékeinek cseréjéhez. A szemantikai és hozzáférhető jelölések tetejére épülnek, így szilárd helyettesítői az alapértelmezett formavezérlésnek.,

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

minden jelölőnégyzet és rádió <input>és <label>a párosítás <div> egyéni vezérlésünk létrehozásához. Szerkezetileg ez ugyanaz a megközelítés, mint az alapértelmezett .form-check.

a testvérválasztót (~) használjuk minden <input>állapothoz—mint például a :checked —az egyéni űrlapjelzőnk megfelelő stílusához., Ha együtt a .custom-control-label osztály, mi is stílus a szöveg minden elem alapján a <input> ‘ s állapot.

elrejtjük az alapértelmezett <input> opacity és a.custom-control-label új egyéni űrlap mutató létrehozásához a helyén ::beforeés ::after. Sajnos nem tudunk egy egyéni egy csak a <input> mert CSS content nem működik, hogy az elem.,

az ellenőrzött Államokban Base64 beágyazott SVG ikonokat használunk az Open Iconic-ból. Ez biztosítja számunkra a legjobb irányítást stílus és helymeghatározás böngészők és eszközök.

Jelölőnégyzet

az Egyéni jelölőnégyzetek is használja a :indeterminate pszeudo osztály, amikor kézzel állítsa keresztül JavaScript (nincs elérhető HTML attribútumot megadása).,

Ha a jQuery, valami, mint ez elegendő lesz:

$('.your-checkbox').prop('indeterminate', true)

Rádió

Inline

Tiltva

az Egyéni jelölőnégyzeteket, majd a rádiók is le van tiltva., Add meg a disabled logikai tulajdonság, hogy a <input>, majd az egyéni indikátor, valamint a címke leírás automatikusan stílusú.

kapcsolók

egy kapcsolónak van egy egyéni jelölőnégyzete, de a.custom-switch osztályt használja a váltókapcsoló megjelenítéséhez. A kapcsolók támogatják a disabled attribútumot is.,

válassza ki a menüt

egyéni <select> a menüknek csak egyéni osztályra van szükségük, .custom-select az egyéni stílusok kiváltásához. Az egyéni stílusok a <select>kezdeti megjelenésére korlátozódnak, a <option>s értéket a böngésző korlátai miatt nem lehet módosítani.

a kis és nagy egyéni beállítások közül is választhat, hogy megfeleljen a hasonló méretű szövegbeviteleinknek.,

A multiple attribútum is támogatott:

a size attribútum:

Tartomány

egyéni <input type="range"> controls .custom-range. A sáv (a háttér) és a hüvelykujj (az érték) egyaránt úgy van kialakítva, hogy a böngészők között azonos legyen. Mivel csak az IE és a Firefox támogatja a hüvelykujj bal vagy jobb oldalán található sávok “kitöltését”, mint a haladás vizuális jelzését, jelenleg nem támogatjuk.,

<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., Ennek megváltoztatásához megadhat egy step értéket. Az alábbi példában megduplázzuk a lépések számát a step="0.5"használatával.

<label for="customRange3">Example range</label><input type="range" class="custom-range" min="0" max="5" step="0.5">

file browser

a fájlbevitel a legtöbb gnarly a csomó, és további Javascriptet igényel, ha azt szeretné, hogy horog őket funkcionális válassza fájl… és a kiválasztott fájlnév szöveget.

elrejtjük az alapértelmezett fájlt <input> via opacity, ehelyett stílusosítsa a <label>. A gomb generálása és elhelyezése ::after. Végül kijelentjük, hogy awidth ésheight a<input> megfelelő távolság a környező tartalom.,

A karakterláncok fordítása vagy testreszabása SCSS

a:lang() pszeudo-osztály a “Tallózás” szöveg más nyelvekre történő fordításának engedélyezésére szolgál. Írja felül a $custom-file-text Sass változót a megfelelő nyelvi címkével és lokalizált karakterláncokkal. Az angol húrok ugyanúgy testreszabhatók., Például itt van, hogyan lehet hozzáadni egy spanyol fordítást (a Spanyol nyelv kódja es):

$custom-file-text: ( en: "Browse", es: "Elegir");