Gagabayan ka ng artikulong ito sa paggawa ng HTML radio button sa tulong ng praktikal na halimbawa.
Paano magdagdag ng isang Radio Button sa HTML?
Upang magdagdag ng radio button sa HTML, sundin ang ibinigay na syntax sa ibaba:
< input uri = 'radyo' pangalan = '' halaga = '' >
Narito ang paglalarawan ng nakasaad na syntax:
- “ uri ”: Tinutukoy ng attribute na ito kung aling uri ng input ang gusto mong gawin gaya ng text, radyo, checkbox, at higit pa. Para gumawa ng radio button, dapat itakda ang attribute value bilang “radio”.
- “ pangalan ”: Tinutukoy nito ang pangalan ng elemento ng input. Ang katangiang ito ay dapat na pareho para sa listahan ng mga radio button.
- “ halaga ”: Tinutukoy nito ang halaga na ipapadala sa server kapag ang radio button ay minarkahan bilang naka-check.
Halimbawa: Pagdaragdag ng Radio Button sa HTML
Tatalakayin ng halimbawang ito ang pamamaraan ng pagdaragdag ng radio button sa HTML gamit ang input radio button. Sa
Hakbang 1: Paglikha ng HTML File
Una, magdagdag ng
Sa loob ng nilikha
- Una, idagdag ang ' ” tag para magbigay ng heading sa page.
- Pagkatapos, isang ' ” tag para sa isang talata o linya ng teksto.
- Pagkatapos nito, idinagdag ang input tag na may attribute na ' uri 'may halaga' radyo ”, ang pangalan ay itinakda bilang pili, at “ halaga 'bilang' pula ”. Iba't ibang halaga ang ibinibigay sa bawat radio button na may parehong pangalan. Ang parehong pangalan ay kumakatawan sa parehong grupo o listahan.
- Kung gusto mong magdagdag ng isang button na sa pamamagitan ng default ay minarkahan bilang naka-check, pagkatapos ay italaga ang attribute na ' sinuri ” sa button na iyon.
- Panghuli, ang ' ” elemento sa bawat radio button ay ginagamit upang magdagdag ng mga caption. Nagbibigay din ito ng mas mahusay na accessibility.
Ang code sa ibaba ay ang interpretasyon ng senaryo sa itaas:
< h1 > HTML Radio Button h1 >< p > Ano ang paborito mong kulay? p >
< input uri = 'radyo' pangalan = 'selectcolor' halaga = 'pula' sinuri >
< label para sa = 'radio1' > Pula label >
< br >
< input uri = 'radyo' pangalan = 'selectcolor' halaga = 'bughaw' >
< label para sa = 'radio1' > Bughaw label >
< br >
< input uri = 'radyo' pangalan = 'selectcolor' halaga = 'berde' >
< label para sa = 'radio1' > Berde label >
< br >
< input uri = 'radyo' pangalan = 'selectcolor' halaga = 'purple' >
< label para sa = 'radio1' > Lila label >
< br >
< input uri = 'radyo' pangalan = 'selectcolor' halaga = 'iba' >
< label para sa = 'radio1' > Ang iba label >
Makikita na matagumpay na nalikha ang mga radio button:
Maaari ka ring maglapat ng mga istilo sa ginawang radio button sa itaas sa pamamagitan ng pagsunod sa nabanggit na CSS code sa ibaba.
Hakbang 2: Paglalapat ng Estilo sa HTML
Ang ' div ” ay nagpapahiwatig ng div tag na ginawa namin sa HTML file:
- Una, ang ' kulay ng background 'Ang ari-arian ay itinakda bilang ' #8197f0 ”.
- “ hangganan 'Ang ari-arian ay itinakda bilang ' 5px na may tuldok #13023a ”, kung saan ang 5px ay kumakatawan sa lapad ng hangganan, ang may tuldok ay nagpapahiwatig ng uri ng linya, at ang susunod ay nagpapahiwatig ng kulay ng hangganan.
- “ padding ' ay nakatakda bilang ' 20px 100px ” kung saan ang 20px ay tumutukoy sa padding mula sa itaas at sa ibaba at ang 100px ay nagpapahiwatig ng padding mula sa kaliwa at kanan.
- Para sa pag-istilo ng font, italaga ang “ font-family 'halaga ng ari-arian bilang ' cursive ”.
CSS
div {kulay ng background: #8197f0;
hangganan: 5px na may tuldok #13023a;
padding: 20px 100px;
laki ng font: 20px;
font-family: cursive;
}
Makikita na matagumpay na na-istilo ang elemento ng div:
Ayan yun! Ipinaliwanag namin nang detalyado ang tungkol sa HTML radio button.
Konklusyon
Ang radio button ay isang input na palaging lumalabas sa mga grupo ng dalawa o higit pang mga opsyon. Mula sa pangkat na ito, ang user ay maaari lamang pumili ng isang opsyon. Sa HTML, maaaring gumawa ng radio button gamit ang “ 'tag na may uri ng katangian na may halaga ' radyo ”. Ipinakita ng blog na ito ang paraan para sa pagdaragdag ng mga radio button sa HTML.