{"id":129003,"date":"2019-02-15T22:40:35","date_gmt":"2019-02-15T21:40:35","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-and-inputs\/"},"modified":"2025-02-13T18:41:49","modified_gmt":"2025-02-13T17:41:49","slug":"prototyping-forms-and-inputs","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/prototyping-formulare-eingaben","title":{"rendered":"Formulare und Eingaben"},"content":{"rendered":"

Mit Justinmind k\u00f6nnen Sie interaktive Formulare entwerfen, um Benutzereingaben zu simulieren, z. B. Registrierungs-, Anmelde- und Suchformulare.<\/p>\n

<\/a>Ein Formular erstellen<\/h2>\n

Um ein Formular in Justinmind zu erstellen, m\u00fcssen Sie Widgets verwenden. Schauen Sie in der Symbolleiste unter dem Pluszeichen in der oberen linken Ecke Ihres Bildschirms nach. Hier finden Sie Widgets, die h\u00e4ufig in Formularen verwendet werden, darunter: Eingabetextfelder, Kontrollk\u00e4stchen und Optionsfelder, Auswahllisten und mehr.
\nSie k\u00f6nnen auch unsere vorgefertigten Formulare herunterladen und in Ihre Widgets-Palette importieren.
\nZiehen Sie einfach ein Widget auf die Leinwand, um mit der Erstellung Ihres Formulars zu beginnen.
\n\"Formular-Widgets\"<\/p>\n

Alle Formular- und Eingabe-Widgets sind w\u00e4hrend der Simulation automatisch interaktiv – keine Ereignisse erforderlich. Klicken Sie einfach auf „Simulieren“ und schon k\u00f6nnen Sie mit ihnen interagieren. <\/p>\n

Je nachdem, welches Ger\u00e4t Sie in Ihrem Prototyp verwenden, unterscheiden sich das Aussehen und die Funktionalit\u00e4t dieser Widgets. Wenn Sie z.B. bei iPhone-Prototypen w\u00e4hrend der Simulation auf ein Eingabefeld fokussieren, wird automatisch eine interaktive Ger\u00e4tetastatur angezeigt. <\/p>\n

Sie k\u00f6nnen zus\u00e4tzliche Widgets mit einem Eingabestil in Ihren Prototyp aufnehmen, indem Sie andere Widget-Bibliotheken hinzuf\u00fcgen.
\n\"Klicken<\/p>\n

Sobald Sie Ihr Formular designt haben, k\u00f6nnen Sie damit beginnen, Ereignisse hinzuzuf\u00fcgen, um anspruchsvolle Interaktionen zu erstellen. Wir haben ein paar Beispiel\u00fcbungen erstellt, um Ihnen eine Vorstellung von einigen M\u00f6glichkeiten zu geben. Sehen Sie sie sich unten an. <\/p>\n

<\/a>Formulare automatisch ausf\u00fcllen<\/h2>\n

In dieser \u00dcbung lernen Sie, wie Sie zwei Eingabetextfelder automatisch ausf\u00fcllen, nachdem Sie im ersten Eingabetextfeld die Tabulatortaste gedr\u00fcckt haben.<\/p>\n

Folgen Sie diesen Schritten, um die \u00dcbung abzuschlie\u00dfen:<\/p>\n

    \n
  1. Erstellen Sie einen neuen Prototyp f\u00fcr Ihr Formular; verwenden Sie einen Text, Eingabe-Textfelder und eine Schaltfl\u00e4che aus der Symbolleiste.<\/span><\/li>\n
  2. W\u00e4hlen Sie die Schaltfl\u00e4che und gehen Sie zur Palette Ereignisse<\/span>.<\/li>\n
  3. Klicken Sie auf „Ereignis hinzuf\u00fcgen“ und w\u00e4hlen Sie den Ausl\u00f6ser „Bei Klick“; w\u00e4hlen Sie eine Aktion „Wert setzen“.<\/span><\/li>\n
  4. W\u00e4hlen Sie f\u00fcr das Ziel das zweite Eingabefeld und geben Sie als Wert „Produktname“ ein. Klicken Sie auf „OK“, um die Erstellung des Ereignisses abzuschlie\u00dfen. <\/span>\"Wert<\/li>\n
  5. Gehen Sie zur Palette Ereignisse, klicken Sie auf das Zahnradsymbol neben dem Wort ‚Tun‘ und w\u00e4hlen Sie ‚Aktion hinzuf\u00fcgen‘. Erstellen Sie eine weitere Aktion „Bei Klick“ + „Wert setzen“ und w\u00e4hlen Sie das dritte Eingabetextfeld als Ziel und geben Sie etwas als den von der Aktion gesetzten Wert ein. \"Interaktive<\/li>\n
  6. Schauen Sie erneut in die Palette Ereignisse und klicken Sie auf „Interaktion hinzuf\u00fcgen“. Belassen Sie den Ausl\u00f6ser bei „Bei Klick“ und \u00e4ndern Sie die daraus resultierende Aktion in „Fokus setzen auf“ und w\u00e4hlen Sie das zweite Input-Textfeld als Ziel, auf das der Fokus gerichtet werden soll.\"InteraktiveSo sollten alle Ihre Ereignisse aussehen:
    \n\"Interaktive<\/li>\n<\/ol>\n

    Das war’s! Klicken Sie auf „Simulieren“ und geben Sie etwas Text in das erste Eingabefeld ein. Dr\u00fccken Sie dann die TAB-Taste und Sie werden auf das zweite Eingabefeld fokussiert und sehen, wie die Werte automatisch ausgef\u00fcllt werden. <\/p>\n

    Sie k\u00f6nnen das Beispiel hier herunterladen.<\/a><\/p>\n

    <\/a>Validierung des Bildschirmablaufs<\/h2>\n

    Mit Justinmind k\u00f6nnen Sie ein mehrstufiges Formular unter Verwendung von Variablen und Screenflow-Validierung erstellen und simulieren. In diesem Beispiel lernen Sie, wie Sie ein mobiles Eingabeformular mit mehreren Bildschirmen erstellen k\u00f6nnen. Auf dem letzten Bildschirm sieht der Benutzer eine Zusammenfassung aller Details, die er ausgef\u00fcllt hat. <\/p>\n

    Um ein mehrstufiges Formular in Ihrem Prototyp zu designen, f\u00fchren Sie die folgenden Schritte aus:<\/p>\n

    Design der Bildschirme<\/h3>\n
      \n
    1. Erstellen Sie einen neuen Prototyp mit zwei Bildschirmen.<\/li>\n
    2. Ziehen Sie auf dem ersten Bildschirm drei Texte und nennen Sie sie „Benutzername“, „E-Mail-Adresse“ und „Passwort“.<\/li>\n
    3. Ziehen Sie ein Eingabe-Textfeld unter jedes Textfeld, insgesamt sollten es drei sein.<\/li>\n
    4. F\u00fcgen Sie in der unteren rechten Ecke des Bildschirms eine Schaltfl\u00e4che hinzu, mit der Sie zum n\u00e4chsten Bildschirm navigieren k\u00f6nnen.<\/li>\n
    5. Gehen Sie zu Bildschirm 2 und f\u00fcgen Sie die gleichen Textfelder mit den Eingabetextfeldern unter jedem Text hinzu.<\/li>\n
    6. Gehen Sie zur Palette Variablen und f\u00fcgen Sie drei Variablen hinzu, eine f\u00fcr jedes Eingabefeld.<\/li>\n<\/ol>\n

      Hinzuf\u00fcgen der Ereignisse<\/h3>\n
        \n
      1. Gehen Sie zu Bildschirm 1 und erstellen Sie ein Ereignis „On Tap“ + „Link To“ und verkn\u00fcpfen Sie es mit Bildschirm
      2. Wiederholen Sie Schritt 2 f\u00fcr die n\u00e4chsten beiden Eingabetextfelder.<\/li>\n
      3. Gehen Sie zu Bildschirm 2 und sehen Sie sich die Palette Variablen an. W\u00e4hlen Sie eine Variable und ziehen Sie sie auf das entsprechende Textelement auf dem Bildschirm. Dadurch wird ein Ereignis „Beim Laden der Seite“ + „Wert setzen“ erzeugt und der Wert des Textelements auf den Wert der Variablen gesetzt. <\/li>\n
      4. Wiederholen Sie Schritt 3, bis jedem Textelement die entsprechende Variable zugewiesen wurde.<\/li>\n
      5. Und das war’s! Klicken Sie auf „Simulieren“ und interagieren Sie mit Ihrem Prototyp. Sie werden sehen, dass Ihre Antworten in der Zusammenfassung auf der letzten Seite erscheinen. <\/li>\n<\/ol>\n

        Sie k\u00f6nnen das Beispiel hier herunterladen.<\/a><\/p>\n

        <\/a>Validierung von Pflichtfeldern<\/h2>\n

        In diesem Beispiel lernen wir, wie Sie Bedingungen verwenden, um ein Eingabeformular zu validieren, damit alle erforderlichen Felder korrekt ausgef\u00fcllt werden.<\/p>\n

        Folgen Sie diesen Schritten, um zu erfahren, wie:<\/p>\n

        Das Design des Formulars<\/h3>\n
          \n
        1. Erstellen Sie einen Prototyp und legen Sie drei Eingabefelder im Canvas an (Sie finden die Eingabefelder in der Symbolleiste im Men\u00fc mit dem Plus-Symbol).<\/li>\n
        2. Weisen Sie in der Palette Eigenschaften jedem Eingabetextfeld einen Platzhalterwert von „Vorname“, „E-Mail*“ und „Telefonnummer*“ zu. Sie k\u00f6nnen den Platzhaltertext in der Palette Eigenschaften definieren.\n
          Hinweis:<\/strong> In die Eingabefelder, die das Zeichen ‚*‘ enthalten, muss der Benutzer Text eingeben, um das Formular auszuf\u00fcllen. Beachten Sie au\u00dferdem, dass das E-Mail-Feld das Format „xxx@xxx“ erfordert. <\/div>\n<\/li>\n
        3. Erstellen Sie ein Schaltfl\u00e4chen-Widget am unteren Rand von Bildschirm 1.<\/li>\n
        4. Gehen Sie zu Bildschirm 2 und erstellen Sie eine „Erfolgsmeldung“, um den Benutzer dar\u00fcber zu informieren, dass er seine Daten erfolgreich eingegeben hat.<\/li>\n<\/ol>\n

          Hinzuf\u00fcgen der Ereignisse<\/h3>\n

          Wir haben ein statisches Eingabeformular erstellt. Jetzt f\u00fcgen wir mit Hilfe von Bedingungen Ereignisse hinzu, um unser Formular interaktiv zu machen und festzustellen, welche Felder ausgef\u00fcllt werden m\u00fcssen, um erfolgreich zum n\u00e4chsten Bildschirm zu gelangen. <\/p>\n

            \n
          1. W\u00e4hlen Sie die Schaltfl\u00e4che in Bildschirm 1 und gehen Sie zur Palette Ereignisse. F\u00fcgen Sie eine Aktion „Bei Klick“ + „Stil \u00e4ndern“ hinzu und w\u00e4hlen Sie das „E-Mail*“ Eingabe-Textfeld. W\u00e4hlen Sie die Optionen f\u00fcr die Rahmen- und Textfarbe aus dem Dropdown-Men\u00fc und setzen Sie sie auf die aktuelle Farbe des Eingabetextfelds. Klicken Sie dann auf „OK“, um den Dialog zu verlassen. Dadurch \u00e4ndert sich das Aussehen des Eingabetextfelds so, dass es in seiner Standardfarbe erscheint, wenn der Benutzer die richtigen Informationen eingegeben hat. \"Stil<\/li>\n
          2. Gehen Sie zur\u00fcck zur Palette Ereignisse und klicken Sie auf den Text „Bedingung hinzuf\u00fcgen“ \u00fcber dem Ereignis, das Sie gerade erstellt haben. F\u00fchren Sie im Modul f\u00fcr bedingte Ausdr\u00fccke die folgenden Schritte aus, um die Bedingung zu erstellen:
            \n\"interaktive-Prototypen-Eingabeformular-Ausdruck-1\"
            \n1.<\/strong> Ziehen Sie die Textfunktion Regul\u00e4rer Ausdruck auf das erste Leerzeichen des Ausdrucks.
            \n2.<\/strong> Ziehen Sie das Postleitzahlen-Eingabetextfeld aus dem Dialog Canvas oder aus der Dialogkontur in den angezeigten Bereich.
            \n3.<\/strong> In das zweite Feld ziehen Sie die Konstante Postleitzahl. Klicken Sie auf „OK“, um die Erstellung der Bedingung abzuschlie\u00dfen. <\/li>\n
          3. Sehen Sie sich die Ereignisse an, die Sie gerade erstellt haben, und klicken Sie auf den Text „Sonst“. F\u00fcgen Sie eine weitere Aktion „Bei Klick“ + „Stil \u00e4ndern“ hinzu und w\u00e4hlen Sie erneut das „Postleitzahl*“ Eingabefeld und w\u00e4hlen Sie die Optionen Rahmenfarbe und Textfarbe aus dem Dropdown-Men\u00fc. \u00c4ndern Sie dieses Mal den Stil des Rahmens und des Textes in Rot. Der rote Stil zeigt dem Benutzer an, dass das Eingabefeld f\u00fcr die Postleitzahl nicht korrekt ausgef\u00fcllt wurde. \"\u00c4ndern<\/li>\n
          4. Wiederholen Sie die Schritte 1-3 f\u00fcr das andere erforderliche Eingabefeld (Telefonnummer). Denken Sie daran, die Komponenten im Expression Builder und in den Input Text Fields entsprechend zu \u00e4ndern. <\/li>\n
          5. Sobald Sie Ereignisse f\u00fcr beide erforderlichen Felder haben, f\u00fcgen Sie der Schaltfl\u00e4che ein weiteres Ereignis hinzu. Erstellen Sie ein Ereignis „Bei Klick“ + „Navigieren zu“ und w\u00e4hlen Sie dann Bildschirm 2. <\/li>\n
          6. Klicken Sie auf den Text „Bedingung hinzuf\u00fcgen“ f\u00fcr dieses Ereignis. F\u00fcgen Sie den folgenden Ausdruck hinzu: \"Bedingung\n
            Hinweis:<\/strong> Die Bedingung muss genau diesem Bild entsprechen, damit das Ereignis korrekt ausgel\u00f6st wird.<\/div>\n<\/li>\n<\/ol>\n

            Und das war’s! Klicken Sie auf „Simulieren“, um mit Ihrem Eingabeformular in Ihrem Prototyp zu interagieren und es zu genie\u00dfen. <\/p>\n

            Sie k\u00f6nnen das Beispiel hier herunterladen.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

            Mit Justinmind k\u00f6nnen Sie interaktive Formulare entwerfen, um Benutzereingaben zu simulieren, z. B. Registrierungs-, Anmelde- und Suchformulare. Ein Formular erstellen Um ein Formular in Justinmind zu…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8558],"tags":[],"class_list":["post-129003","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-formulare-und-daten-de"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129003"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129003"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129003\/revisions"}],"predecessor-version":[{"id":129221,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129003\/revisions\/129221"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}