Hvordan lage en radioknapp i en HTML5 Form

August 27  by Eliza

For å inkludere radioknappene på nettsiden din HTML5, hjelper det å vite hva de er og hvordan du bruker dem. På overflaten, radioknapper synes mye som boksene, men de er forskjellige på en rekke viktige måter:

  • Radioknapper forekommer bare i grupper. Du kan ha en avkrysnings på et skjema, men radioknapper fornuftig bare når den plasseres i grupper.
  • Bare ett element kan velges. Velge en radio knapp opphever valget de andre. Det er som en bilradio, hvor klikke på en av forhåndsinnstillingsknappene opphever valget de andre. (Det er virkelig liker de gamle bilradioer der hvis knappen for den valgte stasjonen ble fysisk presset på, ville de andre knappene sprette ut. Selv om den type radio er for lengst borte, navnet lever videre.)
  • Id av alternativknappene er unik. Hver id på en webside må være unikt, og id elementer av hver radioknappen følger disse reglene.
  • Hver radio element har også et navn attributt. Navnet attributtet brukes til å oppgi hele gruppen av radio stedene.
  • Alle radioknappene i en gruppe har samme navn. HTML bruker navnet attributtet for å finne ut hvilken gruppe en radio knappen er i, og for å sikre at bare én knapp i en gruppe er valgt.

Denne figuren viser et skjema som inneholder en gruppe av radioknapper for å velge Small, Medium eller Large:

Hvordan lage en radioknapp i en HTML5 Form

Se følgende kode for å se oppsettet for en nettside med knapper:

<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Form Demo </ h1>
<Form>
<Fieldset>
<Legend> Velge elementer </ legend>
<P>
<Label> Alternativknapper </ label>
<Input type = "radio"
name = "radSize"
id = "sizeSmall"
value = "liten"
sjekket = "sjekket" />
<Label for = "sizeSmall"> liten </ label>

<Input type = "radio"
name = "radSize"
id = "sizeMed"
value = "medium" />
<Label for = "sizeMed"> medium </ label>

<Input type = "radio"
name = "radSize"
id = "sizeLarge"
value = "stor" />
<Label for = "sizeLarge"> stor </ label>
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Å bygge en gruppe med alternativknapper, gjør du følgende:

  1. Begynn med å lage en inngang element for å tjene som den grunnleggende fundament.
  2. Angi typen til radio.
  3. Gi hver alternativknappen en unik id.
  4. Bruk navnet attributt for å identifisere alle knappene i en gruppe.
  5. Vurdere visuell gruppering også.

    Brukeren vil ikke være i stand til å fortelle hvilke knapper er en del av en gruppe av HTML formatering alene. Du kan bruke feltsett eller andre formaterings triks for å hjelpe brukeren vet hvilke knapper er i hvilken gruppe. Alle knappene i en gruppe bør være fysisk i nærheten av hverandre.

  6. Gjør en av knappene sjekket (valgt) som standard.

    Påfør sjekket = "sjekket" attributt (gitt av Institutt for redundans avdeling) til en av de elementene slik at det vil starte kontrollert.

    Hvis du ikke forhåndsvelge en radio-knappen, vil alle programmer som er knyttet til formen din blir forvirret.