Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - 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í.
discount 50 + hiring

input typu checkbox - Český HTML 5 manuál

Element <input> se používá ve formulářích, kde umožňuje uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributu type.

Typ checkbox je klasické zaškrtávací políčko. Je podobné radiobuttonu, ale je možné zaškrtnout více možností a tudíž musí mít každý unikátní jméno.

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete - Nabývá hodnot on a off, přičemž on je výchozí. Pokud je autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list - Obsahuje id elementu datalist, položky listu poté slouží jako předdefinované možnosti <input> elementu.
  • readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value - Přednastavená hodnota pole.
  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
  • pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

U typu checked můžeme ještě uvést atribut:

  • checked - Atribut je typu boolean. Pokud je uveden, je políčko zaškrtnuto.

Uveďme si jednoduchou ukázku 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ýsledek:

Ukázka formulářového pole input typu checkbox

Na server jsou odeslána pouze zaškrtnutá pole. Na hodnotě v tomto případě nezáleží a je zvykem ji nastavovat na 1 (jako true).

Pokud spolu checkboxy souvisí, můžeme si ulehčit práci tím, že je sdružíme do pole. To budou v atributu name reprezentovat []. Na server poté přijde pole odeslaných hodnot, 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ýsledek:

Ukázka formulářového pole input typu checkbox

Pozn.: U tohoto typu formulářového pole bychom měli použít element label jako popisek. Zde není pouze pro zjednodušení.


 

Všechny články v sekci
Formuláře - Český HTML 5 manuál
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
Ještě nikdo nehodnotil, buď první!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře

Avatar
Neaktivní uživatel:1.4.2014 14:41

A jak mám na serveru vyhodnotit, jestli je políčko zaškrtnuté?
Takhle?

<?php
if($_POST['checkbox']==true)
echo ("Pole je zaškrtnuté")
Odpovědět
1.4.2014 14:41
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Libor Šimo (libcosenior):1.4.2014 14:46

Myslím, že keď to odošleš nejakým tlačítkom (nie je tam, doplň si ho), dostaneš k dispozícii pole ingreience[] naplnené zaškrtnutými ingredianciami.

Odpovědět
1.4.2014 14:46
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.