Share
Selv om det er mange endringer til det bedre i HTML5-spesifikasjonen, er det ikke noe bedre for pengene for data-drevet nettsted enn transformasjon av skjemaer. Disse enkle endringene vil forandre hvordan du skriver inn, validerer, behandler og til og med viser innganger. Du vil kunne lage mer brukbare webprogrammer med mindre kode og mindre forvirring.
"I den siste tiden har majoriteten av innovasjon i skjemaer kommet fra bruk av JavaScript, i stedet for gammeldags HTML. Mens det ikke er noe galt med å bruke JavaScript for å forbedre skjemaer, gir det sin egen brukbarhet sammen med mange utviklingshodepine. "
HTML 5 gjennomgår fortsatt endringer før den er ferdig. Hvis du ser på spesifikasjonen, vil du se at det fortsatt er en siste samtale for kommentarer sammen med uttalelser, for eksempel, Implementere bør være oppmerksomme på at denne spesifikasjonen ikke er stabil. Videre, spesielt med hensyn til denne opplæringen, med fokus på endringene i skjemaer, er nettleserimplementasjon sånn å si mildt. Når det er sagt, er endringene i horisonten verdt å undersøke i dag. Mens endringene er store i omfang, ser implementeringen for utviklere ut til å være ganske enkelt. I denne opplæringen tar vi et høyt nivå overblikk over disse banebrytende endringene, og tenk på hvordan de vil påvirke arten av brukerinngang.
Tidligere har endringer i skjemaer vært relativt små. Hvis du går tilbake til HTML 3.2-spesifikasjonen, som ble avsluttet i 1997, vil du se de samme grunnleggende forminngangene du bruker i dag. Velg, textarea, radio, boksene og teksten var tilgjengelige da. En generasjon av webutviklere har vokst opp med å skrive til de samme standardene. Mens nyere versjoner av spesifikasjonen førte til endringer i skjemaer, for eksempel feltsett, etikett, legenden og form handlinger som onsubmit eller onchange, har måten vi håndterer med brukerinngang, forblitt noe statisk. I den siste tiden har majoriteten av innovasjon i skjemaer kommet fra bruk av JavaScript, i stedet for gammeldags HTML. Mens det ikke er noe galt med å bruke JavaScript for å forbedre skjemaer, bringer det sin egen brukervennlighet sammen med mange utviklingshodepine. For eksempel er det mange forskjellige måter vi kan validere skjemaer ved hjelp av JavaScript, men hva skjer når en bruker ikke har JavaScript aktivert? Vi må videre bruke logikk til våre server side skript. Til slutt har vi en ikke så konsekvent måte å håndtere brukerinngang på. HTML 5 tar ikke opp alle innovasjonshodepine for skjemaer de siste 13 årene, men det gir oss mange verktøy til
gjør jobben mye enklere, og lar oss produsere mye mer konsistente former.
Det er tre grunnleggende endringer som vi bør undersøke. Først vil vi se på endringene til inngangselementene, for eksempel autofullføring eller autofokus. Den andre er endringer i inngangsstatusene, og det er ganske mange! Til slutt vil vi undersøke de nye formelementene. Det er viktig å restate at spesifikasjonen er i flux; så jeg ville ikke bli overrasket om det i fremtiden er subtile endringer i det vi diskuterer. Det er det som gjør dette morsomt!
Input attributter er de elementene du plasserer i innganger for å forklare hva inngangen gjør. For eksempel:
I eksemplet ovenfor er inngangsattributtene verdi, størrelse og makslengde. Disse har eksistert lenge. HTML 5 endrer ikke konseptet med å ha innspillingselementer, men legger ganske mange til. Det ser ut til å være minst en subtraksjon, eller heller substitusjon, og det er endringen av funksjonshemmede ser nå ut til å bli readonly. Spesifikasjonen går ikke i detalj for endringen, men hvis jeg var en spillmann, ville endringen tillate hendelseshåndterere, for eksempel onblur, å brenne - hvilket et deaktivert element forhindrer.
De nye attributter inkluderer autofokus, autofullføring, liste, nødvendig, flere, mønster, min og maks, trinn og plassholder. Jeg tenker på disse som to forskjellige smaker av elementer. Den første smaken øker opplevelsen for brukeren, mens den andre forbedrer utviklingsopplevelsen. Hva jeg mener med dette, er autofokus, autofullføring, liste, flere og plassholder hjelper brukeropplevelsen ved å velge elementer, eller kanskje ved å gi en beskrivelse av hva skjemainngangen ser etter eller ved hjelp av å fylle ut skjemaet. kreves, min og maks, mønster og trinn legger til utviklingsopplevelsen ved å si hva som skal være i selve skjemaet.
Hva hver av disse nye egenskapene gjør er relativt lett å forstå. For eksempel:
Ovenfor fokuserer autofokuselementet tekstinngangen på sidebelastning. Dette betyr at så snart siden lastes, er denne tekstinngangen klar til å ta en oppføring. Du kan begynne å skrive med en gang, da dette elementet har fokus på dokumentet. Noe som vi pleide å gjøre i JavaScript i en linje eller så, kan nå gjøres med et enkelt ord.
I eksempelet ovenfor, ved å slå av autofullføring, holder du nettleseren fra å fylle ut skjemafeltet fra en tidligere verdi. Ingenting bugs meg mer enn å se kredittkortnummeret mitt komme opp i et skjema så snart jeg skriver inn et siffer. Standard for autofullføring skal være på, så den eneste gangen du trenger å bruke dette elementet, er når du vil forhindre skjemafelt fra å fullføre fra tidligere oppføringer. Det legger til brukeropplevelsen ved å holde sensitiv informasjon fra bare "popping up".
Listattributtet er veldig kult. I hovedsak gir du en datalist, og det vil opprette en nedgang fra tekstinngangen. Tenk på det som en naturlig auto fullført. Ta det litt videre, og i stedet for å legge til et JavaScript-bibliotek for en rask oppslag, basert på viktige oppføringer, kan du enkelt legge til en "onchange" hendelseshandler med et AJAX-innlegg, og du ender med en dråpe nede det blir mer spesifikt når brukeren skriver inn i boksen. Med HTML 5, blir denne funksjonaliteten en opprettet med bare noen få linjer.
Med flere attributter kan du velge flere elementer fra datalisten din. For eksempel kan du ha et skjema som sender meldinger fra nettstedet ditt. Ved å bruke det flere elementet, kan du tillate brukeren å velge flere mottakere for å sende denne meldingen. Igjen, dette er noe vi kan oppnå med litt JavaScript nå, men med HTML 5, må vi bare legge til en enkelt kommando i skjemaet.
Stedholderattributtet er noe vi har gjort i årevis med et snev av JavaScript. Hva dette gjør er, så snart inntastingen er fokusert, vil Type Her forsvinne. Hvis det ikke var noen endring i teksten på uskarphet, vises Typ her her. Igjen tar vi litt JavaScript ut av bildet for å forbedre brukeropplevelsen.
Disse neste nye attributter forbedrer hele vår utvikling. Med unntak av "trinn", er hver hjelpemiddel i valideringen av brukerinngangen.
Den nødvendige attributtet er akkurat som det høres ut. Jeg, utvikleren av denne nettsiden, krever at du fyller ut dette skjemaet før du trykker på send. Dette er grunnleggende form validering som vi bruker i dag med JavaScript. Hva tok biblioteket før for å legge til en ønsket oppføring, tar nå et enkelt ord i skjemaet.
Av alle de nye formattributtene er dette det jeg er mest spent på. Herr Form, la meg introdusere deg til min gode venn, Regex. Det er riktig, vi kan validere skjemaoppføringer basert på regulære uttrykk. Mens denne skal bli mystifying i begynnelsen, som du lærer vanlig uttrykk, blir mulighetene for validering nå ubegrensede.
Jeg har klumpet de siste tre i ett eksempel, da de alle handler om nummervalidering - eller rekkevidden av tall som vi kan inkludere.
Hver av disse handler om numeriske verdier. Ikke forveksle dem med maksimal lengde, som omhandler antall tegn et innspill vil ta. Trinnelementet er akkurat som det høres ut. Når du velger en tallverdi, trinn opp med .5 eller nede med .5 - som betyr denne inntypen, vil ha mulige verdier på 1, 1,5, 2, 2,5 og så videre.
Fra nå av, til beste jeg vet, er nettleserstøtte litt spotty på disse egenskapene. Heres et raskt diagram som viser hva jeg kunne finne på implementeringene.
Det er åtte nye inntastetyper, som ikke teller alle de nye dato- og klokketyper, som for vår hensikt lommer jeg i en. Det er viktig å merke seg at nettleserne som ikke har implementert de nye inngangstypene, vil nedbrytes til en type tekst på hver jeg har testet. Hva de nye inntastningstypene gir, er en mulighet til å validere brukerinngang basert på typen du bruker. Det er også mer validering å komme som jeg vil diskutere i de neste to seksjonene. Hver av de nye inngangstypene tillater oss å skille fra et tekstfelt til noe mer spesifikt. For eksempel, for å ta integer- eller flyteverdier før HTML 5, brukte vi for det meste en innmatetype tekst. Bare fra annotasjonen er det motstridende intuitivt for nybegynnere. Ved å være mer spesifikk har vi bedre visuell kontroll over grensesnittet vårt, jo mer spesifikt elementet i HTML, jo større kontroll har du fra CSS, og jo lettere er det å definere de visuelle elementene. I tillegg, med de nye spesifikke inngangstypene, kan nettlesere nå finjustere hva innspillet skal være. Til slutt, med fremkomsten av mobil databehandling, er vi i stand til å lage webapplikasjonsskjemaelementer som kan utformes for å se ut som naturlige applikasjoner, eller kan forme tastaturet som vi bruker.
La oss se på nummerhåndtering først:
Hver av disse inngangstypene tillater oss å spille med tall, og når vi legger inn skjemaene, bør vi være sikre på at vi har disse flytverdier for vår server sidebehandling uten den ekstra JavaScript-validering. Enkelt sagt, for hver av disse typene, forventer vi å få numre tilbake innenfor det området som vi definerer og med det trinnet vi ønsker. Forskjellen mellom de to typene er hvordan de vises. Mens jeg venter på å se implementering på nummertypen, forventer jeg enten et rulle eller en tekstboks, eller muligens en type en velg med tall. Typetypen er litt annerledes, ettersom det ser ut som en glidende verdi, ligner på hva du forventer å se for en volumkontroll.
En annen stor lettelse for å standardisere backend-utviklingen er den nye dato og klokkeslettingstypene. Fra Opera-implementeringen som jeg har sett, viser hver kalenderkalenderen, som lar brukeren velge en dato. Igjen kan vi validere på vår nettside at inngangen er i det formatet vi forventer. Hver gjør akkurat hva du vil tenke; du velger en måned, uke, dag eller tid. Den som er litt annerledes er datetime-lokal, som viser dato og klokkeslett uten tidszoneforskyvning. For eksempel, hvis du velger et fly, vil datetime-lokal vise tid og dato i byen du går, noe som ikke nødvendigvis er tidszonen du er inne i.
Hver av disse inngangstypene er beskrivende. Nettadressene og e-posttyper begge har valideringer av gyldige urlmønstre og gyldige e-postmønstre. Telefonen samsvarer imidlertid ikke med noe bestemt mønster. Det striper bare linjeskift. Hvis du vil håndheve et valideringsmønster i telefonfeltet, kan du alltid bruke mønsterelementet. Hvert av disse elementene minus farge vil også ta listetributtet minus farge. Farge er oddball av gjengen; Jeg kan se den praktiske bruken der du kan velge en farge fra en fancy dra ned som viser farger og håndheve tekstoppføringen på noe som # 000000, men det passer egentlig ikke til resten av endringene, etter min mening. Det er som å spille hvilken som ikke er som de andre.
Som attributter, er implementering av nettleserens nettleser ganske spotty. Min iPhone ser ut til å støtte flere av disse enn Safari, noe som er litt morsomt for meg. Dette er det beste jeg kunne finne, som å støtte.
Antall endringer i formelementene er ikke så drastiske som innskrivningsattributter og -typer. Når det er sagt, er det noen få nye elementer å være klar over. Vi har allerede dekket datalisten - det er hvordan vi definerer hva som skal velges fra en listeelementanrop - men vi har ikke sett keygen, output, progress eller meter. Utenfor keygen. Disse er ikke helt like selvforklarende som de nye egenskapene. Lar deg grave inn i disse bare litt.
Denne er litt forvirrende. Det genererer ikke en offentlig nøkkel for deg. I stedet er det en nøkkelpar generator kontroll. Når skjemaet er sendt, pakker det nøkkelparet for å lagre den private nøkkelen i den lokale nøkkelbutikken, og sender den offentlige nøkkelen tilbake til serveren. Det vil generere kundesertifikatet og tilby det tilbake til brukeren for å laste ned. Når du er lastet ned og lagret med den private nøkkelen, kan du autentisere tjenester, for eksempel SSL eller sertifikatautentisering.
+ =
Tenk på utgangselementet som et tekstområde på steroider. Hva du kan gjøre er å beregne fra to taletypeinnganger og utdata den beregningen uten å sende skjemaet tilbake til serveren. Hvis du bare returnerer falsk onsubmit, i eksempelet ovenfor, vil det beregne number_1 pluss number_2, og gi deg svaret. Som mange ting diskutert i denne opplæringen, er dette noe vi kan oppnå i dag med JavaScript, men dette reduserer virkelig mengden kode som vi trenger å skrive i fremtiden.
12cm
De to siste nye elementene er fremdrift og meter. De er like, men med en forskjell. Fremgang er ment å brukes til å måle fremdriften av en bestemt oppgave. Hvis du for eksempel har fem sider til å fullføre før en undersøkelse er gjort, vil du vise fremdriftselementet i dette området. Måleren, derimot, er en måling av noe. Du vil kanskje vise den gjenværende diskplassen en bruker har forlatt. Du vil bruke måleren til å vise denne måling. Det er nye grenseelementer, som lav, høy og optimal. Disse erstatter min eller maks elementene; så hvis de overgår dem, blir de nye nedre og øvre grenser for skjemaet.
Som resten av HTML 5-skjemaendringene, er nettleserimplementasjonen for øyeblikket dårlig. Heres hva som synes å virke, og hva gjør det ikke (på tidspunktet for denne skrivingen).
Fra det jeg ser, er det ingen grunn til ikke å begynne å bruke HTML 5-skjemaer. Inngangselementene og -typerne nedbrytes pent, selv i IE6, der de enten ignoreres som elementer, eller forringes til tekstinnganger. Vi må vente en stund for at valideringsattributtene skal bli virkelighet, men med det er det fortsatt noen bruksområder i dag uten disse fordelene. For eksempel, iPhone endrer tastaturet hvis du bruker url, e-post eller talltyper. Range-inntastetypen støttes allerede i WebKit-nettlesere, slik at du kan være den første gutten i blokken med en glidebryter som fungerer uten JavaScript. Spesifikasjonen er raskt ferdigstillende, og nettleserne kommer raskt inn i paradigmeskiftet. Det er ingen tid som nåtiden for å begynne å spille med disse nye lekene! Hva tror du?
Accentsconagua