Tento článek vás provede vytvořením přepínače HTML pomocí praktického příkladu.
Jak přidat přepínač do HTML?
Chcete-li přidat přepínač do HTML, postupujte podle níže uvedené syntaxe:
< vstup typ = 'rádio' název = '' hodnota = '' >
Zde je popis uvedené syntaxe:
- “ typ ”: Tento atribut určuje, jaký typ vstupu chcete vytvořit, jako je text, rádio, zaškrtávací políčko a další. Chcete-li vytvořit přepínač, musí být hodnota atributu nastavena jako „radio“.
- “ název ”: Definuje název vstupního prvku. Tento atribut by měl být stejný pro seznam přepínacích tlačítek.
- “ hodnota ”: Toto určuje hodnotu, která bude odeslána na server, když je přepínač označen jako zaškrtnutý.
Příklad: Přidání přepínacího tlačítka do HTML
Tento příklad bude diskutovat o postupu přidání přepínače do HTML pomocí přepínače vstupu. v
Krok 1: Vytvoření souboru HTML
Nejprve do souboru HTML přidejte značku
Uvnitř vytvořeného prvku
- Nejprve přidejte „ ” pro přidání nadpisu na stránku.
- Pak ' ” tag pro odstavec nebo textový řádek.
- Poté je vstupní značka přidána s atributem „ typ 'mající hodnotu' rádio “, název je nastaven jako výběr a „ hodnota ' tak jako ' Červené “. Každému přepínači se stejným názvem jsou přiřazeny různé hodnoty. Stejný název představuje stejnou skupinu nebo seznam.
- Pokud chcete přidat tlačítko, které je ve výchozím nastavení označeno jako zaškrtnuté, přiřaďte atribut „ kontrolovány “ na toto tlačítko.
- Konečně, „ <štítek> ” prvek na každém přepínači se používá k přidání titulků. Poskytuje také lepší dostupnost.
Níže uvedený kód je interpretací výše uvedeného scénáře:
< h1 > Přepínač HTML h1 >< p > Jaká je tvoje oblíbená barva? p >
< vstup typ = 'rádio' název = 'vybrat barvu' hodnota = 'Červené' kontrolovány >
< označení pro = 'radio1' > Červené označení >
< br >
< vstup typ = 'rádio' název = 'vybrat barvu' hodnota = 'modrý' >
< označení pro = 'radio1' > Modrý označení >
< br >
< vstup typ = 'rádio' název = 'vybrat barvu' hodnota = 'zelená' >
< označení pro = 'radio1' > Zelená označení >
< br >
< vstup typ = 'rádio' název = 'vybrat barvu' hodnota = 'nachový' >
< označení pro = 'radio1' > Nachový označení >
< br >
< vstup typ = 'rádio' název = 'vybrat barvu' hodnota = 'ostatní' >
< označení pro = 'radio1' > Ostatní označení >
Je vidět, že přepínače jsou úspěšně vytvořeny:
Styly můžete také použít na výše vytvořený přepínač podle níže uvedeného kódu CSS.
Krok 2: Použití stylu na HTML
' div ” označuje značku div, kterou jsme vytvořili v souboru HTML:
- Za prvé, „ barva pozadí “ vlastnost je nastavena jako “ #8197f0 “.
- “ okraj “ vlastnost je nastavena jako “ 5px tečkovaný #13023a “, kde 5px představuje šířku ohraničení, tečkovaná označuje typ čáry a další označuje barvu ohraničení.
- “ vycpávka “ je nastaveno jako “ 20px 100px ” kde 20px určuje odsazení shora a zdola a 100px udává odsazení zleva a zprava.
- Pro styl písma přiřaďte „ rodina písem 'hodnota nemovitosti jako ' kurzívní “.
CSS
div {barva pozadí: #8197f0;
ohraničení: 5px tečkované #13023a;
odsazení: 20px 100px;
velikost písma: 20px;
font-family: cursive;
}
Je vidět, že prvek div je stylizován úspěšně:
A je to! Podrobně jsme vysvětlili přepínač HTML.
Závěr
Přepínač je vstup, který se vždy zobrazuje ve skupinách dvou nebo více možností. Z této skupiny může uživatel vybrat pouze jednu možnost. V HTML lze přepínač vytvořit pomocí „