Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Ukážka formulárového poľa input typu checkbox - Formuláre - Český HTML 5 manuál

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:

Ukážka formulárového poľa input typu checkbox - Formuláre - Český HTML 5 manuál

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.


 

Všetky články v sekcii
Formuláre - Český HTML 5 manuál
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity