1. Komponenty

Textové pole

angl. Text Area

Slouží k psaní/vkládání textu.

Nejčastěji používaný element ve formulářích


<div class="form-group">
    <input type="text" class="form-control" id="example-input-1" placeholder="Normal input">
    <label for="example-input-1" class="control-label">Label</label>
</div>
<div class="form-group">
    <input type="text" class="form-control is-invalid form-control--not-empty" id="example-input-2" placeholder="Error" value="Label">
    <label for="example-input-2" class="control-label">Error</label>
    <span class="help-block">Chyba: Lorem ipsum dolor sit amet</span>
</div>
<div class="form-group">
    <input type="text" class="form-control form-control--not-empty" id="example-input-3" placeholder="Disabled input" disabled="disabled" value="Disabled">
    <label for="example-input-3" class="control-label">Disabled</label>
</div>
<div class="form-group">
    <input type="text" class="form-control form-control--not-empty" id="example-input-4" placeholder="Readonly input" readonly="readonly" value="Readonly">
    <label for="example-input-4" class="control-label">Readonly</label>
</div>

Pro psaní/vkládání delšího textu


<div class="form-group">
    <textarea class="form-control" id="example-textarea-1" placeholder="Normal textarea"></textarea>
    <label for="example-textarea-1" class="control-label">Label</label>
</div>
<div class="form-group">
    <textarea type="text" class="form-control is-invalid" id="example-textarea-2" placeholder="Normal textarea"></textarea>
    <label for="example-textarea-2" class="control-label">Error</label>
    <span class="help-block">Chyba: Lorem ipsum dolor sit amet</span>
</div>
<div class="form-group">
    <textarea type="text" class="form-control" id="example-textarea-3" placeholder="Disabled textarea" disabled=""></textarea>
    <label for="example-textarea-3" class="control-label">Disabled</label>
</div>
<div class="form-group">
    <textarea type="text" class="form-control" id="example-textarea-4" placeholder="Readonly textarea" readonly=""></textarea>
    <label for="example-textarea-4" class="control-label">Readonly</label>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

Typ Použití
Textové pole Když očekáváte jako vstup od uživatele jediný řádek textu.
Víceřádkové textové pole Když očekáváte jako vstup od uživatele více jak jeden řádek textu.

Používejte textové pole, které uživateli ve formuláři pomáhá zadat, vybrat a vyhledat text. Textové pole se obvykle nachází ve formuláři, ale může být i součástí modálu, vyhledávání nebo karty. Běžné zadávání textu zahrnuje uživatelská jména, popisy, adresy URL, e-maily.

Při určování délky formulářového pole berte v potaz maximální možný počet znaků, který bude uživatel do pole zadávat.

Popis částí formulářového pole

  1. Označení (Label) - Krátké označení, kterým určíte jaké informace má uživatel do pole vyplnit. Zarovnávejte doleva.
  2. Pole pro vyplnění (Input) - Místo, kam uživatel píše/vkládá text.
  3. Zástupný text (Placeholder) - Dává informaci jak má uživatel pole použít (např. “Začněte psát”). Používejte pouze tam, kde je objasnění potřeba, tzn. nepoužívejte nadměrně.

Užitečné odkazy