Gute Formulare bauen

Nachfolgend finden Sie zahlreiche Tipps für das Formulardesign & UX-Beispiele für Formulare. Formulare sind hochkontextuell und hängen mehr als nur vom Design des Formulars selbst ab. Dies sind allgemeine Hinweise und können im Spezialfall sinnvollerweise abweichen.

I. Allgemein

1. Mehrstufige Formulare statt einseitige Formulare

Die Aufteilung von Formularen in zwei oder drei Schritte wird fast immer das Ausfüllen der Formulare erleichtern. Ich stelle immer wieder fest, dass mehrstufige Formulare die generischen einstufigen Formulare übertreffen. Es gibt drei Gründe, warum mehrstufige Formulare so gut funktionieren:

• Der erste Eindruck von mehrstufigen Formularen ist weniger einschüchternd als ein langes Formular mit vielen Fragefeldern.
• Durch die Abfrage sensibler Informationen (E-Mail, Telefon) im letzten Schritt eines mehrstufigen Formulars ist es wahrscheinlicher, dass die Nutzer*in diese Felder ausfüllen – andernfalls verlieren sie den Fortschritt, der durch das Ausfüllen der vorherigen Schritte erzielt wurde (dies ist eine nachgewiesene kognitive Verzerrung, die als „Sunk Cost Fallacy“ bekannt ist).
• Wenn Sie einen Fortschrittsbalken sehen, sind die Nutzer*in motivierter, das Formular auszufüllen. Auch dies basiert auf zahlreichen bewährten kognitiven Verzerrungen.

2. Nicht benötigte Felder entfernen.

• Jedes zusätzliche Feld in Ihrer Form verliert wichtige Leads – überlegen Sie, ob jede Frage den inkrementellen Verlust rechtfertigt.

3. Bedingte Logik zur Verkürzung einsetzen.

• Bei der bedingten Logik (manchmal auch als“Verzweigungslogik“ bezeichnet) wird eine Frage nur dann angezeigt, wenn eine Nutzer*in eine vorherige Frage auf eine bestimmte Weise beantwortet hat. Diese Technik reduziert die durchschnittliche Länge Ihres Formulars und reduziert gleichzeitig den Abbruch des Formulars, indem sie keine Fragen anzeigt, die für bestimmte Nutzer*in irrelevant sein könnten.

4. Oben links ausgerichtete Feldnamen sind am besten lesbar.

• UX-Forscher fanden heraus, dass die Ausrichtung der Labels über den Feldern auf der linken Seite die Ausführungszeit der Formulare verlängert. Der Grund dafür ist, dass es weniger „visuelle Fixierungen“ benötigt. Es gibt eine akzeptable Alternative zu top-orientierten Feldnamen, auf die ich in Punkt #16 eingehen.

5. Vermeiden Sie es, Fragen nebeneinander zu stellen.

• Eye-Tracking-Studien haben gezeigt, dass einfache einspaltige Layouts besser sind als mehrspaltige Layouts mit nebeneinander liegenden Fragen. Die einzige Ausnahme von dieser Regel ist die Abfrage von Daten (Tag, Monat, Jahr) oder Zeit (Stunden und Minuten), bei der mehrere Felder in einer Zeile erwartet werden.

6. Geben Sie den Menschen einen Grund, Ihr Formular zu verwenden.

• Stellen Sie sich vor, Sie hätten ein langes Formular ausgefüllt, welches eine Stunde in Anspruch nehmen würde? Niemand würde es ausfüllen. Außer, Sie schenken jemandem, der es ausfüllt eine Reise auf die Bahamas. Das Versprechen einer kostenlosen Reise würde den Menschen die Motivation geben, sich trotz der langen und schlechten Nutzererfahrung durchzuringen. Obwohl diesem Beispiel übertrieben ist, veranschaulicht es die Rolle, die die Motivation bei der Formularoptimierung spielt.

7. Gruppieren Sie Bezugsfelder in Abschnitte oder Schritte.

• Wenn Ihr Formular mehr als sechs Felder enthält, ergibt es Sinn, Fragen in logische Abschnitte oder Schritte zu gruppieren.

II. Fragen & Feldtypen

8. Wählen Sie Feldtypen, die die Anzahl der Klicks reduzieren, die zum Abschluss erforderlich sind.

• Als Microsoft seine Meldung zum Herunterfahren des Rechners von einem anklickbaren Abschaltsymbol in eine Dropdown-Box änderte, stellten sie fest, dass weniger Personen ihre Computer heruntergefahren haben – nur wegen zwei zusätzlicher Klicks. Versuchen Sie bei der Auswahl des zu verwendenden Formtype, so wenig Klicks wie möglich zu verwenden.

9. Smarte Voreinstellungen verwenden.

• Wenn Sie nach „Telefonnummer“ oder „Land“ fragen, sollten Sie eine Standard-Telefonnummer oder ein Land vorschlagen, das auf der IP-Adresse der Nutzer*in basiert.

10. Radio Buttons, Checkboxen und Dropdown-Listen verwenden statt Freitextfelder.

11. Radio Buttons sollten vertikal angeordnet sein.

• Durch die vertikale Ausrichtung von Radio Buttons (und Checkboxen) sind sie im Vergleich zu einem horizontalen Layout schneller zu verarbeiten.

12. Unterteilte Felder nicht bei der Abfrage von Telefonnummern oder Geburtsdaten verwenden.

• Unterteilte Felder zwingen den Nutzer*innen, unnötig zusätzliche Klicks zu machen, um zum nächsten Feld zu gelangen. Stattdessen ist es besser, ein einziges Feld mit klaren Formatierungsrichtlinien im Platzhalter zu haben. Selbst wenn Sie Nutzer*innen automatisch in das nächste Feld schicken, erfordert das Feld-Unterteilung eine strengere Validierung, die das Potenzial hat, nach hinten loszugehen.

13. Vertrauliche Informationen

• Erklären Sie deutlich, warum Sie nach vertraulichen Informationen fragen. Die Menschen sind zunehmend über den Schutz ihrer Daten besorgt. Wenn Sie nach sensiblen Informationen fragen müssen, stellen Sie sicher, dass Sie erklären, warum sie benötigt werden, indem Sie den Support-Text unterhalb des Feldes verwenden.

14. Verwenden Sie bei der Abfrage von Adressen eine Postleitzahlensuche, um die Eingabe von Feldern zu reduzieren.

• Wenn Sie Nutzer*innen bitten, ihre Adresse auszufüllen, ist es am besten, nur nach einer Hausnummer und Postleitzahl zu fragen und dann einen Service zu nutzen, um die vollständige Adresse vorzuschlagen.

15. Platzhalter richtig verwenden

• Ein Platzhalter ist der helle Text, der in einem Formularfeld erscheint. Platzhalter sollten verwendet werden, um den Nutzer*innen bei Unklarheiten beim Ausfüllen des Feldes zu unterstützen. Mit anderen Worten, Sie benötigen wahrscheinlich keinen Platzhalter für Felder wie „Vorname“.

16. Immer einen Feldbezeichner anzeigen

• Ein Feldbezeichner ist der Fragetext, der sich über dem Feld befindet. Diese sollten immer vorhanden sein und nicht durch Platzhalter ersetzt werden. Warum? Denn wenn Sie anfangen, Text in ein Feld einzugeben, verschwindet der Platzhaltertext, was die Nutzer*innen zwingt, den Text zu merken. Der einzige Fall, in dem es akzeptabel sein kann, keinen Feldbezeichner zu haben, ist, wenn Sie Inline-Labels verwenden. Inline-Label sind eine Hybridlösung, die immer im Blickfeld ist, aber nicht so viel Platz in der Höhe einnimmt wie oben-ausgerichtete Labels.

17. Verwenden Sie die vorausschauende Suche nach Feldern mit vielen vordefinierten Optionen.

• Wenn Sie Nutzer*innen bitten, ihr Land, ihren Beruf oder etwas anderes mit einer großen Anzahl vordefinierter Optionen auszuwählen, ist es am besten, eine vorausschauende Suchfunktion bereitzustellen, um die Anzahl der erforderlichen Eingaben und kognitiven Belastungen zu reduzieren.

III. Vorausschauende Suche – Dropdown-Liste

18. Optionale Fragen

• Wenn Sie eine optionale Frage stellen müssen, machen Sie deutlich, dass sie optional ist. Während ich empfehlen würde, optionale Felder zu entfernen zu verwenden, nachdem Nutzer*in ihre Daten bereits übermittelt haben, wird dennoch manchmal verlangt, dass sie gefragt werden. Wenn Sie optionale Fragen stellen müssen, machen Sie deutlich, dass sie mit Platzhaltern optional sind.

19. Bilder

• Auswählbare Bilder gehören zu den ansprechendsten Fragetypen

20. Telefonnummer

• Seien Sie vorsichtig, wenn Sie nach Telefonnummern fragen. Die Menschen sind immer weniger bereit, ihre Telefonnummern weiterzugeben. Fragen Sie dennoch danach, wird sehr wahrscheinlich die Abbruch-Rate signifikant die Abbruch-Rate erhöhen.

21. Eingabefelder sollten entsprechend der erwarteten Eingabe dimensioniert werden.

• Die Größe eines Feldes sollte widerspiegeln, wie viel Text die Nutzer*innen voraussichtlich eingeben werden. Daher sollten Felder wie Postleitzahl oder Hausnummer kürzer sein als Felder wie z.B. der Straßenname.

IV. Nutzerfreundlichkeit

22. Captchas

• Vermeiden Sie die Verwendung von Captchas. Captchas zwingt Nutzer*innen das Problem des Spam-Managements auf, verursacht Reibungsverluste und schreckt letztlich ab. Eine bessere Alternative wäre die Verwendung eines automatisierten Spam-Erkennungsdienstes wie Akismet, eine sehr einfache Quizfrage (Rechnung 1 plus 3) oder die Erstellung eines „Honeypots“ mit versteckten Feldern. Die Verwendung eines Captcha sollte der absolute letzte Ausweg sein.

23. Farben

• Verlassen Sie sich bei der Kommunikation nicht auf Farben. Während es bei Frauen seltener vorkommt, hat einer von 12 Männern einen gewissen Grad an Farbenblindheit. Achten Sie bei der Anzeige von Validierungsfehlern oder Erfolgsmeldungen darauf, dass das Feld nicht grün oder rot markiert ist. Wo immer Farbe verwendet wird, versuchen Sie, auch Text und/oder Symbole anzuzeigen, um Nutzer*innen eine Nachricht zu übermitteln.

24. Stellen Sie sicher, dass Ihr gesamtes Formular mit der Tabulatortaste navigierbar ist.

• Während viele Nutzer*in die Tabulatortaste verwenden, um durch Formulare zu navigieren, ist dies besonders wichtig für Nutzer*innen mit Behinderungen, die sich auf eine Software verlassen, die die Tabulatorfunktion verwendet, um von einer Frage zur nächsten zu wechseln.

25. Schwierige Fragen

• Wenn Sie eine Frage stellen, die Nutzer*innen möglicherweise nicht verstehen, geben Sie klare Erklärungen ab, um sie zur richtigen Antwort zu führen. Z.B. mit einem Hinweis über einem Mouseover über ein Fragezeichen.

26. Funktioniert Ihr Formular auf allen gängigen Browsern und Geräten?

• Es mag nach gesundem Menschenverstand klingen, aber es ist gut zu überprüfen, ob Ihre Formulare funktionieren und einfach in allen gängigen Browsern und Geräten zu verwenden sind. Verwenden Sie im Zweifelsfall einen Dienst wie BrowserStack.

27. Ist Ihr Formular bei hellen oder schlechten Lichtverhältnissen einfach zu verwenden?

• Wenn Personen Ihre Formulare wahrscheinlich im Freien auf ihren mobilen Geräten verwenden, ist es wichtig, dass sich Ihre Fragefelder vom Formularhintergrund unterscheiden. Andernfalls können Nutzer*innen möglicherweise nicht erkennen, wo sie tippen sollen.

28. Stellen Sie sicher, dass nichts mehr als zweimal pro Sekunde blinkt.

• Wenn Sie die Verwendung von blinkenden Cursors, animierten Fortschrittsbalken, Gifs oder allem anderen was blinkt, planen, stellen Sie sicher, dass sie nicht mehr als zweimal pro Sekunde blinken. Andernfalls kann dies bei einigen Menschen zu Anfällen führen.

29. Automatisches Ausfüllen des Browsers aktivieren.

• Browser wie Google Chrome & Firefox verfügen jetzt über eine Auto-Fill-Funktion, mit der Nutzer*innen Standardfelder mit einem Klick ausfüllen können. Damit dies funktioniert, suchen Google Chrome / Firefox nach kontextuellen Hinweisen in den Texten „Name“, „Label“ und Platzhalter. Daher ist es empfehlenswert, sicherzustellen, dass Ihre Felder ordnungsgemäß mit Begriffen versehen sind, die ein Browser erkennen würde, z.B. „E-Mail“, „Vorname“ oder „Stadt“.

30. Schritt-für-Schritt-Formulare verwenden

• Wie halten Sie Ihre Formulare kurz genug, um Nutzer*innen nicht abzuschrecken, während Sie gleichzeitig mehr Informationen erfassen, wenn Nutzer*inen bereit sind, mehr Informationen bereitzustellen? Schritt-für-Schritt-Formulare sind eine Option. Sie ermöglichen, das Formular zu senden, wenn ein Nutzer*in einen bestimmten Schritt im Formular erreicht hat, und dann weitere Informationen bereitzustellen, wenn er dies wünscht.

31. Optimieren Sie die Geschwindigkeit Ihrer Formulare.

• Nutzer*innen erwarten, dass Websites und Formulare schnell geladen werden. In der Tat, für alle 100 Millisekunden, die Amazon ihre Website beschleunigt, sehen sie eine 1%ige Umsatzsteigerung. Wenn Sie Ihre Conversions erhöhen möchten, stellen Sie sicher, dass Ihr Formular so schnell wie möglich ist.

32. Automatisches „weiter“

• Vermeiden Sie das automatische Weiterschalten (automatisches Springen zur nächsten Frage). Es wird i.d.R. nicht erwartet und verwirrt.

33. Verwenden Sie visuelle Hinweise und Symbole, um Formularfelder intuitiver zu gestalten.

• Unser Gehirn verarbeitet visuelle Bilder deutlich schneller als Text.Es können visuelle Eingabeaufforderungen verwendet werden, um zu signalisieren, wie ein Feld ausgefüllt werden soll.

V. Eingabevalidierung & Fehlerbehandlung

34. Validieren Sie nicht zu streng!

• Strenge Validierung ist ein Symptom fauler Programmierung. Es ist schlecht für die Nutzer*innen. Wenn es viele Variationen in der Art und Weise gibt, wie Nutzer*innen auf ein Feld antworten können (z.B. auf eine Telefonnummer mit +12345678912, +44 12345678912, +44 12345678912, 012345678912), sollten Ihre Programmierer eine Regel verwenden, die diese in ein einheitliches Format auf Ihrer Seite konvertiert.
• Alternativ können Sie auch Platzhalter verwenden, um das vorgeschlagene Format deutlich darzustellen.

35. Doppelte Bestätigung vermeiden.

• Bitten Sie die Personen nicht, ihre E-Mail oder ihr Passwort zweimal zu bestätigen. Wenn Sie ein Bestätigungssystem für E-Mails / Passwörter verwenden müssen, ist es besser, ein Symbol oder ein Kontrollkästchen zu haben, das das Passwort beim Klicken auf.

36. Richtig validieren.

• Wenn Sie die Validierung verwenden müssen, stellen Sie sicher, dass sie inline (rechts neben dem Feld) ist und melden Sie Fehler frühzeitig. Warten Sie nicht, bis Nutzer*innen auf „senden“ klicken, um Fehler bei der Validierung von Berichten zu melden. Gleichzeitig sollte die Inline-Validierung nicht in Echtzeit erfolgen, da dies wahrscheinlich Fehler meldet, bevor Nutzer*innen das Feld ausgefüllt hat. Im Idealfall sollten Inline-Validierungsnachrichten etwa 500 ms nach Beendigung der Eingabe durch Nutzer*innen angezeigt werden.

VI. Vertrauen

37. Ansprechendes Design

• Es hat sich gezeigt, dass Menschen „schön“ gestalteten Formularen / Websites mehr vertrauen als Formularen, die weniger ästhetisch aussehen.

38. Beheben Sie mögliche Probleme in der Nähe Ihres Formulars.

• Es gibt wahrscheinlich eine Reihe von Gründen, warum sich Menschen bei der Verwendung Ihrer Formulare unwohl fühlen könnten. Zum Beispiel: „Wie lange wird es dauern das Formular auszufüllen?“ – „Muss ich meine Kreditkartendaten eingeben?“ – „Werde ich lästige Anrufe von einem Verkäufer erhalten?“ Indem Sie diese im Voraus ansprechen, können Sie hier das Vertrauen der Nutzer*innen erhöhen.

39. Zeigen Sie einen starken Vertrauenshinweis in unmittelbarer Nähe zu Ihrem Formular.

• Aussagen wie „von 100.000 Menschen verwendet“ und Erfahrungsberichte von anderen Menschen in einer ähnlichen Situation sind starke Hinweise, die dazu führen, dass Nutzer*innen Ihnen eher vertrauen und Ihr Formular verwenden.

40. Seien Sie vorsichtig mit Siegeln, es sei denn, Sie verlangen eine Zahlung.

• Menschen verbinden Datenschutz- und Sicherheitssiegel mit einer Zahlung. Im A/B-Test verringerte das Hinzufügen eines Siegels tatsächlich die Conversionsrate, weil die Leute dachten, sie würden auf eine Seite gehen, um für etwas zu bezahlen.

41. Zeigen Sie Live-Chat- oder Kontaktinformationen in der Ansicht Ihres Formulars an.

• Für komplexere Formulare, bei denen Nutzer*innen Fragen zum Formular selbst haben könnten, ist dies eine äußerst leistungsfähige Technik. Es hilft potenziellen Interessenten, alle Fragen zu beantworten, die sie daran hindern, Ihr Formular zu verwenden.

VII. Mehrstufige Formulare & Fortschrittsbalken

42. Bei der Verwendung von mehrstufigen Formularen sollten Sie immer einen Fortschrittsbalken anzeigen.

• Fortschrittsbalken fördern die Vervollständigung und reduzieren die Angst Ihrer Nutzer*innen , indem sie deutlich kommunizieren, wie weit Sie vom Ende entfernt sind. Auch wenn Sie Ihren Fortschrittsbalken mit einigen bereits erzielten Fortschritten beginnen, steigt die Anzahl der Personen, die das Formular verwenden.

43. Achten Sie auf Ihre Übergangsgeschwindigkeiten.

• Eine Datingplattform erfasste Daten mit Hilfe eines 5-stufigen Formulars. Aber sie konnten nicht herausfinden, warum die Nutzer*innen auf die nächsten Schaltflächen klickten und dann das Formular aufgaben. Es stellte sich heraus, dass ihre Übergangsgeschwindigkeit zu schnell war. Die Nutzer*in klickten auf die nächste Schaltfläche und bemerkten nicht, dass sich der Inhalt des Schrittes geändert hatte, weil er sich so schnell änderte. Nachdem sie ihre Übergangsgeschwindigkeit verlangsamt hatten, verbesserte sich die Absprungrate. Dies ist eine der nicht intuitivsten Lektionen, die ich über das mehrstufige Formulardesign gefunden habe. Schließlich wird uns oft gesagt, dass schneller besser ist. Allerdings nicht, wenn es um Übergangsgeschwindigkeiten geht.

44. Klare Beschilderung verwenden

• Ein Fortschrittsbalken allein reicht nicht aus. Sie sollten auch die Gesamtzahl der Schritte und den Schritt anzeigen, in dem sich die Nutzer*in gerade befindet, um Unklarheiten zu beseitigen.

IIX. Schaltflächen & Call-to-Action

45. Der Aufruf zu Aktionen sollte den Satz „Ich will….“ beenden.

• Standardmäßig verwenden viele Formulare langweilige Call-to-Action-Buttons wie „Senden“ oder „absenden“. Diese sollten vermieden und durch Aufrufe von Aktionen ersetzt werden, die dem entsprechen, was Nutzer*innen beim Ausfüllen Ihres Formulars erreichen möchten. Eine gute Faustregel ist es, die Frage „Ich will….“ aus der Sicht des Nutzer*innen zu beantworten. Wenn es sich beispielsweise um ein Anfrageformular für eine kostenlose Beratung handelt, könnte der Aufruf zum Handeln lauten:“Meine kostenlose Beratung anfordern“.

46. Stellen Sie sicher, dass der Call-to-Action stark kontrastiert.

Wir alle haben von diesen berüchtigten Studien gehört, bei denen die Änderung der Farbe eines Knopfes die Konvertierung erhöhte. Diese Studien können gefährlich sein, wenn sie wörtlich interpretiert werden, da es in der Regel nicht auf die spezifische Farbe ankommt, sondern auf den Kontrast.

47. Der Call-to-Action sollte die gleiche Breite wie die Felder haben.

• Die Formulare von Uber verwenden große Aufrufe in voller Breite zu Aktionen, die im starken Kontrast zu den Formhintergründen stehen. Indem Sie Aktionen in der gleichen Breite wie Felder aufrufen, beseitigen Sie jeden Zweifel darüber, wo sich die Schaltfläche befindet.

48. Vermeiden Sie die Verwendung von „Clear“- oder „Reset“-Tasten.

• In einigen Formularen gibt es die Möglichkeit neben dem „weiter“ oder „absenden“-Buttons die Möglichkeit die Felder zu löschen. Das Risiko, versehentlich alle von Ihnen eingegebenen Informationen zu löschen, überwiegt den geringen Komfort, von vorn anfangen zu müssen. Die meisten Nutzer*innen sind sich bewusst, dass das Aktualisieren der Seite oder das erneute Eingeben von Informationen es ihnen ermöglicht, von vorn anzufangen. Daher sollten Abbruch- oder Reset-Buttons vermieden werden.

49. Ordnen Sie Ihre Fragen logisch an.

• Wenn Sie beispielsweise nach Kreditkartendaten fragen, fragen Sie nach Informationen in der gleichen Reihenfolge, in der sie typischerweise auf der physischen Karte erscheinen (Kreditkartennummer, Verfallsdatum, Sicherheitscode).

50. Platzieren Sie keine zu komplizierten juristischen Nachrichten in der Nähe Ihrer Tasten.

• Wenn Sie möchten, dass Ihre Nutzer*innen mit vielen komplexen Haftungsausschlüssen einverstanden sind, versuchen Sie, diese in so wenigen Dateien wie möglich zu kombinieren und juristische Hinweise so präzise wie möglich zu halten.

51. Kein automatische Aufnahme in Mailingliste

• Täuschen Sie Nutzer*innen nicht, indem Sie sie automatisch in Ihre Mailingliste aufnehmen. Dies wirkt manipulativ und zwingt die meisten Nutzer*innen, einen zusätzlichen Klick zu machen, um sich von Ihrer Liste abzumelden. Außerdem verstößt es gegen die GDPR.

52. Erklären Sie deutlich, was als Nächstes passiert, wenn Sie auf die Schaltfläche „Senden“ klicken.

• Wenn jemand dein Formular verwendet, fragt er sich vielleicht, wie lange er warten muss, ob er etwas vorbereiten muss oder was passieren wird. Im Idealfall sollte Ihr Formular die Nutzer*in auf eine Seite umleiten, die klar kommuniziert, was als Nächstes passieren wird und was sie erwarten können.

53. Senden-Button

• Deaktivieren Sie beim Senden die Schaltfläche „Senden“. Dies dient dazu, doppelte Eingaben zu vermeiden und Nutzer*innen zusätzlich zu signalisieren, dass die Eingaben erfolgreich waren.

54. Machen Sie deutlich, was Nutzer*innen als nächstes erwarten können.

• Ihr Call-To-Action (und die Landing Page im Allgemeinen) sollte klar kommunizieren, was Nutzer*innen erwarten können, sobald er Ihr Formular ausgefüllt hat.

55. Native Funktionen verwenden

• Nutzen Sie die nativen Funktionen des mobilen Geräts (Kamera, Geolokalisierung, Datumsauswahl), um die Aufgaben zu vereinfachen.

56. Fragefelder und Schaltflächen sollten mindestens 48 Pixel hoch sein.

• Die durchschnittliche Größe des Fingerpads für Erwachsene beträgt etwa 10 mm. Im Web sind das etwa 48 Pixel. Achten Sie daher bei der Gestaltung von Formularen, die auf mobilen Geräten verwendet werden sollen darauf, dass Ihre Felder mindestens 48 Pixel hoch sind.

57. Alle Formularbeschriftungen und Platzhalter-Schriftgrößen sollten über 16px liegen.

• Wenn Sie für älteres Nutzer*innen Formulare gestalten, sollte Ihr Text mindestens 16px groß sein.

58. HTML-Eingabetypen

• Verwenden Sie bestimmte HTML-Eingabetypen, um die richtige Tastatur anzuzeigen. Haben Sie jemals bemerkt, dass das Telefon bei der Verwendung eines mobilen Geräts verschiedene Tastaturen anzeigt, je nachdem, welche Frage Sie stellen? Manchmal erscheint die Schaltfläche .com“, während manchmal ein Datumswahlschalter erscheint? Das alles dank der HTML-Eingabetypen. Für das Design mobiler Formulare sind sie fantastisch und Sie sollten sie verwenden. Es gibt acht Eingabetypen, die für die Formulargestaltung relevant sind:
  • input type=“text“ zeigt die normale Tastatur für mobile Geräte an.
  • input type=“email“ zeigt die normale Tastatur plus „@“ und „.com“ an.
  • input type=“tel“ zeigt den numerischen 0-9 Tastenblock an.
  • input type=“number“ zeigt eine Tastatur mit Zahlen und Symbolen an.
  • input type=“password“ dies verbirgt Zeichen, wie sie in das Feld eingegeben werden.
  • Eingabe type=“date“ zeigt dies den Datumswahlschalter des Mobiltelefons an.
  • input type=“datetime“ Hier wird der Datums- und Zeitwahlschalter des Handys angezeigt.
  • input type=“month“ Hier wird der Monat/Jahr-Umschalter des Mobiltelefons angezeigt.