Přepínače a zaškrtávací políčka

Když má uživatel vybrat jednu z několika možností, použijeme přepínače, tedy vstupy s type="radio". Přepínače fungují jako skupina: ze všech přepínačů se stejným atributem name může být vybraný jen jeden. Když uživatel vybere jiný, předchozí výběr zmizí. Každý přepínač má atribut value s hodnotou, která se odešle, když je vybraný, například velikost=velka.

Zaškrtávací políčko, tedy vstup s type="checkbox", funguje samostatně: uživatel může každé políčko zaškrtnout nebo odškrtnout nezávisle na ostatních. Hodí se pro otázky typu ano/ne, třeba pro souhlas s podmínkami. Zaškrtnuté políčko se odešle například jako syr=on, nezaškrtnuté se neodešle vůbec.

I přepínače a zaškrtávací políčka potřebují popis. Obvykle ho píšeme až za vstup, aby byl text vpravo od políčka. Kliknutím na popis se políčko také vybere, takže se do malého políčka snáz trefíme.

Takhle by mohla vypadat část objednávky pizzy:

<div>
	<input type="radio" name="velikost" value="mala" id="velikost-mala">
	<label for="velikost-mala">Malá</label>
	<input type="radio" name="velikost" value="velka" id="velikost-velka">
	<label for="velikost-velka">Velká</label>
</div>
<div>
	<input type="checkbox" name="syr" id="vstup-syr">
	<label for="vstup-syr">Extra sýr</label>
</div>

Tento kód se zobrazí takto (zkuste na něj klikat):

Malá Velká

Extra sýr

Pokyny

V prvním prázdném prvku div vytvořte přepínač s atributem name s hodnotou uroven, atributem value s hodnotou zacatecnik a atributem id s hodnotou uroven-zacatecnik. Za něj vytvořte prvek label s obsahem Začátečník, který k tomuto přepínači patří.

Pod něj do stejného prvku div vytvořte druhý přepínač se stejným atributem name s hodnotou uroven, atributem value s hodnotou pokrocily a atributem id s hodnotou uroven-pokrocily. Za něj vytvořte popis s obsahem Pokročilý. Potom spusťte kód a zkuste vybrat jednu možnost a pak druhou.

Ve druhém prázdném prvku div vytvořte zaškrtávací políčko s atributem name s hodnotou novinky a atributem id s hodnotou vstup-novinky. Za něj vytvořte popis s obsahem Posílejte mi novinky.

Začněte programovat zdarma

6/11