formuláře (Čeština)

příklady a pokyny pro použití stylů řízení 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í na naše restartované styly formulářů s třídami. Pomocí těchto tříd se můžete rozhodnout pro své přizpůsobené displeje pro konzistentnější Vykreslování napříč prohlížeči a zařízeními.

nezapomeňte použít vhodný atribut type na všech vstupech (např.,, email pro e-mailovou adresu nebo number pro numerické informace) využít novější vstupní kontroly, jako je ověření e-mailu, výběr čísla, a další.

zde je rychlý příklad pro demonstraci stylů formulářů Bootstrap. Pokračujte ve čtení dokumentace o požadovaných třídách, rozvržení formulářů a dalších.

ovládací prvky Formuláře

ujistěte se, že prozkoumat naše vlastní formuláře pro další styl <select>y.

Pro soubor vstupů, swap .form-control .form-control-file.,

Velikosti

Nastavení výšky pomocí třídy jako .form-control-lg .form-control-sm.

Readonly

přidatreadonly boolean atribut na vstupu, aby se zabránilo změně hodnoty vstupu. Vstupy pouze pro čtení se zdají lehčí (stejně jako Zakázané vstupy), ale zachovávají standardní kurzor.,

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

Readonly prostý text

Pokud chcete mít <input readonly> prvky v podobě stylizované jako prostý text, pomocí .form-control-plaintext class odstranit výchozí pole formuláře styling a zachovat správnou margin a padding.

vstupy rozsahu

nastavte vodorovně posuvné vstupy rozsahu pomocí .form-control-range.,

zaškrtávací Políčka a rádií

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

jsou podporovány zaškrtávací políčka a rádia. Atribut disabled použije světlejší barvu, která pomůže označit stav vstupu.,

zaškrtávací políčka a použití rádia jsou vytvořeny pro podporu validace formulářů založených na HTML a poskytují stručné a přístupné štítky. Jako takový, naše <input><label>y jsou sourozenci prvky, na rozdíl od <input> do <label>. Je to trochu upovídanější, jak musíte zadat id for atributy se týkají <input> <label>.,

Default (skládaný)

ve výchozím nastavení, libovolný počet políček a rádia, které jsou bezprostřední sourozenec bude vertikálně naskládané a vhodně rozmístěných .form-check.

Inline

Skupina zaškrtávacích políček nebo rádia na stejné horizontální řádek přidáním .form-check-inline na jakékoli .form-check.,

Bez štítků

Přidat .position-static vstupy do .form-check, které nemají žádné označení textu. Nezapomeňte ještě poskytnout nějakou formu štítku pro asistenční technologie (například pomocí aria-label).,

Rozvržení

Od Bootstrap platí display: block width: 100% téměř všechny naše ovládací prvky formuláře, formy, bude ve výchozím nastavení zásobníku svisle. Další třídy mohou být použity pro změnu tohoto rozvržení na základě formy.

skupiny formulářů

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

mřížka formuláře

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

Formulář řádek

můžete také vyměnit .row .form-row, variace naše standardní mřížky řádek, který přepíše výchozí sloupec žlaby pro pevnější a kompaktnější rozložení.

složitější rozvržení lze také vytvořit pomocí mřížkového systému.

Horizontální podobě

Vytvořit horizontální formy s mřížkou, přidáním .row class tvořit skupiny a pomocí .col-*-* třídy určete šířku vašeho popisky a ovládací prvky., Nezapomeňte přidat .col-form-label do <label> s, takže jsou svisle vystředěny pomocí přidružených ovládacích prvků formuláře.

občas, možná budete muset použít margin nebo polstrování nástroje k vytvoření dokonalé zarovnání, které potřebujete. Například jsme odstranili padding-top na naše skládaný rozhlasové vstupy štítku lépe sladit text základní.,

Horizontální podobě označení velikosti

Sloupec dimenzování

Jak je uvedeno v předchozích příkladech, naše grid systém umožňuje umístit libovolný počet .coldo .row nebo .form-row. Rozdělí mezi ně dostupnou šířku stejně. Můžete také vybrat podmnožinu sloupců, aby se více nebo méně prostoru, zatímco zbývajících .cols rovnoměrně rozdělit zbytek, s konkrétní sloupec třídy jako .col-7.,

Auto-velikosti

níže uvedený příklad používá flexbox nástroj vertikálně vycentrovat obsah a změny .col .col-auto tak, že vaše sloupce jen zabírají tolik prostoru, kolik potřeboval. Jinými slovy, velikost sloupce sama o sobě na základě obsahu.

můžete to znovu remixovat pomocí tříd sloupců specifických pro velikost.

a samozřejmě jsou podporovány vlastní ovládací prvky formuláře.,

Inline forms

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

• Ovládání display: flex, hroutí žádné HTML bílý prostor a umožňuje zajistit seřízení ovládání s roztečí a flexbox nástroje.
• ovládací prvky a vstupní skupiny obdržíwidth: auto přepsat výchozí Bootstrap width: 100%.,ovládací prvky
• se zobrazují pouze v inline viewportech, které jsou široké nejméně 576px, aby odpovídaly úzkým viewports na mobilních zařízeních.

možná budete muset ručně řešit šířku a zarovnání jednotlivých ovládacích prvků formuláře pomocí obslužných programů (jak je uvedeno níže). Nakonec nezapomeňte vždy zahrnout<label> s každým ovládáním formuláře,i když jej potřebujete skrýt před návštěvníky bez obrazovky pomocí .sr-only.

vlastní ovládací prvky formuláře a vybere jsou také podporovány.,

text

úroveň Bloku textu nápovědy ve formulářích mohou být vytvořeny pomocí .form-text (dříve známý jako .help-block v3). Inline text nápovědy lze flexibilně realizovat pomocí nějaké inline HTML prvek a pomocné třídy, 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á nějaký horní okraj pro snadné rozestupy od vstupů výše.,

Inline textu lze použít jakýkoliv typické inline HTML element (třeba <small> <span>, nebo něco jiného), s nic víc, než nástroj třídy.

Zakázána formy

Přidat disabled boolean atribut na vstup, aby se zabránilo uživatelské interakce a aby to vypadalo, lehčí.,

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

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

validace

poskytují cenné, žalovatelné zpětnou vazbu pro vaše uživatele s HTML5 validace formuláře-k dispozici ve všech našich podporovaných prohlížečů. Vyberte si z výchozí validační zpětné vazby prohlížeče nebo implementujte vlastní zprávy pomocí našich vestavěných tříd a spouštěcího JavaScriptu.,

Jak to funguje

Zde je, jak validace formuláře pracuje s Bootstrap:

• validace HTML forma je uplatňována prostřednictvím CSS dvě pseudo-třídy, :invalid :valid. Platí pro<input>,<select> a<textarea> elements.,
• Bootstrap obory :invalid :valid styly na mateřskou .was-validated třídy, obvykle aplikován na <form>. V opačném případě se jakékoli požadované pole bez hodnoty zobrazí jako neplatné při načtení stránky. Tímto způsobem si můžete vybrat, kdy je aktivovat (obvykle po pokusu o odeslání formuláře).
• obnovit vzhled formuláře (například v případě dynamické formuláře podání pomocí AJAX), odstraňte .was-validated class <form> opět po podání.,
• Jako záložní, .is-invalid .is-valid třídy mohou být použity namísto pseudo-třídy pro validace na straně serveru. Nevyžadují.was-validated Mateřská třída.
• Vzhledem k omezení v tom, jak CSS funguje, nemůžeme (v současné době) použít styly na <label>, která je před ovládacím prvkem formuláře v DOM bez pomoci vlastní JavaScript.
• všechny moderní prohlížeče podporují API pro validaci omezení, řadu metod JavaScriptu pro ověření ovládacích prvků formuláře.,
• zprávy zpětné vazby mohou využívat výchozí hodnoty prohlížeče (různé pro každý prohlížeč a nestylovatelné pomocí CSS) nebo naše vlastní styly zpětné vazby s dalšími HTML a CSS.
• můžete poskytnout vlastní zprávy o platnosti ssetCustomValidity v JavaScriptu.

s ohledem na to zvažte následující ukázky pro naše styly ověřování vlastních formulářů, volitelné třídy na straně serveru a výchozí nastavení prohlížeče.,

Vlastní styly

Pro vlastní Bootstrap form validation zprávy, musíte přidat novalidate boolean atribut <form>. Tím se zakáže výchozí popisy zpětné vazby prohlížeče, ale stále poskytuje přístup k API pro ověření formuláře v JavaScriptu. Pokuste se odeslat níže uvedený formulář; náš JavaScript zachytí tlačítko Odeslat a předá vám zpětnou vazbu. Při pokusu o odeslání se zobrazí:invalid a:valid styly aplikované na ovládací prvky formuláře.,

vlastní styly zpětné vazby používají vlastní barvy, okraje, styly zaostření a ikony na pozadí pro lepší komunikaci zpětné vazby. Pozadí ikony <select>s jsou k dispozici pouze s .custom-select, a ne .form-control.

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

nemáte zájem o vlastní validační zprávy nebo psaní JavaScriptu pro změnu chování formuláře? Vše dobré, můžete použít výchozí nastavení prohlížeče. Zkuste odeslat níže uvedený formulář. V závislosti na Vašem prohlížeči a operačním systému uvidíte trochu jiný styl zpětné vazby.,

zatímco tyto styly zpětné vazby nelze stylizovat pomocí CSS, můžete text zpětné vazby stále přizpůsobit pomocí JavaScriptu.

na straně Serveru

doporučujeme používat client-side validaci, ale v případě, že budete potřebovat server-side validaci, můžete uvést neplatné a platné podobě pole s .is-invalid .is-valid. Všimněte si, že .invalid-feedback je také podporován s těmito třídami.,

Podporované prvky

Ověření styly jsou k dispozici pro následující ovládací prvky a součásti:

Popisky

Pokud je vaše forma uspořádání umožňuje, můžete swap .{valid|invalid}-feedback třídy .{valid|invalid}-tooltip třídy se zobrazí validace zpětné vazby ve stylu popisku. Ujistěte se, že máte rodiče s position: relative pro umístění popisku. V níže uvedeném příkladu to již mají naše třídy sloupců, ale váš projekt může vyžadovat alternativní nastavení.,

přizpůsobení

validační stavy lze přizpůsobit pomocí Sass pomocí$form-validation-states mapa. Tato mapa Sass se nachází v našem souboru _variables.scss a vygeneruje výchozí valid/invalid validační stavy. Součástí je vnořená mapa pro přizpůsobení barvy a ikony každého státu. Zatímco prohlížeče nepodporují žádné jiné státy, ti, kteří používají vlastní styly, mohou snadno přidat složitější zpětnou vazbu formuláře.,

Upozorňujeme, že tyto hodnoty nedoporučujeme upravovat, aniž bychom také upravovaliform-validation-state mixin.

Vlastní Formuláře

pro ještě větší přizpůsobení a křížovou konzistenci 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ém a přístupném značení, takže jsou solidní náhradou za jakékoli výchozí ovládání formuláře.,

zaškrtávací Políčka a rádií

Každý checkbox a radio <input> <label> párování je zabalený v <div> vytvořit naši vlastní kontrolu. Strukturálně je to stejný přístup jako náš výchozí .form-check.

použijeme sourozence volič (~) pro všechny naše <input> státy—jako je :checked—správně styl naše vlastní formuláře ukazatel., V kombinaci s třídou .custom-control-label můžeme také upravit text pro každou položku na základě stavu <input>.

skrýt výchozí <input> opacity .custom-control-label vytvořit nový vlastní formulář ukazatel na jeho místo ::before ::after. Bohužel nemůžeme vytvořit vlastní pouze z <input>, protože CSS content nefunguje na tomto prvku.,

v kontrolovaných stavech používáme Base64 vložené ikony SVG z Open Iconic. To nám poskytuje nejlepší kontrolu pro styling a polohování napříč prohlížeči a zařízeními.

Políčka

Vlastní políčka můžete také využít :indeterminate pseudo třídy, když ručně nastavit přes JavaScript (není k dispozici žádný HTML atribut pro specifikaci).,

Pokud používáte jQuery, něco jako tohle by mělo stačit:

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

Rádia

Inline

Zakázán

Vlastní políčka a rádií může být také zakázána., Přidat do disabled boolean atribut <input> a vlastní indikátor a popis označení, bude automaticky stylem.

Přepínače

přepínač má markup vlastní políčko, ale používá .custom-switch třídy k tomu, aby přepínač. Přepínače také podporují atribut disabled.,

Zvolte menu

Vlastní <select> menu potřebujete pouze vlastní třídy, .custom-select se spustí vlastní styly. Vlastní styly jsou omezeny na počáteční vzhled <select>a nemohou změnit <option>s kvůli omezením prohlížeče.

můžete si také vybrat z malých a velkých vlastních výběrů, které odpovídají našim podobně velkým textovým vstupům.,

multiple atribut je podporován také:

Jako je size atribut:

Sortiment

Vytvořte si vlastní <input type="range"> ovládací prvky .custom-range. Stopa (pozadí) a palec (hodnota) jsou stylizované tak, aby vypadaly stejně v prohlížečích. Protože pouze IE a Firefox podporují „plnění“ své stopy zleva nebo zprava palce jako prostředek k vizuálnímu označení pokroku, v současné době ji nepodporujeme.,

<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., Chcete-li to změnit, můžete zadat hodnotu step. V níže uvedeném příkladu zdvojnásobíme počet kroků pomocí step="0.5".

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

prohlížeč Souborů

vstupní soubor je nejvíce drsná parta a vyžaduje další JavaScript, pokud byste chtěli spojit je s funkční Vybrat soubor a vybraný název souboru text.

skrýt výchozí soubor <input> přes opacity a místo toho stylu <label>. Tlačítko je generováno a umístěno pomocí ::after. Konečně jsme se vyhlásit width height <input> pro správné mezery na okolní obsah.,

Překládání nebo přizpůsobení řetězce s SCSS

:lang() pseudo-třídy slouží k tomu, aby překlad „Procházet“ text do jiných jazyků. Přepsat nebo přidat položky do $custom-file-text Sass proměnné s příslušnými jazyk tag a lokalizované řetězce. Anglické řetězce lze přizpůsobit stejným způsobem., Například, tady je návod, jak jeden by mohl přidat překlad do španělštiny (španělština je jazyk, kód je es):

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

Zde je lang(es) v akci na vlastní vstupní soubor pro překlad do španělštiny:

Budete muset nastavit jazyk dokumentu (nebo podstromu nich) správně tak, aby pro správný text, který bude zobrazen., To lze provést pomocí lang atribut na <html> element nebo Content-Language HTTP hlavičky, mezi další metody.

Překládání nebo přizpůsobení řetězce s HTML

Bootstrap také poskytuje způsob, jak přeložit „Procházet“ text v HTML data-browse atribut, který může být přidán do vlastní vstupní štítek (příklad v holandštině):