input typu checkbox - Slovenský HTML 5 manuál

Element sa používa vo formulároch, kde umožňuje užívateľovi vkladať dáta. Môže mať mnoho podôb, ktoré sa líšia rôznym nastavením atribútu type.

Typ checkbox je klasickej zaškrtávacie políčko. Je podobné RadioButton, ale je možné zaškrtnúť viac možností a teda musí mať každý unikátne meno.

Nasledujúce atribúty sú spoločné pre všetky typy inputov:

• autocomplete - Vstupuje hodnôt on a off, pričom on je predvolený. Ak je autocomplete zapnutý, ponúka prehliadač užívateľovi pri vyplňovaní údajov našepkávač, ktorý zobrazuje skôr zapísané hodnoty.
• disabled - Atribút je boolean. Ak je uvedený, nemožno meniť hodnotu elementu a ten je často zobrazený ako zašednutý.
• list - Obsahuje id elementu datalist, položky listu potom slúžia ako preddefinované možnosti elementu.
• readonly - Atribút je boolean. Ak je uvedený, nemožno hodnoty v danom poli editovať.
• name - Definuje meno elementu. Meno musí byť unikátne vzhľadom k formuláru a je po odoslaní použité ako kľúč v dvojicu kľúč-hodnota, ktorá sa na server odošle.
• value - Prednastavená hodnota poľa.
• autofocus - Atribút je boolean. Ak je uvedený, element sa zaktivní po načítaní stránky.
• form - Element môže byť definovaný mimo formulár a následne byť k tomuto formuláru pripojený uvedením atribútu form s hodnotou id formulára. Element môže patriť viac formulárom.
• pattern - Obsahuje regulárny výraz, podľa ktorého sa má hodnota v poli validovať.
• placeholder - Definuje text, ktorý sa zobrazí v prípade, že je pole prázdne. Zvyčajne je vykreslený zašednuté a slúži ako pomocník.
• required - Atribút je boolean. Ak je uvedený, znamená to, že pole musí byť pre odoslanie formulára vyplnené.

Pri type checked môžeme ešte uviesť atribút:

• checked - Atribút je boolean. Ak je uvedený, je políčko začiarknuté.

Uveďme si jednoduchú ukážku inputu typu checkbox:

<input type="checkbox" name="novinky" value="1" checked="checked" /> Přeji si zasílat novinky emailem.<br />
<input type="checkbox" name="pravidla" value="1" /> Souhlasím s pravidly registrace.

A výsledok:

Na server sú odoslané iba zaškrtnuté pole. Na hodnote v tomto prípade nezáleží a je zvykom ju nastavovať na 1 (ako true).

Ak spolu checkboxy súvisí, môžeme si uľahčiť prácu tým, že je zoskupíme do poľa. To budú v atribúte name reprezentovať []. Na server potom príde poľa odoslaných hodnôt, indexované od 0.

Zvolte si ingredience na Vaší pizzu:<br />
<input type="checkbox" name="ingreience[]" value="syr"> Extra sýr<br />
<input type="checkbox" name="ingreience[]" value="zampiony"> Žampiony<br />
<input type="checkbox" name="ingreience[]" value="kukurice"> Kukuřice<br />
<input type="checkbox" name="ingreience[]" value="slanina"> Slanina<br />
<input type="checkbox" name="ingreience[]" value="maso"> Kuřecí maso

výsledok:

Pozn .: U tohto typu formulárového poľa by sme mali použiť element label ako popisok. Tu nie je len pre zjednodušenie.