Nye Form Inputtyper i HTML5 - Dummies

HTML-skjema er sentrert rundt det ydmyke, men fleksible innspillingselementet. HTML5 legger til en rekke svært nyttige former for innspill som bidrar til å gjøre HTML til et mer moderne brukergrensesnittverktøy.

Selv om støtte for disse kodene ikke er universell, er det trygt å begynne å bruke dem nå. Enhver nettleser (selv IE6) som ikke forstår de avanserte inntastene, går tilbake til inntastetype = "tekst", som fortsatt vil fungere nøyaktig som forventet (men ikke med validering og brukergrensesnittforbedringer av nyere koder).

Standarden indikerer at ulike typer støttes, men den nøyaktige måten elementene støttes på, kan variere fra nettleser til nettleser. E-postfeltet kan for eksempel se ut som et vanlig tekstfelt til en bruker på en vanlig stasjonær datamaskin, men det virtuelle tastaturet på en mobilenhet kan endres for å inkludere @ når den møter et e-postfelt.

De fleste av disse spesialfeltene støtter validering, så det er i det minste nyttig å sette en: ugyldig CSS-stil slik at brukeren kan fortelle om dataene er i feltet. Her er inntastetyper med prøvekoding:

• farge : Lar brukeren velge en farge ved hjelp av standard webformater - gjenkjente fargenavn (gul) og hex-verdier foran et # -symbol (# FF0033).

• dato : Noen nettlesere (Firefox 3, 5) viser et tekstfelt, andre (Opera 10) viser en spesiell kalenderkontroll, men andre nettlesere (Chrome) inneholder både tekst og en popupkalender. Hvis datoen er oppgitt med tekst, må den angis i et yyyy-mm-dd-format:

  Du kan begrense datoene som er tillatt til et bestemt område ved å bruke min og maks attributter til elementet.

• tid : Tiden lagres i hh: mm-format. Enkelte nettlesere inkluderer et kolon direkte i feltet, og noen endrer det virtuelle tastaturet med tall og kolon karakteren. Det er også mulig at en nettleser dukker opp en slags tilpasset tidsvelger, men dette støttes ennå ikke i noen større nettlesere.

• datetime : Kombinerer dato og tid til et enkelt element. Den inneholder også en mekanisme for å gå inn i tidszonen.

  Noen nettlesere oppdager en kalenderkontroll for datoen og en formatert inngang for tiden. Andre kan endre virtuelle tastaturer for dato og klokkeslettinngang.

  Det offisielle fulle datoen og tidsformatet returneres fra de ulike dato og klokkeslettelementene er en spesialkode: yyyy-mm-ddThh: mm + ff: gg:

  • yyyy : Fire sifre for år.

  • - : En faktisk dash karakter, som må plasseres mellom år og måned.Et annet dash er plassert mellom måneden og dagen.

  • mm : To sifre for måneden.

  • dd : To sifre for dagen.

  • T : Hovedstaden T angir begynnelsen av tidspunktet for koden.

  • hh : To sifre for timen, i 24-timers format.

  • : : Karbonkarakteren mellom timen og minuttene. En annen kolon vises mellom time og minutter av tidszonen offset.

  • mm : To sifre for minuttene.

  • + / - / Z : Tidssoneforskyvningen er indikert med en hovedstad Z (hvis tiden er Zulu eller GMT tid) eller + eller - symbolet hvis tiden er i en annen tidssone.

  • ff : Hvis tidszonen ikke er zulu-tid, angi antall timerforskyvning fra GMT.

  • gg : Antall minutter offset fra Zulu-tiden. Vanligvis er dette 00, men det er mulig at tidszonen blir kompensert med 15, 30 eller 45 minutter.

  For eksempel, klokka 17:30, 11. oktober 2011, ser det slik ut i New York City:

  2011-10-11T17: 30-05: 00
  

  Dato og klokkeslett må være i dette format for å bli vurdert som gyldig for nettlesere som validerer et dateTime-felt.

• datetime-local : På samme måte som datetimeelementet uten tidszonesindikator:

• e-post : Dette ser ut som et vanlig tekstfelt, men det kan endres i henhold til hvordan det er åpnet

• måned : Dette genererer et firesifret år etterfulgt av en tosifret måned:

• tall : Numeriske data kan bestå av et tekstfelt etterfulgt av en slags velg (for eksempel opp- og nedpiler), eller denne taggen kan endre det virtuelle tastaturet til en bærbar enhet for å håndtere bare numerisk inngang.

  Nummerinnmatningstypen støtter flere spesielle attributter:

  • min : Minimumsverdi tillatt.

  • max : Maksimum tillatt verdi.

  • trinn : Denne verdien angir hvor mye verktøyene for visuelle grensesnitt (vanligvis små opp- og nedpiler) endrer verdien når den aktiveres.

  • verdi : Elementets numeriske verdi.

  Alle attributter til tallelementet kan være heltall eller flytpunkt. Men nåværende nettlesere som støtter denne taggen (Opera og Chrome) synes ikke å validere også med flytende punktverdier som de gjør med heltallverdier. For mer kontroll over numerisk inngang, vurder rekkevidden inngangstype.

• rekkevidde : De fleste brukergrensesnittverktøyene har en slags glidebryter eller rullebøylemekanisme, noe som gjør det enkelt for brukere å angi en numerisk verdi visuelt. Konstruksjonen legger til slutt denne funksjonaliteten til HTML-skjemaer.

  Retningsinngangen tar de samme attributter som tall, min, maks, verdi og trinn. Hvis nettleseren støtter intervalletiketten, vil brukeren se en scroller; Hvis ikke, vises en vanlig teksttype.

  Typetypen viser ikke den eksakte verdien, og det kan være vanskeligere å få presise resultater enn med nummeringstypen. En løsning er å koble en utdatamerker til rekkevidden, og bruk JavaScript for å oppdatere utdata når rekkevidden endres.Et eksempel skjema som inkorporerer denne ideen:

  128
  

  Når rekkeviddesverdien endres, kaller den en JavaScript-funksjon kalt updateOutput:

  funksjonoppdateringOutput () {// få elementer var myRange = dokument. getElementById ("myRange"); var myOutput = dokument. getElementById ("myOutput"); // kopier verdien over myOutput. verdi = myRange. verdi;} // sluttfunksjon
  

  Som nummerinngangstypen kan rekkevidden gis flytende punktverdier hvis du vil.

• søk : Brukes til å hente tekst som skal brukes som en del av et søk (internt eller gjennom en søketjeneste). På de fleste nettlesere vises denne taggen som et vanlig tekstfelt. Det har noen ganger spesiell oppførsel. På Safari vises søkefeltet med et lite x , som fjerner innholdet i søket. På Chrome blir autofullføringsfunksjonene i hoved søkefeltet (som også er URL-elementet i Chrome) automatisk brukt i søkeboksen.

  Som de andre nye inngangstypene, er det ingen straff for bruk av søkeelementet i nettlesere som ikke støtter det. Fallback er en vanlig tekstinngang.

  Søkeelementet gjør faktisk ikke noe søk. For å gjøre det funksjonelt, må du skrive noen kode.

• tel : Dette feltet forventer tre sifre etterfulgt av et dash og fire sifre - et lokalt telefonnummer. Du må kanskje spille med mønsterattributtet hvis du vil tillate en retningsnummer eller utvidelser som skal validere.

• url : Nettlesere som støtter dette elementet, vil sjekke // prefiks for en webadresse. Mobilbrowsere kan også tilpasse det virtuelle tastaturet for å inkludere tegn som ofte finnes i nettadresser: kolon (:), foroverstreke (/) og tilde (~).

• uke : Lar brukeren velge en uke fra en kalenderkontroll. Den returnerer en verdi i følgende format: yyyy-Wnn

  • yyyy : Representerer et firesifret år.

  • - : Strekordet.

  • W : Karakteren W .

  • nn : Uken som et tosifret tall.

  Noen nettlesere dukker opp standard kalenderkontroll. Når brukeren velger en dato (eller en uke), vil bare år og uke bli returnert. Andre nettlesere kan bare validere for riktig format.