Erstellen von Webformularen

In Webdokumenten bieten Formulare Benutzern die Möglichkeit, Informationen eines bestimmten Typs an einen Webserver zu senden, die anschließend in bestimmter Weise verarbeitet werden. Ein Formular besteht aus einer Reihe von Steuerelementen, wie z.B. Textfeldern, Dropdownmenüs und Schaltflächen, mit deren Hilfe Benutzer Informationen eingeben. Üblicherweise dient eine Schaltfläche als “Übertragungsschaltfläche”, d.h. der Benutzer klickt auf diese Schaltfläche, um die Informationen an den Server zu senden. Genauer gesagt werden die Formulardaten – diese setzen sich aus den vom Benutzer eingegebenen Daten sowie den identifizierenden Namen der Formularsteuerelemente zusammen – an einen Formularhandler übergeben, ein Serverprogramm oder Skript, das die Formulardaten als Eingabe akzeptiert und diese gemäß den Vorgaben des Webentwicklers weiterverarbeitet. Der Formularhandler wird im Aktionsattribut des Formulars festgelegt.

Beispiel eines Webformulars

Als Beispiel können Sie sich ein Formular auf einer Suchseite vorstellen – wie das nachstehende einfache Formular, das ein Dropdownmenü, ein einzeiliges Textfeld und eine Schaltfläche für die Datenübermittlung umfasst:

Suchen in:

Suchen nach:

Alle Kategorien Support Produkte Bestellen Firma Nachrichten

Jedes Steuerelement auf einem Formular verfügt über einen Namen und einen Wert. Namen werden durch den Autor zugewiesen, während Werte durch den Benutzer bereitgestellt werden (entweder direkt, wenn der Benutzer Daten in ein Textfeld eingibt; oder indirekt, wenn der Benutzer ein Element in einem Dropdownmenü auswählt oder auf eine Schaltfläche klickt). Im obigen Suchformular könnte der Name des Dropdownmenüs “area”, der des Textfeldes “query” und der Name der Schaltfläche “button” lauten.

Wenn der Benutzer einen Suchbereich auswählt, einen Suchbegriff eingibt und auf die Schaltfläche klickt, sendet der Browser die Formulardaten an den Formularhandler, der z.B. “http://deepsearch.namo.com/cgi-bin/mclient.cgi” lauten könnte. Die Formulardaten bestehen aus Name/Wert-Paaren für jedes Steuerelement im Formular. Wenn der Benutzer beispielsweise den Suchbereich “Support” auswählt und im Textfeld den Begriff “WebEditor” eingibt, werden folgende Formulardaten gesendet:

area = Support
query = WebEditor
button = Suche

In diesem Beispiel wird die Anforderung an das Programm mclient.cgi übergeben, das anschließend in den Dokumenten des angegebenen Bereichs nach dem eingegebenen Begriff sucht. Nach Abschluss der Suche generiert mclient.cgi ein HTML-Dokument mit einer Liste der Suchergebnisse, und der Server gibt dieses Antwortdokument an den Browser zurück.

Schritte zur Formularerstellung

Um in Namo WebEditor ein Webformular zu erstellen, fügen Sie einfach eines oder mehrere Formularsteuerelemente in ein Dokument ein. Sie müssen das <form>-Tag hierbei nicht explizit angeben, Namo WebEditor fügt per Voreinstellung automatisch <form>-Tags um die eingefügten Steuerelemente ein. Wenn im Bearbeitungsmodus die Anzeige von speziellen Tag-Markierungen aktiviert ist, wird das Formular mit einer gestrichelten Umrisslinie angezeigt (siehe Beispiel unten). (Zum Ein-/Ausblenden der speziellen Tag-Markierungen klicken Sie auf der Standardsymbolleiste auf Namo Web Editor button show hide tag marks Erstellen von Webformularen Spezielle Tag-Markierungen ein-/ausblenden.)

Namo Web Editor 5.interaction.forms Erstellen von Webformularen

Im Bearbeitungsmodus wird ein Formular mit einer gestrichelten Umrisslinie angezeigt

Um sicherzustellen, dass ein neues Formularsteuerelement dem richtigen Formular angehört, muss es innerhalb der Umrisslinie des Formulars eingefügt werden.

Nach dem Einfügen des Formularsteuerelements müssen Sie im Dialogfeld Formulareigenschaften die Formularaktion festlegen.

Namo Web Editor icon tip Erstellen von WebformularenSelbst wenn auf dem Webserver kein Skript oder Programm für die Formularverarbeitung zur Verfügung steht, können Sie in Ihrer Website Formulare verwenden, indem Sie eine E-Mail-Adresse als Formularhandler angeben. Wenn Sie einen mailto-Link wie z.B. “mailto:bob@namo.com” als Formularaktion festlegen, senden die meisten modernen Browser die Formulardaten an die angegebene E-Mail-Adresse. Sie könnten so z.B. ein Formular zum Empfang von Benutzerfeedback erstellen, und das Formular wäre selbst dann nützlich, wenn auf dem Server kein Formularhandler vorhanden ist. Anmerkung: Wenn Sie eine mailto-Aktion verwenden, sollten Sie das Formularattribut Methode auf POST festlegen.

In diesem Abschnitt

Einfügen und Bearbeiten von Formularsteuerelementen

Festlegen einer Formularaktion und weiterer Eigenschaften

Erstellen eines Formulars in einer Tabelle

Erstellen von Webformularen