Ez a cikk egy gyakorlati példa segítségével elvezeti Önt egy HTML választógomb létrehozásához.
Hogyan lehet rádiógombot hozzáadni a HTML-hez?
Ha választógombot szeretne hozzáadni a HTML-hez, kövesse az alábbi szintaxist:
< bemenet típus = 'rádió' név = '' érték = '' >
Íme a megadott szintaxis leírása:
- ' típus ”: Ez az attribútum határozza meg, hogy milyen típusú bevitelt kíván létrehozni, például szöveget, rádiót, jelölőnégyzetet stb. Rádiógomb létrehozásához az attribútum értékét „rádió”-ra kell állítani.
- ' név ”: Meghatározza a bemeneti elem nevét. Ennek az attribútumnak meg kell egyeznie a választógombok listájában.
- ' érték ”: Megadja azt az értéket, amelyet a rendszer elküld a szervernek, ha a rádiógomb bejelöltként van megjelölve.
Példa: Rádiógomb hozzáadása HTML-ben
Ez a példa azt az eljárást tárgyalja, hogy a beviteli választógomb segítségével HTML-be adjunk rádiógombot. Ban ben
1. lépés: HTML fájl létrehozása
Először adjon hozzá egy
A létrehozott
- Először adja hozzá a „ ” címkét, hogy fejlécet adjon az oldalnak.
- Ezután egy ' ” címke egy bekezdéshez vagy szövegsorhoz.
- Ezt követően a bemeneti címke hozzáadódik egy ' attribútummal típus 'értékkel bír' rádió ”, a név kiválasztásra kerül, és „ érték ' mint ' piros ”. Minden azonos nevű választógomb különböző értéket kap. Ugyanaz a név ugyanazt a csoportot vagy listát jelöli.
- Ha olyan gombot szeretne hozzáadni, amely alapértelmezés szerint be van jelölve, akkor rendelje hozzá a „ ellenőrizve ” arra a gombra.
- Végül a „
” elem minden választógombon feliratok hozzáadására szolgál. Jobb elérhetőséget is biztosít.
Az alábbi kód a fenti forgatókönyv értelmezése:
< h1 > HTML rádiógomb h1 >< p > Melyik a kedvenc színed? p >
< bemenet típus = 'rádió' név = 'szín kiválasztása' érték = 'piros' ellenőrizve >
< címke számára = 'rádió1' > Piros címke >
< br >
< bemenet típus = 'rádió' név = 'szín kiválasztása' érték = 'kék' >
< címke számára = 'rádió1' > Kék címke >
< br >
< bemenet típus = 'rádió' név = 'szín kiválasztása' érték = 'zöld' >
< címke számára = 'rádió1' > Zöld címke >
< br >
< bemenet típus = 'rádió' név = 'szín kiválasztása' érték = 'lila' >
< címke számára = 'rádió1' > Lila címke >
< br >
< bemenet típus = 'rádió' név = 'szín kiválasztása' érték = 'mások' >
< címke számára = 'rádió1' > Mások címke >
Látható, hogy a választógombok sikeresen létrejöttek:
A fent említett választógombra stílusokat is alkalmazhat az alább említett CSS-kód követésével.
2. lépés: Stílus alkalmazása HTML-re
Az ' div ” a div címkét jelöli, amelyet a HTML-fájlban hoztunk létre:
- Először is a „ háttérszín ' tulajdonság a következőre van állítva: ' #8197f0 ”.
- ' határ ' tulajdonság a következőre van állítva: ' 5 képpont pontozott #13023a ”, ahol az 5 képpont a szegély szélességét, a pontozott a vonal típusát, a következő pedig a szegély színét jelöli.
- ' párnázás ' a következőre van állítva: ' 20 képpont 100 képpont ” ahol a 20px a felülről és alulról, a 100px pedig a bal és jobb oldali kitöltést jelöli.
- A betűtípus stílusához rendelje hozzá a „ betűtípus család ' ingatlan értéke mint ' kurzív ”.
CSS
div {háttérszín: #8197f0;
szegély: 5 képpont pontozott #13023a;
padding: 20px 100px;
betűméret: 20 képpont;
font-family: cursive;
}
Látható, hogy a div elem stílusa sikeresen megtörtént:
Ez az! Részletesen elmagyaráztuk a HTML választógombot.
Következtetés
A rádiógomb egy olyan bemenet, amely mindig két vagy több opcióból álló csoportokban jelenik meg. Ebből a csoportból a felhasználó csak egy lehetőséget választhat. A HTML-ben egy rádiógombot a „