Mobilskjemaer: hvordan erstatte rullegardinlister. Støtte for HTML5-mobilskjemaer og HTML-inndatatyper

JQuery Mobile vil automatisk legge til styling til HTML-skjemaer, gjøre dem mer attraktive, mer vennlige å ta på.

JQuery mobil skjemastruktur

JQuery Mobile bruker CSS til å style HTML-skjemaelementer for å gjøre dem mer attraktive og enklere å bruke.

I jQuery Mobile kan du bruke følgende skjemaelementer:

  • tekstinntastingsfelt
  • Søk etter et inndatafelt
  • radioknapp
  • avmerkingsboksen
  • Velg Meny
  • glidebryteren
  • Vri vippebryteren

Når du bruker jQuery Mobile-skjemaet, bør du vite:

  • <Форма>elementet må ha en måte og en handlingsattributt
  • Hvert skjemaelement må ha et unikt "ID"-attributt. ID-en må være unik på alle sider på hele nettstedet. Dette er fordi Jquery Mobiles énsides navigasjonsmekanisme presenteres på en slik måte at mange forskjellige sider presenteres samtidig.
  • Hvert skjemaelement må ha en etikett. Innstillinger-fanen til egenskaper som samsvarer med element-ID

eksempler

method = "post" action = "demoform.html" >




Prøv "

For å skjule etiketten, bruk UI-Hidden Accessible-klassen. Dette brukes ofte når du tilskriver et element som en plassholder-tag:

eksempler






Prøv "

Råd: Vi kan bruke net-BTN = "true" dataattributtet for å legge til en knapp for å fjerne innholdet i inndatafeltet (X-en til høyre for inndatafeltet):

eksempler

<Ярлык = "имя_файла">Navn:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">


Prøv "

JQuery Mobile Forms-ikon

Skjemaknappkode standard HTML<вход>element (knapp, tilbakestill, send). De vil automatisk gjengi stiler, automatisk tilpasse mobile enheter til skrivebordet:

eksempler


<Тип входного = "Сброс" значение = "кнопка сброса">


Prøv "

Hvis du trenger å legge til flere stiler til<вход>knappen, kan du bruke følgende tabelldata-*-attributter:

Knapp for å legge til et ikon:


<Тип входного = "Сброс" значение = "кнопка сброса">


Prøv "

containerfelt

For at etiketter og skjemaelementer skal se mer egnet for widescreen, vær så snill, eller

elementet rundt etiketten / skjemaelementet brukes med klassen "UI-fields contain".
:

eksempler










Prøv "

Råd: For å forhindre at jQuery Mobile automatisk legger til styling til interaktive elementer, bruk datarollen = "no"-attributtet.

I denne artikkelen skal vi ta en titt på noen av de nye HTML5-skjemaforbedringene og analysere hvordan de bidrar til en bedre brukeropplevelse på mobil. Spesielt vil vi se hvordan skjemaer kan utvides med de ekstra inndatatypene som tilbys av HTML5 og vise deg hva du kan forvente av ulike mobilnettlesere.

HTML5-inndatatyper

HTML5 har en haug med nye inndatatyper for skjemaer. Disse typer innganger lar deg bedre kontrollere og validere inndata. Noen av dem er spesielt nyttige for mobilbrukere som ofte har problemer med HTML-inndata. En fullstendig liste over inndatatyper er gitt nedenfor:

  • farge - fargevalg
  • dato - datovelger
  • datetime - dato- og tidsvelger
  • e-post - validering av e-postmasken
  • nummer - skriv inn nummer
  • range - skyveknapp for rekkevidde
  • søk - søkefelt
  • tlf - telefonmaskevalidering
  • tid - valg av tid
  • url - URL-validering

Selvfølgelig er denne listen ikke komplett. Dette inkluderer ikke typer som er akseptert av standarden, men essensen deres er ennå ikke klar. Vi vil vurdere de mest populære og relevante av de ovennevnte typene i denne artikkelen med eksempler.

1. Farge på inndatatype

Hvis denne typen input støttes, vil brukerens nettleser starte den innebygde fargevelgeren på klientenheten. Den valgte fargen vil bli representert i den tilsvarende RGB heksadesimale verdien.

< input type = "color" / >

Eksempel på arbeid:

Stilen på popup-vinduet vil avhenge av nettleseren din. Klikk på knappen for å se hvordan det fungerer.

Velg din farge:

Dessverre, støtte av denne typen av mobile nettlesere overlater mye å være ønsket. Av alle de eksisterende, kan den riktige skjermen bare finnes i Opera Mobile og Chrome Android. Alle andre nettlesere vil bli vist en tom tekstboks. Dette er verdt å ha i bakhodet. Alternativt kan du skissere paletten i JS eller bruke plugins.

2. Inndatatype dato

Hvis den støttes av nettleseren, gir den en praktisk blokkering for å velge en dato.

< input type = "date" / >

Eksempel på arbeid:

Datovelger:

Vær oppmerksom på at datoinndatatypen, så vel som dato- og datotids-lokale varianter, tilbyr nyttige attributter, for eksempel min og maks, som kan begrense og validere brukerinndata. Vi vil demonstrere dette nedenfor i teksten.

HTML-inndata-datotypen støttes av nesten alle nettlesere. Unntakene er Opera Mini og standard Android-nettleser.

3. Inndatatype datetime og datetime-local

Denne inndatatypen lar brukeren spesifisere dato og klokkeslett i et praktisk format. Hvis det støttes, vil det vises som en innebygd enhetsdato/klokkeslett-widget. Forskjellen mellom de angitte inngangstypene er at den første binder seg til verdenstid, mens den andre ikke inneholder informasjon om tidssonen.

< input type = "datetime-local" / >

Eksempel på arbeid:

Valg av dato og klokkeslett:

Ikke støttet i IE Mobile og Opera Mini. På andre populære nettlesere (mobil) fungerer typen mer eller mindre riktig, men det er ikke uvanlige tilfeller av feil og feil. Ha det i bakhodet også, og ikke glem JavaScript fallbacks.

4. Inndatatype e-post

Denne typen krever ikke representasjon. Den brukes allerede av mange og støttes av nesten alle nettlesere.

< input type = "email" / >

Eksempel på arbeid:

Fyll inn epostadressen din:

Før sending sjekker nettleseren riktigheten av det utfylte feltet og informerer brukeren i tilfelle et ugyldig inndataformat. Beregningen er basert på følgende uttrykk (tekst) @ (domene)

5. Tast inn typenummer og tlf

Dette er en annen type som ikke krever mye diskusjon. Men i et mobilt miljø er det et veldig nyttig verktøy. Bruk den i tilfeller der brukeren bare blir presentert med et sett med tall. I denne situasjonen vil han bli tilbudt et praktisk numerisk tastaturgrensesnitt.

Eksempel på arbeid:

Valg av verdi:

Standardområdet i de fleste nettlesere er mellom 0 og 100. Det vil si at posisjonen lengst til venstre på glidebryteren er 0 og posisjonen lengst til høyre er 100. Du kan endre området ved å bruke min- og Max-attributtene. Vi kan også sette trinnverdien gjennom attributtrinnet. Så for å spesifisere et område fra 5 til 50, i trinn på 5, bruker vi:

< input type = "range" min = "5" max = "50" step = "5" / >

Støttes av alle populære nettlesere unntatt Opera Mini.

7. Skjemavalidering

Det er veldig praktisk å angi et spesielt HTML-inndataattributt for å validere inndataene. For eksempel ønsker vi å lage et felt som må fylles ut:

Denne artikkelen er en kunngjøring om ny funksjonalitet.
Det anbefales ikke å bruke innholdet i denne artikkelen for å mestre den nye funksjonaliteten.
En fullstendig beskrivelse av den nye funksjonaliteten vil bli gitt i dokumentasjonen for den tilsvarende versjonen.
En fullstendig liste over endringer i den nye versjonen er gitt i filen v8Update.htm.

Implementert i versjon 8.3.11.2867.

Vi fortsetter å utvikle den mobile plattformen, og legger til funksjonalitet til den som allerede er tilgjengelig i plattformen for personlige datamaskiner. I tillegg utvikler vi spesifikke plattformfunksjoner som kun er relevante for mobile enheter. Vi vil nå fortelle deg om noen av de viktigste forbedringene.

Planlegger

Objektmodellen til den "mobile" planleggeren har ikke endret seg, men måten brukeren samhandler med planleggeren på har endret seg fordi metodene for å legge inn informasjon på mobile enheter er forskjellige fra de som brukes på stasjonære datamaskiner.

For eksempel utføres rask redigering av et element ved et enkelt klikk på elementet. Et langt trykk fører til et kall til kontekstmenyen, og til utseendet til markører som lar deg strekke elementet. Dra utføres ved å trykke lenge og deretter bevege fingeren.

Bla gjennom hele planleggeren gjøres ved å rulle med én finger, zoome ved å strekke med to fingre, og så videre.

Det særegne ved den nåværende implementeringen av den "mobile" planleggeren er at den ennå ikke støtter utskrift.

Formatert dokument

Et annet «nytt» objekt som vi har lagt til mobilplattformen er Formatert dokument... Fra brukerens synspunkt skiller et "mobilt" formatert dokument seg bare ved at redigeringspanelet er innebygd i selve kontrollen, og er en logisk del av det virtuelle tastaturet. Du, som utviklere, er ikke pålagt å legge den til separat i konfigurasjonen. Redigeringspanelet ser forskjellig ut avhengig av typen mobilenhet (telefon eller nettbrett).

Forhåndsvisning av et "mobil"-skjema i konfiguratoren

I konfiguratoren, når vi utviklet et skjema, la vi til muligheten til å se hvordan skjemaet ditt vil se ut på en mobilenhet.

I kommandopanelet kan du velge grensesnittalternativet Mobil enhet og se hvordan formen vil se ut i standardretning.

Du kan også rotere mobilenheten din akkurat der.


I tillegg har vi gitt deg muligheten til å velge blant et stort antall vanlige enheter.


I tillegg kan du se mobilskjemaer i tre forskjellige skalaer:

  • Pixel til Pixel- når pikselen på skjermen på mobilenheten tilsvarer pikselen på skjermen i forhåndsvisningsvinduet;
  • Virkelig størrelse- når dimensjonene til mobilenheten på skjermen tilsvarer de geometriske dimensjonene til enheten;
  • Passer til vinduet- når visningsskalaen er valgt på en slik måte at visningsområdet "mobil" passer inn i forhåndsvisningsvinduet uten å rulle.

Batchbehandling av regnearkdokumenter

Vi har lagt til en rekke nye objekter til mobilplattformen som lar deg lage pakker med viste dokumenter. Denne funksjonaliteten er lik den som finnes i PC-plattformen. Dermed kan du nå for eksempel sende flere dokumenter til utskrift samtidig.

Utvikling av leveringsvarsler

Vi har implementert støtte for Windows Push Notification Services (WNS, Windows Notification Services). Du kan nå bruke den leverte varslingsfunksjonen når du kjører en mobilapplikasjon på plattformer i Windows-familien.

Vi har også omarbeidet systemet for håndtering av feil ved sending av levert varsel. I situasjoner der en feil tidligere ble forårsaket av et unntak, returneres den nå som en verdi du kan håndtere i innebygd språk.

Maskinvareakselerasjon i Android-operativsystemet

På versjoner av Android-operativsystemet 4.4.2 og nyere bruker mobilplattformen nå maskinvareakselerasjon. Dette tillot oss å øke gjengivelseshastigheten til grensesnittet med 1,5 - 3 ganger.

Gjelder: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365 for Express-telefoner bruker et skjema som er optimalisert for bruk med en telefon. Når du redigerer et skjema velger du hvilke felter som skal vises og i hvilken rekkefølge. Du kan gjøre enkelte felt skrivebeskyttet, men du kan ikke bruke skjemaskript i CRM-skjemaer for Express-telefoner.

CRM for Express Phones er den forrige versjonen av telefonappen for Microsoft Dynamics 365. Den nyeste versjonen av telefonappen, Microsoft Dynamics 365 for telefoner, har samme funksjonalitet som Microsoft Dynamics 365-nettbrettappen. For informasjon om hvordan du konfigurerer Dynamics 365 for telefoner og nettbrett, se Konfigurere Dynamics 365 for telefoner og nettbrett.

Hvis du har flere skjemaer, må du omorganisere skjemaene og tildele de riktige sikkerhetsrollene slik at brukerne ser skjemaene de trenger for å utføre oppgavene sine.

I denne seksjonen

Se Mobile Express-skjemaet

Opprette et mobilekspressskjema

Se Mobile Express-skjemaet

Det første trinnet i å sette opp et mobilskjema er å forstå hvordan det ser ut. Start CRM for Express Phones-appen på telefonen din og logg på organisasjonen din.

Herfra finner du enheten som har skjemaet du trenger for redigering, og åpner en eksisterende post eller opprett en ny.

Som du kan se, er skjemaet en liste over felt.

Merk

Bare felt som inneholder data vises.

Klikk på ikonet for å redigere dataene. Endring nederst i skjemaet. Feltetikettene er forskjøvet for å gi mer plass til redigering. Alle feltene vises nå. Hvis du blar nedover, kan du se en liste over alle relaterte enheter som definert i deres respektive enhetsrelasjonsdefinisjoner.

Opprette et mobilekspressskjema

Hvis det kreves flere mobilskjemaer, oppretter du et nytt på samme måte som du ville laget en hvilken som helst annen type skjema. Når du oppretter flere skjemaer, må du angi rekkefølgen på skjemaene og sikkerhetsrollene for skjemaet. Brukere kan navigere mellom skjemaer i CRM-appen for Express-telefoner; de ser den første formen i den rekkefølgen av skjemaer som sikkerhetsrollene deres tillater dem å se. For et eksempel, se Flere skjemaer.

Gå til seksjon Alternativer > Innstillinger... Vennligst velg Konfigurer systemet.

Utvid noden Entiteter og velg enheten du vil opprette et nytt mobilskjema for.

Utvid enheten og velg noden Skjemaer.

Vennligst velg Skape og Mobil - Express.

Hvis denne kommandoen ikke vises, har ikke enheten CRM-støtte for Express-telefoner aktivert. Dette kan endres for enkelte enheter. For mer informasjon, se Aktivere eller deaktivere enhetsalternativer.

Mobile Express-skjemanavn trenger ikke å være unike, men de må være meningsfylte for å skille dem fra andre Mobile Express-skjemaer på listen. Dette er viktig når du skal angi rekkefølgen på skjemaene.

Nå kan du endre formen eller velge Lagre og lukk for å lukke den Mer informasjon: Endre Mobile Express-skjemaet

Angi rekkefølgen på skjemaene

    Velg i listen over former for enheten Skjemabestilling og velg Mobil - Express.

    I dialogboksen Skjemabestilling velg en form og bruk de grønne pilene for å flytte figuren opp eller ned i formrekkefølgen.

    Samtidig vil det være praktisk at hver mobilform har sitt eget meningsfylte navn.

    Vennligst velg OK for å lukke dialogen Skjemabestilling.

Merk

Du, som bærer av rollen systemadministrator eller systemtilpasser, har tilgang til alle skjemaer. Den eneste måten å se tilpasninger brukt på Mobile Express-skjemaer i Express Phone CRM-appen er å ordne skjemaene slik at det nyopprettede skjemaet er øverst.

Endring av Mobile Express-skjemaet

I motsetning til andre enhetsskjemaer kan du ikke opprette nye enhetsrelasjonsattributter i Mobile Express Form Editor. Du kan imidlertid alltid endre Mobile Express-skjemaet i standardløsningen.

    I standardløsningen bruker du Solution Explorer for å utvide Entiteter og velg enheten med et mobilskjema som du vil redigere.

    I listen over skjemaer velger du skjemaet der i kolonnen Skjematype det er en verdi Mobil - Express.

Redigeren for mobilskjemaer åpnes.

Med et så enkelt skjema er oppsettsoppgavene som følger.

    Velg felt som skal inkluderes i skjemaet.

    Velge plassering av feltene.

    Beslutning om å gi skrivebeskyttet tilgang til enkelte felt.

    Publiser innstillinger når du er ferdig. For mer informasjon, se Publiseringstilpasninger.

Som standard er alle felt som kreves av virksomheten eller systemet inkludert i skjemaet og kan ikke slettes. Hvis du gjør et obligatorisk felt skrivebeskyttet, vil ikke brukere kunne redigere det feltet. Når du oppretter en ny post, vil ikke skrivebeskyttet feltet vises, men brukeren kan fortsatt lagre posten uten disse dataene. Hvis du endrer den samme posten i web- eller Dynamics 365 for telefoner og nettbrett-appen, må brukeren angi denne verdien før endringene lagres.

se også

Copyright © 2017 Microsoft Corporation. Alle rettigheter forbeholdt.

Søk

På din forespørsel skjema for mobilnettsted funnet 2833 resultater

  • Å utvikle god navigasjon for nettsiden er en av nøkkelfaktorene i den gode utviklingen av prosjektet og det faktum at besøkende begynner å utforske siden for å sjekke alle kriker og kroker (bokmerker, bilder, tekst osv.) for informasjon . Se og bli inspirert til dine flotte prosjekter.

    Matchende: 7

  • Når de designer mobilapplikasjoner, møter utviklere ulike fallgruver som kan oppheve all innsats. I denne opplæringen vil vi beskrive 6 av de mest lumske og vanlige feilene når du jobber med versjoner for mobile enheter.

    Matchende: 7

  • I denne opplæringen vil vi finne ut hvordan du lager et originalt meldingsskjema i form av en skrivemaskin. Alle hovedfunksjonene til dette foreldede aggregatet vil bli nøye gjenopprettet ved hjelp av CSS og jQuery.

    Matchende: 7

  • Her vil du finne ut hele sannheten om e-handelssider: ifølge den siste forskningen på dette området, nekter minst 59,8 % av potensielle kjøpere å betale for det de har skrevet i handlekurven (MarketingSherpa 59,8 %, SeeWhy 83 % og MarketLive 62,14 %). Hovedspørsmålet er: hvorfor nekter kunder å kjøpe så ofte? Poenget er at det er noen grunnleggende feil som utviklere av e-handelsnettsteder gjør veldig ofte. Er det generelle prinsipper som gjør det vanskelig for brukere å kjøpe produktene våre? Og er det noen meningsfull måte å forbedre salgstallene for det vi selger?

    Matchende: 7

  • Den fineste innovasjonen i HTML5 er muligheten til å legge til standardtekst i skjemafelt. Plassholderattributtet lar spesifikk tekst vises på skjemafelt mens de er tomme eller ute av fokus (når feltet har fokus, slettes det). Dette er en stilig gimmick, men støttes fortsatt ikke av alle nettlesere. I denne opplæringen skal jeg vise deg hvordan du ved hjelp av Modernizr kan finne ut om den støttes av en gitt nettleser, og hvis ikke, fyller du dynamisk skjemafeltene med standardteksten ved å bruke jQuery.

    Matchende: 7

  • Et modulært rutenett kan være til stor hjelp når du bygger en nettside. Det gir både en visuell struktur for nettstedselementer og et medium for innhold. Det er en enkel måte å lage et balansert og konsistent nettsted.

    Matchende: 7

  • Når du utvikler et prosjektgrensesnitt, vil du alltid at det skal være enkelt og forståelig for brukeren. Det spiller ingen rolle hva nettstedet ditt tilbyr, du må finne en balanse mellom enkelhet og funksjonalitet. Det er veldig viktig å sikre at brukeren enkelt kan finne og forstå hvilken som helst av funksjonene til prosjektet ditt, ideelt sett uten å laste inn andre sider.

    Matchende: 7

  • Tenk deg hvilken storm av følelser en bruker vil oppleve når han bare trenger å legge til et par tegn for å sende inn et skjema med et stort volum av manuelt utfylte felt, og plutselig går all data tapt. Fryktelig. Med mindre, selvfølgelig, er det ingen måte å gjenopprette dataene for å unngå skjebnen til Sisyfos.