Innholdsfortegnelse:
Video: Chapter 9, part 2: Web 2024
Drop-down lister er en vanlig funksjon i nettsider, og HTML5 gjør at de er ganske idiotsikre. Nedtrekkslister lar deg, programmøren, angi et antall valg som besøkende på nettstedet ditt kan gjøre uten å skrive (en liste er vist på figuren). Drop-down lister er spesielt hyggelige fordi de ikke krever mye skjerm fast eiendom - alternativene er bare synlige mens brukeren velger dem.
Drop-down lister har en utrolig verdifull egenskap ved at de forhindrer visse typer feil. De begrensede alternativene gjør svaret svært forutsigbart fordi du forutbestemmer alle mulige svar. Du trenger ikke å håndtere alle de galne tingene brukerne kan skrive inn i en tekstboks.
I HTML5 / XHTML er rullegardinlister opprettet av to typer objekt. Den overordnede strukturen bruker kodene, mens hvert av de mulige valgene har sin egen kode, siden koden for en nettside med en rullegardinliste viser:
formDemo. htmlForm Demo
Velge elementerVelg liste en to tre fire
Valglisten er et ekte kraftverk, så du bør vite hvordan du gjør det:
-
Opprett elementet først.
Beholderen til listen er et element. Hele listen er innkapslet i paret.
-
Gi elementet velg en ID.
Du bruker denne IDen til å referere til elementet i koden.
-
Legg til et alternativ element til valgelementet.
Det hjelper til å angi alternativene for å minne deg på at de er en del av det valgte objektet.
-
Gi hvert alternativ en verdi.
Verdien er svaret sendt til et program når brukeren velger et alternativ. Brukeren vil ikke nødvendigvis se verdien.
-
Angi teksten brukeren vil se mellom og -kodene.
Dette kan være forskjellig fra verdien, eller det samme. (Det vil gjøre mer fornuftig etter at du har gjort noen JavaScript-koding.)
-
Legg til så mange alternativer som du vil.
Lag et nytt alternativobjekt for hvert valg du vil ha tilgjengelig i listen.
Velg bokser har ikke for å få nedtrekksegenskapen. Hvis du vil at boksen skal ta opp mer vertikal plass på siden, bare angi antall rader med størrelsesattributtet.