Tämä artikkeli opastaa sinua luomaan HTML-valintanapin käytännön esimerkin avulla.
Kuinka lisätä valintanappi HTML:ään?
Lisää valintanappi HTML:ään noudattamalla alla olevaa syntaksia:
< syöttö tyyppi = 'radio' nimi = '' arvo = '' >
Tässä on ilmoitetun syntaksin kuvaus:
- ' tyyppi ”: Tämä attribuutti määrittää, minkä tyyppistä syötettä haluat luoda, kuten tekstiä, radiota, valintaruutua ja muuta. Radiopainikkeen luomiseksi määritteen arvoksi on asetettava 'radio'.
- ' nimi ”: Se määrittää syöttöelementin nimen. Tämän määritteen tulee olla sama valintanappiluettelossa.
- ' arvo ”: Tämä määrittää arvon, joka lähetetään palvelimelle, kun valintanappi on merkitty valituksi.
Esimerkki: valintanapin lisääminen HTML:ään
Tässä esimerkissä käsitellään valintanapin lisäämistä HTML:ään käyttämällä syöttövalintanappia. Sisään
Vaihe 1: Luo HTML-tiedosto
Lisää ensin
Luodun
- Lisää ensin ' ” -tunniste antaaksesi sivulle otsikon.
- Sitten eräs ' ” -tunniste kappaleelle tai tekstiriville.
- Tämän jälkeen syöttötunniste lisätään attribuutilla ' tyyppi 'jolla on arvoa' radio , nimeksi asetetaan valinta ja ' arvo ' kuten ' punainen ”. Jokaiselle samannimiselle valintanapille annetaan eri arvot. Sama nimi edustaa samaa ryhmää tai luetteloa.
- Jos haluat lisätä painikkeen, joka on oletusarvoisesti merkitty valituksi, määritä attribuutti ' tarkistettu ' tuohon painikkeeseen.
- Lopuksi '
” -elementtiä jokaisessa valintanapissa käytetään tekstityksen lisäämiseen. Se tarjoaa myös paremman saavutettavuuden.
Alla oleva koodi on tulkinta yllä olevasta skenaariosta:
< h1 > HTML-valintapainike h1 >< s > Mikä on lempivärisi? s >
< syöttö tyyppi = 'radio' nimi = 'valitse väri' arvo = 'punainen' tarkistettu >
< etiketti varten = 'radio1' > Punainen etiketti >
< br >
< syöttö tyyppi = 'radio' nimi = 'valitse väri' arvo = 'sininen' >
< etiketti varten = 'radio1' > Sininen etiketti >
< br >
< syöttö tyyppi = 'radio' nimi = 'valitse väri' arvo = 'vihreä' >
< etiketti varten = 'radio1' > Vihreä etiketti >
< br >
< syöttö tyyppi = 'radio' nimi = 'valitse väri' arvo = 'violetti' >
< etiketti varten = 'radio1' > Violetti etiketti >
< br >
< syöttö tyyppi = 'radio' nimi = 'valitse väri' arvo = 'muut' >
< etiketti varten = 'radio1' > muut etiketti >
Voidaan nähdä, että valintanapit on luotu onnistuneesti:
Voit myös käyttää tyylejä yllä luotuun valintanappulaan seuraamalla alla mainittua CSS-koodia.
Vaihe 2: Käytä tyyliä HTML:ään
' div ” osoittaa div-tunnisteen, jonka olemme luoneet HTML-tiedostoon:
- Ensinnäkin ' taustaväri ' omaisuus on asetettu ' #8197f0 ”.
- ' rajaa ' omaisuus on asetettu ' 5px katkoviiva #13023a ”, jossa 5px edustaa reunuksen leveyttä, pisteviiva osoittaa viivan tyypin ja seuraavaksi reunuksen värin.
- ' pehmuste ' on asetettu ' 20px 100px ”, jossa 20px määrittää täyttöä ylhäältä ja alhaalta ja 100px ilmaisee täyttöä vasemmalta ja oikealta.
- Määritä kirjasintyylille ' font-perhe ' omaisuuden arvo ' kursiivinen ”.
CSS
div {taustaväri: #8197f0;
reunus: 5px katkoviiva #13023a;
täyte: 20px 100px;
fonttikoko: 20px;
font-family: kursiivinen;
}
Voidaan nähdä, että div-elementin tyyli on onnistunut:
Se siitä! Olemme selittäneet yksityiskohtaisesti HTML-valintanapista.
Johtopäätös
Valintanappi on syöte, joka näkyy aina kahden tai useamman vaihtoehdon ryhmissä. Tästä ryhmästä käyttäjä voi valita vain yhden vaihtoehdon. HTML:ssä valintanappi voidaan luoda käyttämällä '