Mobila formulär: hur man ersätter rullgardinslistor. Stöd för HTML5-mobilformulär och HTML-inmatningstyper

exempel

Råd: För att förhindra att jQuery Mobile automatiskt lägger till stil till interaktiva element, använd attributet data role="none".

I den här artikeln tar vi en titt på några av de nya formulärförbättringarna i HTML5 och analyserar hur de hjälper till att förbättras användargränssnitt på mobilen. Framför allt kommer vi att se hur formulär kan utökas med ytterligare ingångstyper, som erbjuds av HTML5, och visar dig vad du kan förvänta dig av olika mobila webbläsare.

HTML5-inmatningstyper

HTML5 har ett gäng nya inmatningstyper för formulär. Dessa typer av ingångar möjliggör större kontroll och verifiering av indata. Vissa av dem är särskilt användbara för mobilanvändare som ofta har svårt med HTML fungerar Inmatning. Full lista Indatatyperna ges nedan:

• färg — färgval
• datum — val av datum
• datetime - välj datum och tid
• e-post — e-postmaskvalidering
• nummer - ange nummer
• range — range slider
• sök - sökfält
• tel — telefonmaskvalidering
• tid - timing
• url - URL-validering

Självklart denna lista inkomplett. Detta inkluderar inte typer som accepteras av standarden, men deras kärna är ännu inte klar. Vi kommer att överväga de mest populära och relevanta av ovanstående typer i den här artikeln med exempel.

1. Färg på inmatningstyp

Om denna inmatningstyp stöds kommer användarens webbläsare att anropa den inbyggda färgväljaren på klientenheten. Den valda färgen kommer att presenteras i motsvarande hexadecimalt värde RGB.

Exempel på arbete:

Stilen på popup-fönstret beror på din webbläsare. Klicka på knappen för att se hur det fungerar.

Välj din färg:

Tyvärr, Stöd av denna typ mobila webbläsare lämnar mycket övrigt att önska. Av alla befintliga kan den korrekta mappningen endast hittas i Opera Mobile Och Chrome Android. För alla andra webbläsare kommer ett tomt textfält att visas. Detta är värt att ha i åtanke. Alternativt kan du skissa på paletten i JS eller använda plugins.

2. Inmatningstyp datum

Om det stöds av webbläsaren, ger det ett bekvämt block för att välja ett datum.

Exempel på arbete:

Val av datum:

Observera att inmatningstypen är Datum samt alternativen datumtyp och datetime-local erbjuder användbara attribut, värden som min och max , som kan begränsa och validera användarinmatning. Vi kommer att demonstrera detta nedan i texten.

HTML-inmatningsdatumtypen stöds av nästan alla webbläsare. Undantagen är Opera Mini och standardwebbläsaren för Android.

3. Inmatningstyp datetime och datetime-local

Denna inmatningstyp låter användaren ange ett datum och en tid i bekvämt format. Om det stöds kommer det att visas som en inbyggd datum/tid-widget för enheten. Skillnaden mellan dessa indatatyper är att den första är kopplad till världstid och den andra inte innehåller någon tidszonsinformation.

Exempel på arbete:

Välj datum och tid:

Stöds inte i IE Mobile och Opera Mini. På andra populära webbläsare (mobil) fungerar typen mer eller mindre korrekt, men fall av buggar och fel är inte ovanliga. Tänk på detta också, och glöm inte bortfall från JavaScript.

4. Inmatningstyp e-post

Denna typ kräver ingen representation. Många använder det redan och det stöds av nästan alla webbläsare.

Exempel på arbete:

Skriv in din mailadress:

Innan du skickar, kontrollerar webbläsaren att det ifyllda fältet är korrekt och informerar användaren om inmatningsformatet är ogiltigt. Beräkningen baseras på följande uttryck (text)@(domän)

5. Ange typnummer och tel

Detta är en annan typ som inte kräver mycket diskussion. Dock i mobil miljöär väldigt användbart verktyg. Använd den i de fall där användaren presenteras med en uppsättning endast siffror. I det här läget kommer han att erbjudas användarvänligt gränssnitt numerisk knappsats.

Exempel på arbete:

Välj värde:

Standardintervallet i de flesta webbläsare är mellan 0 och 100. Det vill säga att skjutreglagets position längst till vänster är 0 och den längsta positionen är 100. Du kan ändra intervallet med attributen min och max. Vi kan också ställa in stegvärdet genom attributsteget. Så för att ange ett intervall från 5 till 50, i steg om 5, skulle vi använda:

Stöd från alla populära webbläsare, förutom Opera Mini.

7. Formulärvalidering

Det är väldigt bekvämt att ställa in speciell HTML-attribut Ingång för att kontrollera ingångsdata. Vi vill till exempel skapa ett fält som måste fyllas i:

Den här artikeln är ett tillkännagivande om ny funktionalitet.
Det rekommenderas inte att använda innehållet i den här artikeln för att lära dig nya funktioner.
Full beskrivning ny funktionalitet kommer att tillhandahållas i dokumentationen för motsvarande version.
Fullständig lista över ändringar i ny version finns i filen v8Update.htm.

Implementerad i version 8.3.11.2867.

Vi fortsätter att utveckla den mobila plattformen och lägger till funktionalitet som redan finns tillgänglig i plattformen för personliga datorer. Dessutom utvecklar vi specifika plattformsfunktioner som endast är relevanta för mobila enheter. Vi kommer nu att berätta om några av de viktigaste förbättringarna.

Schemaläggare

Objektmodellen för den "mobila" schemaläggaren har inte förändrats, men hur användaren interagerar med schemaläggaren har förändrats, eftersom metoderna för att mata in information på mobila enheter skiljer sig från de som används på stationära datorer.

Till exempel, snabb redigering elementet utförs genom ett enda klick på elementet. Långtryckssamtal innehållsmeny, och till utseendet på markörer som gör att du kan sträcka elementet. Dra görs genom att trycka länge och sedan flytta fingret.

Att scrolla hela planeraren görs genom att scrolla med ett finger, zooma med två fingrar och så vidare.

En egenskap hos den nuvarande implementeringen av den "mobila" schemaläggaren är att den ännu inte stöder utskrift.

Formaterat dokument

Ett annat "nytt" objekt som vi har lagt till den mobila plattformen är Formaterat dokument. Ur användarens synvinkel skiljer sig ett "mobilt" formaterat dokument endast genom att dess redigeringspanel är inbyggd i själva kontrollen och är en logisk del virtuellt tangentbord. Du som utvecklare behöver inte lägga till det separat i konfigurationen. Redigeringspanelen har annan typ beroende på typ mobilenhet(telefon eller surfplatta).

Förhandsgranskning av formuläret "mobil" i konfiguratorn

I konfiguratorn, när vi utvecklade ett formulär, lade vi till möjligheten att se hur ditt formulär kommer att se ut på en mobil enhet.

I kommandopanelen kan du välja ett gränssnittsalternativ Mobilenhet, och se hur formuläret kommer att se ut i standardorientering.

Här kan du rotera din mobila enhet.

Dessutom har vi gett dig möjlighet att välja mellan stort antal vanliga enheter.

Dessutom kan du se mobilformulär i tre olika skalor:

• Pixel till pixel- när en mobil enhets skärmpixel motsvarar en fönsterskärmspixel förhandsvisning;
• Faktiska storleken - när storleken på den mobila enheten på skärmen motsvarar enhetens geometriska dimensioner;
• Efter fönsterstorlek- när visningsskalan är vald på ett sådant sätt att det "mobila" visningsområdet passar in i förhandsgranskningsfönstret utan att rulla.

Batchbearbetning av kalkylbladsdokument

Vi har lagt till ett antal nya objekt till den mobila plattformen som låter dig skapa paket med visade dokument. Denna funktion liknar den som finns i PC-plattformen. Således kan du nu till exempel skicka flera dokument för utskrift samtidigt.

Utveckling av leveransbara aviseringar

Vi har implementerat stöd för Windows push-meddelandetjänst (WNS, Windows Notification Services). Nu kan du använda funktionen för levererade aviseringar när du kör en mobilapplikation på plattformar i Windows-familjen.

Vi har även omarbetat felhanteringssystemet för att skicka levererade aviseringar. I situationer där tidigare fel kastades av ett undantag, kastas det nu som ett värde som du kan bearbeta i det inbyggda språket.

Hårdvaruacceleration i Android-operativsystemet

På versioner operativ system Android 4.4.2 och senare mobil plattform använder nu hårdvaruacceleration. Detta gjorde det möjligt för oss att öka gränssnittsrenderingshastigheten med 1,5 – 3 gånger.

Gäller: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365 for Phone Express använder ett formulär som är optimerat för telefonanvändning. När du redigerar ett formulär väljer du vilka fält som ska visas och i vilken ordning. Du kan göra vissa fält skrivskyddade, men du kan inte använda formulärskript i CRM-formulär för Express-telefoner.

CRM för Express-telefoner är föregående version telefonapplikation för Microsoft Dynamics 365 Senaste versionen telefonapp - Microsoft Dynamics 365 för telefoner - ger samma funktionalitet som Microsoft-applikation Dynamics 365 för surfplattor. Mer information om hur du ställer in Dynamics 365 för telefoner och surfplattor finns i Konfigurera Dynamics 365 för telefoner och surfplattor.

Om du har flera formulär måste du ändra ordningen på formulären och tilldela lämpliga säkerhetsroller så att användarna ser de formulär de behöver för att slutföra sina uppgifter.

I denna avdelning

Se Mobile Express-formuläret

Skapa ett Mobile Express-formulär

Se Mobile Express-formuläret

Det första steget i att skapa ett mobilformulär är att förstå hur det ser ut. Starta Express Phone CRM-appen på din telefon och logga in på din organisation.

Härifrån hittar du enheten som har formuläret du behöver redigera och öppna befintlig post eller skapa en ny.

Som du kan se är formuläret en lista med fält.

Notera

Endast fält som innehåller data visas.

För att redigera data, klicka på ikonen Förändra längst ner i formuläret. Fältetiketter flyttas för att ge mer utrymme för redigering. Alla fält visas nu. Om du rullar nedåt kan du se en lista över alla relaterade entiteter enligt definitionerna i motsvarande entitetsrelationsdefinitioner.

Skapa ett Mobile Express-formulär

Om du behöver flera mobila formulär, skapa ett nytt precis som du skulle skapa alla andra typer av formulär. När du skapar flera formulär måste du ställa in ordningen på formulären och säkerhetsrollerna för formuläret. Användare kan navigera mellan formulär i Express-telefonens CRM-app; de ser den första formen i den ordning som deras säkerhetsroller tillåter dem att se. För ett exempel, se Flera formulär.

Gå till avsnittet alternativ > inställningar. Välj Ställ in systemet.

Expandera noden Enheter och välj den enhet som du vill skapa ett nytt mobilformulär för.

Expandera entiteten och välj en nod Blanketter.

Välj Skapa Och Mobil-Express.

Om det här kommandot inte visas är enheten inte aktiverad för CRM-stöd för Express-telefoner. För vissa enheter kan detta ändras. ytterligare information se Aktivera eller inaktivera entitetsalternativ.

Mobile Express-formulärnamn behöver inte vara unika, men de måste vara meningsfulla så att de kan särskiljas från andra Mobile Express-formulär i listan. Detta är viktigt när du ställer in ordningen på formulären.

Nu kan du ändra formen eller välja Spara och stäng för att stänga den.Mer information:Redigera ett Mobile Express-formulär

Ställa in ordningen på formulär

Välj från listan med formulär för entiteten Formernas ordning och välj Mobil - Express.

I dialogrutan Formernas ordning välj en form och använd de gröna pilarna för att flytta formen uppåt eller nedåt i formordningen.

Det kommer att vara bekvämt att varje mobilform har sitt eget meningsfulla namn.

Välj OK för att stänga dialogrutan Formernas ordning.

Notera

Du som bärare av rollen" Systemadministratör" eller "System Customizer" har du tillgång till alla formulär. Det enda sättet För att se inställningarna som tillämpas på Mobile Express-formulär i appen CRM för Express-telefoner är att ställa in ordningen på formulären så att det nyskapade formuläret ligger överst.

Ändra Mobile Express-formuläret

Till skillnad från andra entitetsformulär kan du inte skapa nya entitetsrelationsattribut i Mobile Express-formulärredigeraren. Du kan dock alltid ändra Mobile Express-formuläret i standardlösningen.

I standardlösningen använder du Solution Explorer för att expandera Enheter och välj den mobila formulärenhet som du vill redigera.

I listan över formulär väljer du formuläret vars kolumn Formulärtyp värde närvarande Mobil - Express.

Den mobila formulärredigeraren öppnas.

Med ett så enkelt formulär är installationsuppgifterna följande.

Välj fält som ska inkluderas i formuläret.

Välja plats för fälten.

Beslutet att bevilja skrivskyddad åtkomst till vissa fält.

Publicera inställningar när de är klara. Mer information finns i Publiceringsinställningar.

Som standard ingår alla fält som krävs av verksamheten eller systemet i formuläret och kan inte tas bort. Om du gör ett obligatoriskt fält skrivskyddat kommer användare inte att kunna redigera fältet. När du skapar ny ingång ett skrivskyddat fält kommer inte att visas, men användaren kommer fortfarande att kunna spara posten utan denna data. Om du ändrar samma post i webben eller Dynamics 365-appen för telefoner och surfplattor måste användaren ange detta värde innan ändringarna sparas.

se även

© Microsoft Corporation 2017. Alla rättigheter reserverade.

Enligt din förfrågan formulär för mobilwebbplats hittades 2833 resultat

• Att utveckla bra navigering för en webbplats är en av nyckelfaktorerna för att projektet ska gå bra och för att besökarna ska börja utforska webbplatsen för att kontrollera alla skrymslen och vrår (bokmärken, bilder, text, etc.) för information. Titta och bli inspirerad till dina egna fantastiska projekt.

  Efterlevnad: 7

• Vid design mobilapplikationer Det finns olika fallgropar som väntar på utvecklaren som kan förstöra alla ansträngningar. I denna lektion vi kommer att beskriva de 6 mest lömska och typiska fel när du arbetar med versioner för mobila enheter.

  Efterlevnad: 7

• I den här lektionen kommer vi att ta reda på hur man skapar ett original meddelandeformulär i form av en skrivmaskin. Alla huvudfunktioner i denna enhet, som har gått ur bruk, kommer att återställas noggrant med använder CSS och jQuery.

  Efterlevnad: 7

• Här får du reda på hela sanningen om sajterna e-handel: enligt senaste forskningen på detta område, enl minst 59,8% potentiella köpare vägrar att betala för det de har lagt i sin varukorg (MarketingSherpa 59,8%, SeeWhy 83% och MarketLive 62,14%). Huvudfrågan: Varför överger kunderna köp så ofta? Faktum är att det finns några grundläggande misstag som utvecklare av e-handelswebbplatser gör väldigt ofta. Om det finns en generella principer som gör det svårt för användare att köpa våra produkter? Och finns det något meningsfullt sätt att förbättra försäljningsresultatet för det vi säljer?

  Efterlevnad: 7

• Den trevligaste nya funktionen i HTML5 är möjligheten att lägga till standardtext i formulärfält. Med platshållarattributet kan du visa i formulärfält specifik text medan de är tomma eller inte i fokus (när fältet är i fokus rensas det). Detta är en snygg funktion, men den stöds ändå inte av alla webbläsare. I den här handledningen kommer jag att visa dig hur du använder Modernizr för att avgöra om det stöds av en viss webbläsare, och om inte, fylla i formulärfält med standardtext dynamiskt med jQuery.

  Efterlevnad: 7

• Modulärt rutnät kan ge betydande hjälp när du skapar en webbplats. Det ger både den visuella strukturen för webbplatselement och miljön för innehåll. Det råkar hon vara på ett enkelt sätt skapa en balanserad och enhetlig webbplats.

  Efterlevnad: 7

• När du utvecklar ett projektgränssnitt vill du alltid att det ska vara enkelt och begripligt för användaren. Oavsett vad din webbplats erbjuder måste du hitta en balans mellan enkelhet och funktionalitet. Det är mycket viktigt att se till att användaren enkelt kan hitta och förstå alla funktioner i ditt projekt, helst utan att ladda andra sidor.

  Efterlevnad: 7

• Föreställ dig den känslomässiga turbulensen hos en användare som behöver lägga till bara ett par tecken för att skicka in ett formulär med ett stort antal manuellt ifyllda fält, och plötsligt går all data förlorad. Fruktansvärd. Såvida det inte finns ett sätt att återställa data för att undvika Sisyfos öde.