Eine einfache und praktische M?glichkeit zur Verbesserung der mobilen Anwendungsleistung: Konfigurieren Sie immer HTML -Eingangsfelder mit den richtigen type , inputmode und autocomplete Eigenschaften. W?hrend diese drei Attribute h?ufig separat diskutiert werden, sind sie in der mobilen Benutzererfahrung am wichtigsten, wenn Sie sie als Ganzes betrachten.

Wie wir alle wissen, ist das Ausfüllen von Formularen auf mobilen Ger?ten zeitaufw?ndig und umst?ndlich. Durch die korrekte Konfiguration der Eingabefelder k?nnen wir sicherstellen, dass der Dateneingangsprozess für den Benutzer so reibungslos wie m?glich ist. Schauen wir uns einige Beispiele und Best Practices an, um ein besseres mobiles Benutzererlebnis zu schaffen.

Verwenden Sie den richtigen Eingangstyp

Dies ist das einfachste, was man richtig machen kann. Eingabetypen wie email , tel und url werden in verschiedenen Browsern gut unterstützt. W?hrend die Vorteile der Verwendung des tel -Typs auf einem Desktop -Browser statt dem allgemeineren text schwer zu erkennen sind, ist es auf einen Blick auf mobile Ger?te klar.

Die Auswahl des richtigen Typs ?ndert die Tastatur, die auftaucht, wenn der Benutzer Felder auf Android- und iOS -Ger?te konzentriert. Mit sehr wenig Aufwand k?nnen wir eine benutzerdefinierte Tastatur für E -Mails, Telefonnummer, URL und sogar die Eingabe mit dem richtigen Typ anzeigen.

Es ist zu beachten, dass sowohl input type="email" als auch input type="url" überprüfungsfunktionen haben. Wenn ein Benutzer ein Formular einreicht, zeigen moderne Browser eine Fehlermeldung an, wenn sein Wert nicht mit dem erwarteten Format übereinstimmt. Wenn Sie diese Funktion deaktivieren m?chten, fügen Sie einfach die novalidate -Eigenschaft dem enthaltenen Formular hinzu.

Eine kurze Einführung zum Datumstyp

Die HTML -Eingabe enth?lt nicht nur spezielle Texteingaben - aber auch Optionsfelder, Kontrollk?stchen und mehr. Für die Zwecke dieses Artikels diskutiere ich jedoch haupts?chlich mehr textbasierte Eingaben .

Es gibt einen Eingabetyp, der im kritischen Bereich zwischen mehr kostenlosen Texteingabe- und Eingabe -Widgets wie Optionsfeldern liegt: Datum . Es gibt viele Variationen des Datumseingangstyps und werden auf mobilen Ger?ten gut unterstützt, einschlie?lich date , time , datetime-local und month . Wenn sie fokussiert sind, popieren diese benutzerdefinierten Widgets in iOS und Android. Anstatt eine dedizierte Tastatur auszul?sen, zeigen sie eine ausgew?hlte Schnittstelle in iOS an, die verschiedene Arten von Widgets auf Android anzeigen (bei der Datums- und Zeitauswahl besonders reibungslos sind).

Ich war zun?chst begeistert, native Standardeinstellungen auf meinem mobilen Ger?t zu verwenden, bis ich mich umsah und feststellte, dass die meisten wichtigen Apps und mobilen Websites benutzerdefinierte Datumspicker anstelle von nativen Datumsangaben verwenden. Dafür kann es mehrere Gründe geben. Zun?chst stellte ich fest, dass der native iOS -Date -Picker nicht so intuitiv ist wie der Kalendertyp -Widget. Zweitens sind selbst wundersch?n gestaltete Android -Implementierungen im Vergleich zu benutzerdefinierten Komponenten recht begrenzt. Zum Beispiel gibt es keine einfache M?glichkeit, einen Datumsbereich anstelle eines einzelnen Datums einzugeben.

Wenn der von Ihnen verwendete benutzerdefinierte Datumspicker auf Ihrem mobilen Ger?t nicht gut funktioniert, ist der Datum -Eingangstyp es wert. Wenn Sie native Eingabe-Widgets auf iOS und Android ausprobieren m?chten, um sicherzustellen, dass Desktop-Benutzer benutzerdefinierte Widgets anstelle des Standard-Dropdown-Menüs für das Standard-Dropdown-Menü sehen, kann dieser CSS-Code das Dropdown-Menü des Kalenders des Desktop-Browsers ausblenden, der es implementiert:

 ::-Webkit-Calendar-Picker-Indicator {
  Anzeige: Keine;
}

Schlie?lich ist es wichtig zu beachten, dass der Datumstyp von inputmode -Eigenschaft, über die wir diskutieren werden, nicht überschrieben werden kann.

Warum sollte ich mich um InputMode kümmern?

inputmode -Eigenschaft k?nnen Sie die vom Eingangstyp angegebene mobile Tastatur überschreiben und den Tastaturtyp direkt deklarieren, der dem Benutzer angezeigt wird. Als ich zum ersten Mal von dieser Eigenschaft erfuhr, war ich nicht beeindruckt - warum nicht den richtigen Typ von Anfang an verwenden? W?hrend inputmode normalerweise unn?tig ist, kann dies an einigen Stellen sehr nützlich sein. Der wichtigste Anwendungsfall für inputmode , den ich gefunden habe, ist, bessere digitale Eing?nge zu erstellen.

W?hrend einige HTML5 -Eingangstypen wie url und email einfach sind, ist input type="number" unterschiedlich. Es hat einige Zug?nglichkeitsprobleme und eine etwas umst?ndliche Benutzeroberfl?che. Beispielsweise zeigen Desktop -Browser wie Chrome kleine inkrementelle Pfeile an, die beim Scrollen leicht unerwartet ausgel?st werden.

Dies ist also ein Muster, an das sp?ter erinnert und verwendet werden muss. Verwenden Sie dies für die meisten digitalen Eingaben nicht:

<input type="number">

… Sie m?chten dies tats?chlich verwenden:

<input type="text" inputmode="decimal">

Warum nicht inputmode="numeric" anstelle von inputmode="decimal" verwenden?

numeric und decimal erzeugen die gleiche Tastatur auf Android. Auf iOS zeigt numeric jedoch eine Tastatur an, die sowohl Zahlen als auch Interpunktion anzeigt, w?hrend decimal ein fokussiertes numerisches Gitter zeigt, das fast genau tel Eingangstyp entspricht, au?er dass keine redundanten Telefonnummernoptionen vorhanden sind. Deshalb ist es meine erste Wahl für die meisten Arten von numerischen Eing?ngen.

Christian Oliff schrieb einen ausgezeichneten Artikel, der speziell inputmode -Attribute vorstellte.

Vergessen Sie nicht die Autoperete

Wichtiger als die richtige mobile Tastatur ist die Anzeige nützlicher automatischer Vorschl?ge. Dies ist ein langer Weg, um eine schnellere und reibungslosere Benutzererfahrung auf mobilen Ger?ten zu erstellen.

W?hrend Browser über Heuristiken verfügen, um automatische Vervollst?ndigungsfelder anzuzeigen, k?nnen Sie sich nicht auf sie verlassen und Sie sollten immer noch sicherstellen, dass Sie das richtige autocomplete -Attribut hinzufügen. In iOS Safari stellte ich beispielsweise fest, dass input type="tel" nur die Option AutoComplete zeigt, wenn ich autocomplete="tel" explizit hinzufüge.

M?glicherweise sind Sie mit grundlegenden Autokapostoptionen vertraut, z. B. Optionen, die Benutzern helfen, Kreditkartennummern oder Adressformularfelder auszufüllen. Ich empfehle jedoch, sie zu überprüfen, um sicherzustellen, dass Sie alle Optionen verstehen. Die Spezifikation listet mehr als 50 Werte auf! Wussten Sie autocomplete="one-time-code" den Benutzer des Telefons sehr reibungslos verarbeiten kann?

über Autocomplete…

Ich m?chte ein anderes Element erw?hnen, mit dem Sie Ihre eigene benutzerdefinierte AutoComplete -Funktion erstellen k?nnen: datalist . W?hrend es eine nutzbare - wenn auch ein wenig einfache - automatische Erfahrung auf Desktop -Chrome und Safari erzeugt, f?llt es auf iOS auf, indem es Vorschl?ge in praktischen Linien direkt über der Tastatur zeigt, die sich h?ufig an diesem Ort befindet. Darüber hinaus kann der Benutzer zwischen Text und Selektiveingabe wechseln.

Andererseits erstellt datalist auf Android ein typischeres Autocomplete-Dropdown-Menü, wobei der Bereich über der Tastatur die eigene Typ mit eigenen Typen beh?lt. (In iOS müssen Benutzer den Auswahlauswahlschalter durch Drücken des Down -Pfeil -Symbols ausl?sen, um Inhalte als die besten drei besten übereinstimmungen anzuzeigen.)

Sie k?nnen diese Demo verwenden, um datalist auszuprobieren:

Sie k?nnen dieses Tool verwenden, um alle autocomplete zusammen mit inputtype und inputmode -Werten zu untersuchen, damit Sie schnell verschiedene Eingangskonfigurationen auf Ihrem mobilen Ger?t anzeigen k?nnen.

Zusammenfassen

Wenn ich Formen baue, konzentriere ich mich oft darauf, das Desktop -Erlebnis zu perfektionieren, und betrachte mobile Netzwerke als nachtr?gliche Gedanken. Obwohl es zus?tzliche Arbeit erfordert, um sicherzustellen, dass das Formular auf mobilen Ger?ten gut funktioniert, ist es nicht unbedingt schwierig. Hoffentlich hat dieser Artikel gezeigt, dass Sie mit einigen einfachen Schritten Formulare auf Ihrem mobilen Ger?t für Benutzer bequemer erstellen k?nnen.

Das obige ist der detaillierte Inhalt vonBessere Formulareingaben für bessere mobile Benutzererfahrungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!