Šis straipsnis padės jums sukurti HTML radijo mygtuką, naudojant praktinį pavyzdį.
Kaip pridėti radijo mygtuką HTML?
Norėdami pridėti radijo mygtuką HTML, vadovaukitės toliau pateikta sintaksė:
< įvestis tipo = 'radijas' vardas = '' vertė = '' >
Čia yra nurodytos sintaksės aprašymas:
- “ tipo “: šis atributas nurodo, kokio tipo įvestį norite sukurti, pvz., tekstą, radiją, žymimąjį laukelį ir kt. Norint sukurti radijo mygtuką, atributo reikšmė turi būti nustatyta kaip „radio“.
- “ vardas “: apibrėžia įvesties elemento pavadinimą. Šis atributas turėtų būti toks pat radijo mygtukų sąraše.
- “ vertė “: nurodo reikšmę, kuri bus siunčiama į serverį, kai radijo mygtukas pažymėtas kaip pažymėtas.
Pavyzdys: radijo mygtuko pridėjimas HTML
Šiame pavyzdyje bus aptarta radijo mygtuko įtraukimo į HTML procedūra naudojant įvesties radijo mygtuką. Į
1 veiksmas: sukurkite HTML failą
Pirmiausia HTML faile pridėkite žymą
Sukurto
- Pirmiausia pridėkite „ “ žymą, kad suteiktumėte puslapio antraštę.
- Tada ' “ pastraipos arba teksto eilutės žyma.
- Po to įvesties žyma pridedama su atributu ' tipo 'turintis vertę' radijas “, pavadinimas nustatytas kaip pasirinkti ir „ vertė “ kaip „ raudona “. Kiekvienam radijo mygtukui, turinčiam tą patį pavadinimą, suteikiamos skirtingos reikšmės. Tas pats pavadinimas reiškia tą pačią grupę arba sąrašą.
- Jei norite pridėti mygtuką, kuris pagal numatytuosius nustatymus yra pažymėtas kaip pažymėtas, tada priskirkite atributą „ patikrinta “ prie to mygtuko.
- Galiausiai „
“ elementas ant kiekvieno radijo mygtuko naudojamas antraštėms pridėti. Tai taip pat užtikrina geresnį prieinamumą.
Žemiau pateiktas kodas yra aukščiau pateikto scenarijaus aiškinimas:
< h1 > HTML radijo mygtukas h1 >< p > Kokia tavo mėgstamiausia spalva? p >
< įvestis tipo = 'radijas' vardas = 'pasirinkti spalvą' vertė = 'raudona' patikrinta >
< etiketė dėl = 'radijas 1' > Raudona etiketė >
< br >
< įvestis tipo = 'radijas' vardas = 'pasirinkti spalvą' vertė = 'mėlyna' >
< etiketė dėl = 'radijas 1' > Mėlyna etiketė >
< br >
< įvestis tipo = 'radijas' vardas = 'pasirinkti spalvą' vertė = 'žalias' >
< etiketė dėl = 'radijas 1' > Žalias etiketė >
< br >
< įvestis tipo = 'radijas' vardas = 'pasirinkti spalvą' vertė = 'violetinė' >
< etiketė dėl = 'radijas 1' > Violetinė etiketė >
< br >
< įvestis tipo = 'radijas' vardas = 'pasirinkti spalvą' vertė = 'kiti' >
< etiketė dėl = 'radijas 1' > Kiti etiketė >
Matyti, kad radijo mygtukai sukurti sėkmingai:
Taip pat galite pritaikyti stilius aukščiau sukurtam radijo mygtukui vadovaudamiesi toliau nurodytu CSS kodu.
2 veiksmas: stiliaus taikymas HTML
„ div “ nurodo „div“ žymą, kurią sukūrėme HTML faile:
- Pirma, „ fono spalva 'ypatybė nustatyta kaip ' #8197f0 “.
- “ siena 'ypatybė nustatyta kaip ' 5 pikselių taškas #13023a “, kur 5 pikseliai reiškia kraštinės plotį, taškas – linijos tipą, o toliau – kraštinės spalvą.
- “ kamšalas “ yra nustatytas kaip “ 20px 100px “, kur 20 pikselių nurodo užpildymą iš viršaus ir apačios, o 100 pikselių – iš kairės ir dešinės.
- Norėdami sukurti šrifto stilių, priskirkite „ šrifto šeima ' nuosavybės vertė kaip ' kursyvus “.
CSS
div {fono spalva: #8197f0;
kraštinė: 5 pikselių taškinė #13023a;
užpildymas: 20 pikselių 100 pikselių;
šrifto dydis: 20 pikselių;
šriftų šeima: kursyvus;
}
Galima pastebėti, kad div elemento stilius sėkmingai sukurtas:
Viskas! Mes išsamiai paaiškinome apie HTML radijo mygtuką.
Išvada
Radijo mygtukas yra įvestis, kuri visada rodoma dviejų ar daugiau parinkčių grupėmis. Iš šios grupės vartotojas gali pasirinkti tik vieną parinktį. HTML akutę galima sukurti naudojant „ <įvestis> ' žyma, turinti atributo tipą su reikšme ' radijas “. Šis tinklaraštis demonstravo radijo mygtukų įtraukimo į HTML metodą.