Registrierungsformular mit Tab

In diesem Tutorial zeigen wir dir, wie man in Axure das Verhalten für die Navigation mit der TAB-Taste richtig erstellt.
Gerade bei vielen Formularfeldern ist diese Option nützlich. Durch die Nutzung der TAB-Taste auf der Tatstaur kann man sich in der richtigen (selbst festgelegten) Reihenfolge von Element zu Element durchnavigieren.
  • Axure Version: 8.0
  • Level: Beginner
  • Dauer: 20 min
  • Themen: Axure Basics, Eingabefeld, Formular, Navigation, z-Index, Registrierung, Tab
Preview:

Das Konzept

Umzusetzen ist dieses Verhalten mit der Ebenen-Logik. Mit Front in der Axure-Menüleiste können Widgets hierarchisch organisiert werden. Bei einem Formular heißt das: das erste Formularfeld wird mit Front auf die oberste Ebene gelegt. Anschließend werden die weiteren Widgets nach und nach ebenso mit Front nach oben bewegt.

1 Vorbereitung

Zunächst wird ein weißes Rechteck aufgezogen. In diesem Rechteck werden die benötigten Texte (Bspl. Registrierung) platziert.
Anschließend wird ein Text Field für den Nutzernamen hinzugefügt. Dann wird das Text Field markiert und rechts unter Properties kann man den Hint Text ‚Nutzername‘ und den Hint Style bestimmen:

Hint Text für Eingabefeld festlegen

Hint Text für Eingabefeld festlegen

Danach werden die restlichen Elemente des Formulars hinzugefügt: weitere Eingabefelder mit Hint Texten, eine Checkbox und ein Registrierungs-Button:

Registrierungsformular

Registrierungsformular

Zum Schluss werden die beiden Passwort-Felder maskiert:

Maskierung der Passwort-Felder: Rechtsklick > Input type > Password

Maskierung der Passwort-Felder: Rechtsklick > Input type > Password

2 Tab-Navigation erstellen

Nachdem man alle Elemente des Formulars platziert hat, entscheidet man, wie die Tab-Navigation funktionieren soll. In diesem Fall soll zuerst das Feld ‚Nutzername‘ fokussiert werden und bei Klick auf Tab soll der Fokus sich nach und nach auf das nächste Eingabefeld setzen. Markiere hierfür das erste Eingabefeld ‚Nutzername‘ und klicke in der Menüleiste auf Front. Markiere anschließend nach der Reihe die weiteren Eingabefelder und hole diese ebenso mit Front nach vorne, sodass sich der z-Index erhöht.
Je größer der z-Index ist, desto weiter oben liegt ein Element.

Eingabefeld 'Nutzername' mit Front auf die oberste Ebene setzen.

Eingabefeld ‚Nutzername‘ mit Front auf die oberste Ebene setzen.

Je größer der z-Index ist, desto weiter oben liegt ein Element.

Je größer der z-Index ist, desto weiter oben liegt ein Element.

3 Formular in Dynamic Panel umwandeln

Damit nach der Registrierung eine Bestätigung erfolgt, kann man hinter das Formular eine kurze Bestätigung mit Label platzieren, das gesamte Formular in ein Panel umwandeln und nach der Registrierung ausblenden:

Das Formular in ein Dynamic Panel umwandeln

Das Formular in ein Dynamic Panel umwandeln

Hinter das Panel 'Registrierung' einen kurzen Bestätigungstext platzieren

Hinter das Panel ‚Registrierung‘ einen kurzen Bestätigungstext platzieren

Nun vergeben wir dem Registrieren-Button eine OnClick-Aktion. Bei Klick auf den Button wird das Registrierungsformular mit Hide ausgeblendet, sodass man den Bestätigungstext sehen kann:

Das Panel 'Registrierung' sich schließen lassen

Das Panel ‚Registrierung‘ sich schließen lassen

4 Preview

In der Preview kann man nun mit der TAB-Taste kontrollieren, ob die Reihenfolge der Navigation stimmt und diese ggf. erneut mit Front anpassen.

Preview

Preview

 

Ein Kommentar

eparo – Digital Service Design » Blog Archiv » Teil 1: Formularvalidierung – Konditionale Logik

[…] einer Checkbox und einen Button. Wie du dieses Formular erstellst wird genauer in dem Tutorial Registrierungsformular mit Tab […]

Kommentar schreiben

    Name
    E-Mail Adresse
    Website URL (optional)
    Kommentar