Understøttelse af HTML5-mobilformularer og HTML-inputtyper. Medtag kun de vigtigste detaljer i din formular.
denne artikel er en meddelelse om ny funktionalitet.
Det anbefales ikke at bruge indholdet af denne artikel til at lære ny funktionalitet.
Fuld beskrivelse ny funktionalitet vil blive leveret i dokumentationen for den tilsvarende version.
Fuld listeændringer i ny version findes i filen v8Update.htm.
Implementeret i version 8.3.11.2867.
Vi fortsætter med at udvikle den mobile platform og tilføjer funktionalitet, der allerede er tilgængelig i platformen til personlige computere. Derudover udvikler vi specifikke platformsfunktioner, som kun er relevante for mobile enheder. Vi vil nu fortælle dig om nogle af de vigtigste forbedringer.
Planlægger
Objektmodellen for den "mobile" planlægger har ikke ændret sig, men den måde, brugeren interagerer med planlæggeren på, har ændret sig, da metoderne til at indtaste oplysninger på mobile enheder adskiller sig fra dem, der bruges på stationære computere.
For eksempel udføres hurtig redigering af et element ved et enkelt klik på elementet. Langt tryk på opkald kontekstmenu, og til udseendet af markører, der giver dig mulighed for at strække elementet. Træk udføres ved at trykke længe og derefter flytte fingeren.
Rulning af hele planlæggeren sker ved at scrolle med én finger, zoome med to fingre og så videre.
Et træk ved den nuværende implementering af den "mobile" planlægger er, at den endnu ikke understøtter udskrivning.
Formateret dokument
Et andet "nyt" objekt, som vi har tilføjet til den mobile platform er Formateret Dokument. Fra brugerens synspunkt adskiller et "mobil" formateret dokument sig kun ved, at dets redigeringspanel er indbygget i selve styringen og er en logisk del virtuelt tastatur. Du, som udviklere, er ikke forpligtet til at tilføje det separat til konfigurationen. Redigeringspanelet har anden type afhængigt af typen af mobilenhed (telefon eller tablet).
Forhåndsvisning af "mobil"-formularen i konfiguratoren
I konfiguratoren, når vi udviklede en formular, tilføjede vi muligheden for at se, hvordan din formular vil se ud på en mobilenhed.
I kommandopanelet kan du vælge en grænsefladeindstilling Mobil enhed, og se, hvordan formularen vil se ud i standardretning.
Her kan du rotere din mobile enhed.
Derudover har vi givet dig muligheden for at vælge imellem stort antal almindelige enheder.
Derudover kan du se mobile formularer i tre forskellige skalaer:
- Pixel til pixel- når en mobilenheds skærmpixel svarer til en vinduesskærmpixel forhåndsvisning;
- Aktuel størrelse - når størrelsen af mobilenheden på skærmen matcher geometriske dimensioner enheder;
- Efter vinduesstørrelse- når visningsskalaen er valgt på en sådan måde, at det "mobile" visningsområde passer ind i forhåndsvisningsvinduet uden at rulle.
Batchbehandling af regnearksdokumenter
Vi har tilføjet en række nye objekter til den mobile platform, der giver dig mulighed for at oprette pakker med viste dokumenter. Denne funktionalitet ligner den, der findes i pc-platformen. Således kan du nu for eksempel sende flere dokumenter til udskrivning på én gang.
Udvikling af leverbare notifikationer
Vi har implementeret support til Windows push notifikationstjenesten (WNS, Windows Notification Services). Nu kan du bruge funktionaliteten af leverede meddelelser, når du kører en mobilapplikation på platforme i Windows-familien.
Vi har også omarbejdet fejlhåndteringssystemet til afsendelse af leverede meddelelser. I situationer, hvor en fejl tidligere blev kastet som en undtagelse, kastes den nu som en værdi, som du kan håndtere i det indbyggede sprog.
Hardwareacceleration i Android-operativsystemet
På driftsversioner Android systemer 4.4.2 og højere mobil platform bruger nu hardwareacceleration. Dette gjorde det muligt for os at øge grænsefladegengivelseshastigheden med 1,5 - 3 gange.
I denne artikel tager vi et kig på nogle af de nye formularforbedringer i HTML5 og analyserer, hvordan de hjælper med at forbedre brugergrænseflade på mobilen. Vi vil især se, hvordan formularer kan udvides med de ekstra inputtyper, som HTML5 tilbyder, og vise, hvad du kan forvente af forskellige mobilbrowsere.
HTML5-inputtyper
HTML5 har en masse nye inputtyper til formularer. Disse typer input giver mulighed for større kontrol og verifikation af inputdata. Nogle af dem er især nyttige til mobile brugere som ofte har svært ved HTML arbejde Input. Den komplette liste over inputdatatyper er givet nedenfor:
- farve — farvevalg
- dato — valg af dato
- datetime - vælg dato og tid
- e-mail — e-mail-maskevalidering
- nummer - indtast nummer
- range — range skyder
- søg - søgefelt
- tel — telefonmaskevalidering
- tid - timing
- url - URL-validering
Selvfølgelig er denne liste ikke komplet. Dette inkluderer ikke typer, der er accepteret af standarden, men deres essens er endnu ikke klar. Vi vil overveje de mest populære og relevante af ovenstående typer i denne artikel med eksempler.
1. Input type farve
Hvis denne inputtype understøttes, vil brugerens browser kalde den indbyggede farvevælger til klientenhed. Den valgte farve vil blive præsenteret i den tilsvarende hexadecimal værdi RGB.
< input type = "color" / > |
Eksempel på arbejde:
Stilen på pop op-vinduet afhænger af din browser. Klik på knappen for at se, hvordan det fungerer.
Vælg din farve:
Desværre, support af denne type mobile browsere lader meget tilbage at ønske. Af alle de eksisterende kan den korrekte kortlægning kun findes i Opera mobil Og Chrome Android. For alle andre browsere vil et tomt tekstfelt blive vist. Dette er værd at huske på. Alternativt kan du skitsere paletten i JS eller bruge plugins.
2. Indtast dato
Hvis det understøttes af browseren, giver det en praktisk blok til at vælge en dato.
< input type = "date" / > |
Eksempel på arbejde:
Valg af dato:
Bemærk, at datoindtastningstypen såvel som dato- og datotids-lokaltypen tilbyder nyttige attributter, værdier som min og maks., der kan sætte grænser og validering af brugerinput. Det vil vi demonstrere nedenfor i teksten.
HTML-inputdatotypen understøttes af næsten alle browsere. Undtagelserne er Opera Mini og standard Android-browseren.
3. Indtastningstype datetime og datetime-local
Det her Input type giver brugeren mulighed for at angive dato og klokkeslæt i et praktisk format. Hvis det understøttes, vil det blive vist som en indbygget dato/tids-widget på enheden. Forskellen mellem disse inputtyper er, at den første er bundet til verdenstid, og den anden indeholder ingen tidszoneinformation.
< input type = "datetime-local" / > |
Eksempel på arbejde:
Vælg dato og klokkeslæt:
Ikke understøttet i IE Mobile og Opera Mini. På andre populære browsere (mobil) fungerer typen mere eller mindre korrekt, men tilfælde af fejl og fejl er ikke ualmindeligt. Husk også dette, og glem ikke JavaScript fallbacks.
4. Indtast e-mail
Denne type kræver ingen repræsentation. Mange mennesker bruger det allerede, og det understøttes af næsten alle browsere.
< input type = "email" / > |
Eksempel på arbejde:
Indtast din e-mailadresse:
Inden afsendelsen kontrollerer browseren rigtigheden af det udfyldte felt og informerer brugeren, hvis inputformatet er ugyldigt. Beregningen er baseret på følgende udtryk (tekst)@(domæne)
5. Indtast typenummer og tlf
Dette er en anden type, der ikke kræver meget diskussion. Men i et mobilt miljø er det meget nyttigt værktøj. Brug det i tilfælde, hvor brugeren præsenteres for et sæt med kun tal. I denne situation vil han blive tilbudt brugervenlig grænseflade numerisk tastatur.
Eksempel på arbejde:
Vælg værdi:
Standardområdet i de fleste browsere er mellem 0 og 100. Det vil sige, at skyderens position længst til venstre er 0, og den fjerneste position er 100. Du kan ændre området ved at bruge min- og max-attributterne. Vi kan også indstille trinværdien gennem attributtrinnet. Så for at angive et interval fra 5 til 50, i trin på 5, ville vi bruge:
< input type = "range" min = "5" max = "50" step = "5" / > |
Støtte fra alle populære browsere, undtagen Opera Mini.
7. Formularvalidering
Det er meget praktisk at indstille specielt HTML attribut Input for at kontrollere inputdata. For eksempel vil vi oprette et felt, der skal udfyldes:
Folk, der bruger din mobil app eller hjemmeside, forfølge et bestemt mål. Typisk er det form, der står mellem brugeren og hans mål. Faktisk betragtes formularer som det sidste trin i processen med at nå brugermål. Derfor er det så vigtigt, at brugeren udfylder formularen så hurtigt som muligt og uden forhindringer.
Følg disse syv regler for at oprette enkle, klare formularer:
Regel #1: Formularer skal være kompatible med den måde, brugeren indtaster deres data på
Sørg for, at formularfelter ikke er skjult af grænsefladeelementer (såsom tastaturet). Når brugeren udfylder formularfelterne, flyttes felterne automatisk op.
Regel #2: Minimer antallet af inputfelter og brugerens behov for at skrive
Jo længere og mere kompleks en formular ser ud, jo mindre sandsynligt er det, at brugerne vil udfylde de tomme felter, især på små skærme. Reduktion af antallet af inputfelter vil gøre din formular mindre travl, især når du spørger brugeren et stort antal af Information. 
Gør formularen så enkel og kort som muligt
Men at reducere antallet af felter er ikke nok. Du bør også være opmærksom på den indsats, brugeren bruger på at indtaste data. Udskrivning påkrævet høj grad interaktioner; der er stor sandsynlighed for fejl, selv når du indtaster fra et tastatur i fuld størrelse (især på en berøringsskærm).
Prøv derfor at minimere behovet for taste- og brugerfejl.
Smart standardindstillinger
Smarte standarder hjælper brugere med at udfylde alle formularfelter hurtigere og mere præcist. For eksempel kan du forudvælge en brugers bopælsland baseret på deres geolokationsdata.
Automatisk detektering placering vil spare brugeren tid på at søge efter et hotelværelse
Radioknapper til lignende, men gensidigt udelukkende valg
Når brugeren står over for at vælge fra en liste over muligheder, kan du overveje at bruge en vandret liste med tags. Dette giver dig mulighed for mere effektivt at bruge den tilgængelige skærmplads.
Skydere til min/max pris eller budgetinterval
Overvej at bruge skydere til felter, der indeholder priser eller budget. På denne måde kan brugeren flytte skyderen til minimum/maksimum værdi. Skyderen er nem at flytte vandret, og du kan nemt tilpasse denne handling ved hjælp af visuelle signaler. Men husk, at tallene ikke skal skjules, når du interagerer med skyderen (især når du bruger tommelfingrene).
AirBnB-skyder for at vælge pris
Regel nr. 3: Formularoverskrifter skal enten være over selve felterne eller flydende
Overskrifter fortæller brugeren hovedformålet med et felt, og klar tekst er en af de vigtigste måder at gøre en brugergrænseflade mere tilgængelig på.
Hvorfor du aldrig bør bruge tekstoverskrifter i et felt
In-field headers (eller pladsholdere) er tekst, der sidder inde i et formularfelt, der forsvinder, så snart brugeren begynder at indtaste deres data.
Overskrifter inde i feltet
Mens in-box overskrifter ser godt ud fra et æstetisk synspunkt, er denne fordel ofte overvurderet. Den største fejl er at miste kontekst. Når brugeren klikker på feltet, forsvinder inskriptionen. Og derfor kan han ikke bekræfte, at han har skrevet præcis, hvad der skal til.
Teksten inde i feltet er ikke den mest bedste erstatning visuel overskrift
Nogle brugere, der ser, at der allerede er skrevet noget i et felt, kan også tro, at feltet allerede er udfyldt, og at de ikke behøver at indtaste noget andet og kan ignorere udfyldning.
Hvorfor venstrejusterende feltoverskrifter er dårligt for mobile enheder
Det vigtigste at overveje, når du bruger venstrejusterede overskrifter på en mobilenhed, er skærmstørrelsen og billedformatet. Hvis titlen til venstre er modsat feltet, vil du med en lodret skærmorientering have meget lidt plads tilbage til selve feltet. Dette skaber nogle vanskeligheder ved brug, fordi der ikke er nok plads tilbage til at vise, hvad brugeren skriver. Ikke at kunne se den indtastede tekst skaber et problem for brugerne, fordi det forhindrer dem i hurtigt at bemærke en indtastningsfejl, før de indsender formularen.
Det er meget svært at bemærke en fejl, hvis dataene ikke er helt synlige
Topheader eller responsiv header
Formulartitler skal være øverst i formularfelterne, så brugerne kan se, hvad de udfylder og hvordan. Den største fordel ved at placere formularoverskrifter over formularen er, at du kan strække formularen over hele skærmens bredde og gøre den stor nok til dataindtastning (for eksempel med en skriftstørrelse på 16 pixels). Yderligere fordel Det vil være muligt at skrive klare og forståelige overskrifter (ikke begrænset til 1-2 ord).
Den største ulempe ved at placere overskrifter over felterne er, at hele formularen fylder mere lodret, hvilket betyder, at brugeren skal rulle på skærmen. Det er dog ikke et særligt alvorligt problem – i dag er alle vant til at scrolle.
Alternativt kan du bruge responsive headers til at sikre, at brugerne har udfyldt feltet korrekt. Pladsholderteksten vises som standard, men efter at have trykket på feltet og indtastet tekst, flyttes pladsholderteksten til toppen af feltet, som vist nedenfor.
Regel #4: Formularfeltvalidering skal ske i realtid
I en ideel verden ville brugerne udfylde formularen nødvendige oplysninger og vil fuldføre denne opgave. I den virkelige verden laver brugere ofte fejl. Samtidig kan brugerne ikke lide det faktum, at de efter hele processen med at udfylde felterne når frem til "send"-knappen og opdager, at de har lavet en fejl. Det er korrekt at informere brugeren om succes/fejl i feltet umiddelbart efter udfyldning. Valideringsmeddelelsen informerer straks brugeren om, at de indtastede oplysninger er korrekte. Denne tilgang giver brugerne mulighed for at rette fejl hurtigere og uden at skulle vente på, at fejlene vises efter at have klikket på indsend-knappen.
Hvis du forventer konkrete svar på spørgsmål, skal du straks vise, hvad der skal indtastes og i hvilken form.
Strengvalidering kan også være en løsning. I eksemplet nedenfor kan du se godt eksempel, hvordan du kan rette en potentiel fejl.
Regel #5: Vis tastaturlayoutet i henhold til inputdataene
Brugere foretrækker det tilsvarende tastaturlayout i applikationen. For eksempel når brugeren skal indtaste et nummer kreditkort, vis kun talindtastning, så brugeren indtaster tal og ikke symboler. Dette vil øge påfyldningshastigheden og reducere mængden mulige fejl input.
Det skal du sørge for denne mulighed implementeret på hele applikationen og ikke på dens enkelte dele.
Regel #6: Giv nyttige oplysninger i sammenhæng
Nogle gange er der behov for at levere relevante og brugbar information for at forenkle processen for brugeren at udfylde formularen. Men sådan ledsagende tekst bør kun bruges, hvor det virkelig er nødvendigt:
- Ved planlægning af datoer sætter brugere pris på kontekst såsom en indbygget kalender til at bestemme ugedagene. Dette reducerer behovet for at afslutte appen for at se kalenderen, hvilket reducerer risikoen for, at brugeren bliver distraheret fra deres primære opgave.
- Folk kan være bekymrede over sikkerheden af deres data, så du skal vise dem, at deres data ikke vil blive delt med tredjeparter.
Som regel for god manerer bør du ikke strække din forklaring til 100 tegn.
Regel #7: Brug et fleksibelt format
Nogle opgaver kræver meget præcis information fra brugeren. Men samtidig kan det være i strid med principperne om god brugervenlighed at kræve, at brugeren skal give oplysninger i en bestemt form. Hvis du beder brugeren om at indtaste digitale oplysninger (såsom et telefonnummer) i en formular, så vær fleksibel og opret skærme, der kan understøtte forskellige formater input og vis information i den mest brugervenlige form for at forhindre fejl.
Brug ikke et fast dataindtastningsformat
Konklusion
Brugeren kan have alle mulige tvivl, når de udfylder formularen, så du bør forsøge at gøre processen så enkel som muligt. Alle de tips, der er beskrevet i denne artikel, kan forbedre formularernes anvendelighed betydeligt.
JQuery Mobile tilføjer automatisk styling til HTML-formularer, hvilket gør dem mere attraktive, mere brugervenlige at røre ved.
JQuery Mobile formularstruktur
JQuery Mobile til at bruge CSS til at style elementer HTML-formular for at gøre dem mere attraktive og nemmere at bruge.
I JQuery Mobile kan du bruge følgende formularelementer:
- tekstindtastningsfelt
- Søg efter et indtastningsfelt
- Radio knap
- afkrydsningsfelt
- Vælg Menu
- skyderen
- Vip vippekontakt
På ved hjælp af JQuery Mobilformular du bør kende:
- <Форма>elementet skal have en metode og en handlingsattribut
- Hvert formularelement skal have en unik "ID"-attribut. ID'et skal være unikt på alle sider på hele webstedet. Dette sker pga Jquery mobil den en-sides navigationsmekanisme præsenteres på en sådan måde, at mange forskellige sider samtidigt
- Hvert formularelement skal have en etiket. Fanen Indstillinger Til egenskaber, der matcher element-id
eksempler
Prøv det "
For at skjule en etiket skal du bruge klassen UI-hidden-accessible. Dette bruges ofte, når du tilskriver et element som et pladsholdertag:
eksempler
Prøv det "
Råd: Vi kan bruge data-net-BTN="true" attributten til at tilføje en knap for at rydde indholdet af inputfeltet (X-ikonet til højre for inputfeltet):
eksempler
<Ярлык = "имя_файла">Navn:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
Prøv det "
jQuery Mobile Forms-ikon
Knapkodeformular standard HTML <вход>element (knap, nulstil, send). De vil automatisk gengive stilarter og automatisk tilpasse mobile enheder til skrivebordet:
eksempler
<Тип входного = "Сброс" значение = "кнопка сброса">
Prøv det "
Hvis du har brug for at tilføje yderligere stilarter til<вход>knappen, kan du bruge følgende data-*attributtabel:
Knap for at tilføje et ikon:
<Тип входного = "Сброс" значение = "кнопка сброса">
Prøv det "
Container felt
For at få etiketter og formelementer til at se mere egnede ud til brede skærme, bedes du eller