Bessere Formulareingaben für bessere mobile Benutzererfahrungen

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!