Formuláře (Čeština)

Příklady a pokyny pro použití stylů ovládání formulářů, možností rozvržení a vlastních komponent pro vytváření široké škály formulářů.

Přehled

Ovládací prvky formuláře Bootstrap se rozšiřují o naše Rebootované styly formulářů s třídami. Pomocí těchto tříd se přihlaste do svých přizpůsobených displejů pro konzistentnější vykreslování napříč prohlížeči a zařízeními.

Nezapomeňte na všechny vstupy použít vhodný atribut type (např. , email pro e-mailovou adresu nebo number pro číselné informace), abyste mohli využívat novější ovládací prvky vstupu, jako je ověření e-mailu, výběr čísla a další.

Zde je rychlý příklad, který ukazuje styly formulářů Bootstrap. Pokračujte v čtení dokumentace o povinných třídách, rozložení formulářů a dalších.

Ovládací prvky formuláře

Nezapomeňte prozkoumat naše vlastní formuláře a dále styl <select> s.

U vstupů do souborů vyměňte .form-control za .form-control-file.

Dimenzování

Nastavte výšky pomocí tříd jako .form-control-lg a .form-control-sm.

Pouze pro čtení

Přidejte readonly booleovský atribut na vstupu, aby se zabránilo úpravě hodnoty vstupu. Vstupy jen pro čtení vypadají světleji (stejně jako deaktivované vstupy), ale zachovají standardní kurzor.

Pouze pro čtení prostý text

Pokud chcete mít <input readonly> prvky ve svém formuláři stylizované jako prostý text, použijte .form-control-plaintext třída k odstranění výchozího stylu pole formuláře a zachování správného okraje a odsazení.

Zaškrtávací políčka a rádia

Výchozí zaškrtávací políčka a rádia jsou vylepšena pomocí .form-check, jedné třídy pro oba typy vstupů, která zlepšuje rozložení a chování jejich prvků HTML. Zaškrtávací políčka slouží k výběru jedné nebo několika možností v seznamu, zatímco rádia slouží k výběru jedné možnosti z mnoha.

Zakázaná zaškrtávací políčka a rádia jsou podporována, ale poskytují not-allowed při najetí myší nadřazeného <label> je třeba přidat atribut disabled do .form-check-input. Atribut disabled použije světlejší barvu, aby lépe určil stav vstupu.

Zaškrtávací políčka a rádia jsou vytvořena tak, aby podporovala ověřování formulářů na základě HTML a poskytovala stručné a přístupné štítky. Naše <input> s a <label> s jsou tedy sourozenecké prvky na rozdíl od <input> v rámci <label>. Toto je o něco podrobnější, protože musíte uvést id a for atributy, které se vztahují k <input> a <label>.

Výchozí (skládaný)

Ve výchozím nastavení bude libovolný počet zaškrtávacích políček a rádií, které jsou okamžitě sourozenci, svisle naskládány a vhodně rozmístěny s .form-check.

Vložené

Skupinová zaškrtávací políčka nebo rádia na stejném vodorovném řádku přidáním .form-check-inline do libovolného .form-check.

Bez štítků

Přidejte .position-static ke vstupům v .form-check, které nemají žádný text štítku. Nezapomeňte stále poskytovat nějakou formu štítku pro pomocné technologie (například pomocí aria-label).

Rozložení

Protože Bootstrap platí display: block a width: 100% téměř na všechny naše ovládací prvky formuláře , formuláře se ve výchozím nastavení skládají svisle. Pro změnu tohoto rozvržení na základě jednotlivých formulářů lze použít další třídy.

Skupiny formulářů

Třída .form-group je nejjednodušší způsob přidat do formulářů nějakou strukturu. Poskytuje flexibilní třídu, která podporuje správné seskupení štítků, ovládacích prvků, volitelného textu nápovědy a zpráv o ověření formuláře. Ve výchozím nastavení platí pouze margin-bottom, ale podle potřeby vyzvedne další styly v .form-inline. Použijte jej s <fieldset> s, <div> s nebo téměř s jakýmkoli jiným prvkem.

Mřížka formulářů

Složitější formuláře lze vytvářet pomocí našich tříd mřížek. Použijte je pro rozložení formulářů, které vyžadují více sloupců, různé šířky a další možnosti zarovnání.

Řádek formuláře

Můžete také vyměnit .row za .form-row, variace našeho standardního řádku mřížky, která přepíše výchozí okapové žlaby pro těsnější a kompaktnější rozvržení.

S mřížkovým systémem lze také vytvořit složitější rozvržení.

Horizontální formulář

Vytvořte horizontální formuláře pomocí mřížky přidáním třídy .row do skupin formulářů a pomocí .col-*-* třídy k určení šířky štítků a ovládacích prvků. Nezapomeňte přidat do svých <label> také .col-form-label, aby byly svisle vycentrovány s přidruženými ovládacími prvky formuláře.

Někdy možná budete muset použít nástroje pro okraj nebo polstrování, abyste vytvořili dokonalé zarovnání, které potřebujete. Například jsme odstranili padding-top na našem skládaném rádiovém vstupu, abychom lépe zarovnali základní linii textu.

Popisek vodorovného formuláře dimenzování

Dimenzování sloupců

Jak je ukázáno v předchozích příkladech, náš gridový systém umožňuje umístit libovolný počet .col s v rámci .row nebo .form-row. Rozdělí mezi nimi dostupnou šířku rovnoměrně. Můžete si také vybrat podmnožinu svých sloupců, abyste zabrali více nebo méně místa, zatímco zbývající .col s stejně rozdělit zbytek, s konkrétními třídami sloupců, jako je .col-7.

Automatické přizpůsobení velikosti

Následující příklad používá nástroj flexbox k vertikálnímu vystředění obsahu a změnám .col až .col-auto, aby vaše sloupce zabíraly pouze tolik místa, kolik je potřeba. Jinými slovy, velikost sloupců závisí na obsahu.

Potom je můžete znovu promíchat pomocí tříd sloupců specifických pro velikost.

A samozřejmě jsou podporovány vlastní ovládací prvky formulářů.

Vložené formuláře

Použijte .form-inline třída pro zobrazení řady štítků, ovládacích prvků formuláře a tlačítek na jednom vodorovném řádku. Ovládací prvky formulářů ve vložených formulářích se mírně liší od jejich výchozích stavů.

• Ovládací prvky jsou display: flex, sbalí jakýkoli prázdný prostor HTML a umožní vám poskytnout ovládací prvek zarovnání s nástroje pro mezery a flexbox.
• Ovládací prvky a skupiny vstupů obdrží width: auto přepsat výchozí Bootstrap width: 100%.
• Ovládací prvky se zobrazují pouze vložené ve výřezech, jejichž šířka je nejméně 576 pixelů, aby zohledňovaly úzké výřezy na mobilních zařízeních.

Možná budete muset ručně adresovat šířku a zarovnání jednotlivých ovládacích prvků formuláře s mezerami (jak je znázorněno níže). Na závěr nezapomeňte vždy zahrnout <label> do každého ovládacího prvku formuláře, i když jej potřebujete skrýt před návštěvníky jiných než obrazovkových prohlížečů s .sr-only .

Podporovány jsou také vlastní ovládací prvky formulářů a výběry.

Text nápovědy

Text nápovědy na úrovni bloků lze vytvářet pomocí .form-text (dříve známý jako .help-block ve verzi 3). Vložený text nápovědy lze flexibilně implementovat pomocí libovolného vloženého prvku HTML a tříd nástrojů, jako je .text-muted.

Text nápovědy pod vstupy lze stylizovat pomocí .form-text. Tato třída zahrnuje display: block a přidává horní okraj pro snadné mezery od výše uvedených vstupů.

Vložený text může používat jakýkoli typický vložený prvek HTML (ať už <small>, <span> nebo něco jiného) s ničím jiným než s užitnou třídou.

Zakázané formuláře

Přidejte na vstup booleovský atribut disabled, abyste zabránili interakcím uživatelů a zobrazili je lehčí.

Přidat disabled atribut <fieldset> deaktivuje všechny ovládací prvky uvnitř.

Ověření

Poskytněte svým uživatelům hodnotnou zpětnou vazbu s ověřováním formulářů HTML5 – k dispozici ve všech našich podporovaných prohlížečích. Vyberte si z výchozí zpětné vazby k ověření prohlížeče nebo implementujte vlastní zprávy pomocí našich integrovaných tříd a spouštěcího JavaScriptu.

Jak to funguje

Takto funguje ověřování formulářů s Bootstrap:

• Ověření HTML formuláře se aplikuje prostřednictvím dvou pseudotříd CSS, :invalid a :valid. Vztahuje se na prvky <input>, <select> a <textarea>.
• Bootstrap nastavuje rozsah :invalid a :valid stylů na nadřazenou .was-validated třídu, obvykle použitou na <form>. Jinak se jakékoli povinné pole bez hodnoty při načítání stránky zobrazí jako neplatné. Tímto způsobem si můžete vybrat, kdy je aktivovat (obvykle po pokusu o odeslání formuláře).
• Jako záložní řešení .is-invalid a . Nevyžadují rodičovskou třídu .was-validated.
• Kvůli omezením ve fungování CSS nemůžeme (v současné době) použít styly na <label> který přichází před ovládacím prvkem formuláře v DOM bez pomoci vlastního JavaScriptu.
• Všechny moderní prohlížeče podporují API pro ověření omezení, řadu metod JavaScriptu pro ověřování ovládacích prvků formuláře.
• Zprávy zpětné vazby mohou využívat výchozí nastavení prohlížeče (pro každý prohlížeč odlišné a nelze je stylovat pomocí CSS) nebo naše vlastní styly zpětné vazby s dalšími HTML a CSS.
• Vlastní zprávy o platnosti můžete poskytnout pomocí setCustomValidity v JavaScriptu.

Z tohoto důvodu zvažte následující ukázky našich vlastních stylů ověřování formulářů, volitelných tříd na straně serveru a výchozích nastavení prohlížeče.

Vlastní styly

U vlastních zpráv pro ověření formuláře Bootstrap budete muset do svého iv id = přidat booleovský atribut novalidate. „83a5b29aee“> . To zakáže výchozí popisy zpětné vazby prohlížeče, ale stále poskytuje přístup k API pro ověřování formulářů v JavaScriptu. Zkuste odeslat následující formulář; náš JavaScript zachytí tlačítko pro odeslání a předá vám zpětnou vazbu.

Při pokusu o odeslání se zobrazí :invalid a :valid styly použité na ovládací prvky formuláře.

Výchozí nastavení prohlížeče

Nezajímají vás vlastní zpětnovazební zprávy o ověření ani psaní JavaScriptu pro změnu chování formuláře? Dobře, můžete použít výchozí nastavení prohlížeče. Zkuste odeslat následující formulář. V závislosti na vašem prohlížeči a operačním systému uvidíte mírně odlišný styl zpětné vazby.

I když tyto styly zpětné vazby nelze stylovat pomocí CSS, text zpětné vazby si můžete přizpůsobit pomocí JavaScriptu.

Strana serveru

Doporučujeme použít ověření na straně klienta, ale v případě, že požadujete stranu serveru, můžete označit neplatná a platná pole formuláře pomocí .is-invalid a .is-valid. Upozorňujeme, že .invalid-feedback jsou u těchto tříd také podporovány.

Podporované prvky

Naše vzorové formuláře zobrazují nativní textové <input> výše, ale jsou k dispozici styly ověřování formulářů i pro naše vlastní ovládací prvky formulářů.

Popisy

Pokud to rozložení formuláře umožňuje, můžete vyměnit .{valid|invalid}-feedback třídy pro .{valid|invalid}-tooltip třídy pro zobrazení zpětné vazby k ověření ve stylu popisku. Ujistěte se, že máte nadřazený prvek, který má position: relative pro umístění popisku. V níže uvedeném příkladu to naše třídy sloupců již mají, ale váš projekt může vyžadovat alternativní nastavení.

Vlastní formuláře

Pro ještě větší přizpůsobení a kříž konzistence prohlížeče, použijte naše zcela vlastní prvky formuláře k nahrazení výchozích nastavení prohlížeče. Jsou postaveny na sémantických a přístupných značkách, takže jsou pevnými náhradami za jakékoli výchozí ovládací prvky formuláře.

Zaškrtávací políčka a rádia

Každé zaškrtávací políčko a rádio jsou zabaleny do <div> se sourozencem <span> k vytvoření naší vlastní kontroly a <label> za doprovodný text. Strukturálně se jedná o stejný přístup jako u našeho výchozího .form-check.

Volič sourozenců (~) používáme pro všechny naše <input> stavy – jako :checked – abychom správně nastavili náš vlastní indikátor formuláře. V kombinaci s třídou .custom-control-label můžeme také stylizovat text pro každou položku na základě stavu <input>.

Skryjeme výchozí <input> pomocí opacity a pomocí .custom-control-label vytvoříme nový vlastní indikátor formuláře na místě s ::before a ::after. Bohužel nemůžeme vytvořit vlastní pouze z <input>, protože CSS content na tomto prvku nefunguje.

V kontrolovaných stavech používáme ikony SVG vložené do base64 z Open Iconic. To nám poskytuje nejlepší kontrolu nad stylingem a umístěním v různých prohlížečích a zařízeních.

Zaškrtávací políčka

Vlastní zaškrtávací políčka může také použít :indeterminate pseudo třídu, když je nastavena ručně pomocí JavaScriptu (pro její specifikaci není k dispozici žádný atribut HTML).

Pokud používáte jQuery, mělo by stačit něco takového:

Rádia

Inline

Zakázáno

Vlastní zaškrtávací políčka a rádia lze také deaktivovat. Přidejte disabled booleovský atribut do <input> a vlastní indikátor a popis štítku budou automaticky upraveny.

Vybrat nabídku

Vlastní <select> nabídky ke spuštění vlastních stylů potřebují pouze vlastní třídu .custom-select.

Můžete si také vybrat z malého a velkého vlastního výběru do odpovídají našim podobně velkým textovým vstupům.

Je podporován také atribut multiple:

Stejně jako atribut size:

Prohlížeč souborů

Vstup do souboru je nejdrsnější partie a vyžaduje další JavaScript, pokud je chcete připojit pomocí funkčního příkazu Vybrat soubor… a vybraného názvu souboru.

Skrýváme výchozí soubor <input> prostřednictvím a místo toho stylujte <label>. Tlačítko je generováno a umístěno pomocí ::after. Nakonec deklarujeme width a height na <input> správné mezery pro okolní obsah .

Překlad nebo přizpůsobení řetězců

pseudotřída :lang() se používá k překladu textu „Procházet“ do jiných jazyky. Přepsat nebo přidat položky do $custom-file-text proměnné Sass s příslušnou jazykovou značkou a lokalizovanými řetězci. Anglické řetězce lze přizpůsobit stejným způsobem.Tady je příklad toho, jak lze přidat překlad do španělštiny (kód jazyka Španělska je es):

V akci lang(es) je vstup vlastního souboru pro španělský překlad:

Abyste mohli zobrazit správný text, musíte správně nastavit jazyk svého dokumentu (nebo jeho podstromu). To lze provést pomocí atributu lang v prvku <html> nebo záhlaví HTTP Content-Language , mimo jiné.