Formulare einfügen in Microsoft Expression Web

Mit Hilfe von Formularen können Sie den Besuchern einer Webpage die Möglichkeit zur Interaktion geben. Dabei können die Websitebesucher über Optionsfelder, Kontrollkästchen und Dropdown-Listen rasch ihre Eingaben tätigen. Ein Online-Formular lässt sich genauso gestalten, wie ein gedrucktes Formular. Der Vorteil von Online-Formularen ist, dass diese vom Websitebesucher elektronisch befüllt und sofort an den Empfänger verschickt werden können.

Von welchen Technologien können Formulare abhängig sein?

Je nach dem welche Funktionen ein Formular erfüllen soll, ist zu prüfen, ob dafür besondere Servertechnologien vorausgesetzt werden. Solche Technologien könnten beispielsweise sein:

FrontPage-Servererweiterungen
Microsoft SharePoint Team Services
Internet Server Application Programming Interface (ISAPI)
Netscape Server Application Programming Interface (NSAPI)
Common Gateway Interface (CGI)
Active Server Pages (ASP)

Informieren Sie sich, wenn nötig, bei Ihrem Webserveradministrator oder Ihrem Internet Service Provider, welche Technologien auf dem Webserver, auf dem die Website abgelegt werden soll, zur Verfügung stehen.

Wofür Formulare eingesetzt werden?

Es gibt zahlreiche Einsatzmöglichkeiten für Formulare. Hier ein paar Beispiele, wofür Online-Formulare häufig verwendet werden. Zur Abfrage von Kontaktinformationen, zum Angebot von Suchfeldoptionen, um Bestellungen oder Anfragen in strukturierter Form zu erhalten, zur Durchführung von Quiz und Umfragen, für Onlineregistrierungen, zum Login in geschützte Bereiche oder um Anmeldeinformationen, zum Beispiel für einen Newsletter, einzutragen.

Woraus besteht ein Formular?

Für ein Formular sind mindestens ein Eingabefeld und die dazu gehörende Schaltfläche "Senden" erforderlich. Diese befinden sich in dem so Genannten Container. Ein Formular kann aber auch aus einer mehrseitigen Eingabemaske mit vielen Radiobuttons, Eingabefeldern, Kontrollkästchen und Dropdown-Listen bestehen.

Wie wird ein Formular eingefügt?

Um ein Formular einzufügen, prüfen Sie bitte, ob der Aufgabenbereich "Toolbox" geöffnet ist. Standardmäßig befindet sich dieser Aufgabenbereich oben rechts neben dem Dokumentenfenster. Sollte dieser Aufgabenbereich nicht aktiviert sein, dann können Sie ihn über den Menübefehl Aufgabenbereiche -> Toolbox öffnen. Scrollen Sie in dem Aufgabenbereich "Toolbox" bis zu dem Abschnitt "Formularsteuerelemente" und ziehen Sie mit gedrückter Maustaste "Formular" an die gewünschte Stelle im WYSIWYG-Bereich, an welcher das Formular erscheinen soll.

Darstellung: Formular einfügen

Schauen Sie in den Quellcodebereich, dort sehen Sie, dass der Container für das Formular im Quellcode erstellt wurde. <form method="post" action=""> </form> Hinter ein Formular lässt sich auch ein Bild legen. Dazu wird der Formular-Container am besten in eine HTML-Tabelle oder besser noch in eine einzelne Zelle eingebaut, der dann ein entsprechendes Hintergrundbild zugewiesen werden kann. Die einzelnen Formularfelder können Sie ebenso per Drag & Drop aus dem Aufgabenbereich in den Container in der Entwurfsansicht einfügen. Wenn Sie das Dialogfenster "Formulareigenschaften öffnen wollen, dann klicken Sie entweder innerhalb des Formularcontainers mit der rechten Maustaste und wählen die entsprechende Option oder zeigen Sie oben in der Leiste Direktauswahl von Tags mit der Maus auf die Schaltfläche <form>, klicken auf den Pfeil der Dropdown-Liste und wählen Sie über das Ausklappmenü die Option "Formulareigenschaften" aus.
In diesem Dialogfenster können Sie dem Formular einen Namen geben, den Typ der Formularbehandlungsroutine auswählen, einstellen ob die Formulardaten an eine Datenbank gesendet werden sollen sowie viele weitere Einstelloptionen vornehmen. Es ist üblich in Online-Formularen durch Drücken der Tabulator-Taste von einem Formularfeld in das nächste zu springen. Normalerweise entspricht die Sprung-Reihenfolge der Tab-Taste genau der Reihenfolge der angeordneten Felder innerhalb des Containers von oben nach unten. Möchten Sie jedoch eine andere Reihenfolge programmieren, dann können sie in die Felder "Aktivierreihenfolge", die sich in jedem Dialogfenster für die Eigenschaften eines Formularsteuerelementes befinden, jeweils die entsprechende Stationszahl eintragen, um den Benutzer des Formulars nach dieser Reihenfolge zu leiten.

Welche Formularfeldtypen gibt es?

In dem Aufgabenfenster "Toolbox" stehen unter Formularsteuerelemente die nachfolgend beschriebenen Formularfeldtypen zur Auswahl bereit.

Beschriftung

Dieser Typ dient dazu ein Eingabefeld und dessen Beschreibung zu gruppieren, damit der Zugriff auf das Formular erleichtert wird.

Dropdownfeld

Hat man eine Liste von Optionen aus denen der Benutzer auswählen kann, dann werden Dropdown-Listen zur Verfügung gestellt. Dabei hat man die Auswahl, ob man dem Anwender eine Mehrfach- oder nur eine Einzelauswahl zur Verfügung stellt.

Eingabefelder

Mit dem Eingabefeld absenden (type="submit") wird ein Button erstellt auf den der Benutzer zum Absenden der Daten klicken kann. Über einen Doppelklick in der Entwurfs-Ansicht auf dieses Eingabefeld wird das Dialogfenster "Schaltflächen-Eigenschaften" geöffnet. Darin kann die Beschriftung der Schaltfläche geändert werden.
Mit Hilfe des Eingabefeldes ausblenden (type="hidden") kann ein Wert eingetragen werden, der vom Formularbenutzer beim Absenden nicht verändert werden kann.
Mit dem Eingabefeld Bild (type="image") lässt sich eine Sendeschaltfläche als Bild darstellen.
Das Eingebefeld Datei (type="file") dient zur Auswahl einer Datei, die dann mit dem Formular versendet werden kann.
Das Eingabefeld Kennwort (type="password") bietet die Möglichkeit ein Kenn- oder Passwort einzugeben. Dieses Eingabefeld sorgt für Sicherheit, weil bei der Eingabe im Browser statt der Zeichen nur Sternchen oder dicke Punkte angezeigt werden.
Der Anwender kann mit Hilfe von Kontrollkästchen (type="checkbox") verschiedene zur Auswahl stehende Punkte anhaken. Zum Beispiel kann man hier die Zahlungsart in einem Bestellformular zur Auswahl stellen oder damit die die Allgemeinen Geschäftsbedingungen akzeptieren.
Mit einem Optionsfeld (type="radio"), der wegen seines Typs auch Radiobutton genannt wird, kann der Benutzer eine Auswahl unter vorhandenen Angaben vornehmen. Ein gutes Beispiel dafür ist die Auswahl für die Anrede.
Mit einen Klick auf die Schaltfläche (type="button") kann ein onClick-Ereignis ausgelöst werden, welches als Scriptcode behandelt werden kann.
Die Funktion des Eingabefeldes Text (type="text") ist nahe liegend. Hier kann der Anwender einen Kommentar, eine Nachricht oder einen anderen Freitext eintragen.
Zwar werden die Formulardaten erst mit einem Klick auf den Senden-Button verschickt. Doch manche Anwender möchten trotzdem zwischendurch die eingegebenen Daten löschen, dafür kann das Eingabefeld Zurücksetzen (type="reset") verwendet werden.

Erweiterte Schaltfläche

Dieses Formularfeldelement kann weiter angepasst werden und HTML-Inhalt enthalten. Um die Beschriftung dieser Schaltfläche zu ändern, doppelklicken Sie in der Entwurfsansicht auf den Text "Schaltfläche" und können dann, den auf der Schaltfläche angezeigten Text, ändern.

Weiterlesen: ⯈ Praktische Bearbeitungs- und weitere Funktionen

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project