Lektion 14 - weitere Formularfelder

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 14 - weitere Formularfelder

Beitrag von Admin » Di 19. Aug 2014, 11:26

Formulare mit Auswahloptionen

Um ein Feedback zu bekommen, bietet ein Memo-Feld einem Besucher sich ganz ausführlich und individuell zu deiner Seite zu äußern. Das ist eine super Sache ... aber auch sehr zeitintensiv - für den Besucher zu schreiben und für dich zum Auswerten.

Möchtest du die Meinungen deiner Leser auswerten, ist es einfacher dem Leser mehrere Optionen vorzugeben, aus denen er auswählen kann, was seiner Meinung entspricht.

Auswahloptionen kannst du über ein Formular in verschiedenen Formen darstellen.
Auswahllisten

Dies sind Drop-down-Listen, aus denen sich dein Leser eine Option aussuchen kann. z.B. Eine Auswahl an Getränken. Welches Getränk möchte dein Kunde bestellen?

Auswahlliste Getränke
Auswahlliste für Getränke

So erstellst du eine Auswahlliste:

[col]Zuerst definierst du natürlich dein Formular. Klicke auf Symbol Formular - Formular definieren. Fülle den Assistenten aus und bestätige ihn mit OK.

Schreibe zunächst deinen Text, worum es geht. Wenigstens eine Überschrift innerhalb deines Formularfeldes.

Klicke in der Symbolleiste auf Formular - Auswahlliste.

Schreibe deinen Listennamen und klicke auf "Gruppe hinzufügen".|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]


[col]Die Gruppe wird im Listenfeld angelegt.

Klicke nun auf Option hinzufügen|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Schreibe in dein Textfeld den Namen der Option. z.B. Kaffee.

Der Assistent führt die Option Kaffee unter den Oberbegriff: Warme Getränke in einer Baumdarstellung ein.

Klicke erneut auf Option hinzufügen und trage den Text Tee ein. KompoZer fügt Tee als weitere Option in der Baumdarstellung ein.

Klicke erneut auf die Option hinzufügen und trage den Text Capuccino ein. Auch diese Option wird im Listenfeld eingetragen.

Über die Schaltflächen "Nach oben" und "Nach unten" kannst du deine Optionen nachträglich noch sortieren.

Fertig ist deine Auswahlliste. Bestätige den Assistenten mit OK.

Speichere das Formular. In der Browservorschau kannst du deine Liste nun ausprobieren.

Checkboxen

[col]Bei einer Optionsliste oder Auswahl kann ein Besucher mehrere Optionen wählen. Für diese Abfrage verwendet man Checkboxen. Mehrere Checkboxen können angeklickt werden: Optionsliste. Um anzuzeigen, dass es sich um unterschiedliche Aussagen zu einem Thema handelt, legst du zunächst einen Feldbereich an -
eine Legende
Warmgetränke
Klicke auf Symbolleiste Formular - Feldbereich definieren.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Die Legende markiert den Bereich mit einer dünnen Linie und einer Legenden-Überschrift. Schreibe hier den Oberbegriff zu deiner Optionsauswahl ein. Die Legendenausrichtung sagt aus, wo die Beschriftung angelegt wird. Standard ist links oben. Klicke nun in deinen Feldbereich und wähle in der [b]Symbolleiste Formular - Formularfeld[/b]. Ändere den Formulartyp in Checkbox.[popup]http://kompozer-8.kreativ-workshops.net/forties/screens/lektion14-4.png[/popup]

Der Feldname muss bei allen Optionen, die du anlegst, gleich sein, sodass die Zuordnung passt.

Der Wert ist die Aussage, die vom Besucher getroffen wird. Hier also Kaffee.

Du kannst natürlich auch noch einen Tab-Index setzen. Bei einer umfangreichen Auswahlliste ist dies jedoch eher hinderlich, da der Besucher sich durch die komplette Liste tabben muss, um endlich zum Abschicken-Button zu gelangen. Deshalb ist dein Tab-Index bei Auswahllisten eher unnötig. Aktivierst du die Option "Anfangs angehakt", wird automatisch der Kaffee angehakt. Dein Besucher muss diese Checkbox anklicken, um den Haken erst einmal herauszunehmen. Auch hier die Empfehlung: nicht aktivieren. Bestätige den Assistenten mit OK.

Im Formular steht nun eine leere Box, die man anklicken kann. Aber dein Besucher weiß noch nicht, was er da überhaupt anklickt. Deshalb musst du noch eine Beschriftung hinzufügen. Setze sie vor das Kästchen oder dahinter. Füge auch für Tee und Capuccino eine Checkbox hinzu. Fertig ist deine Checkbox-Auswahl. Speichere deine Seite und probiere deine Seite in der Browservorschau aus.

Radiobutton

[col]Radio-Button verwendet man für die Abfrage ja oder nein, entweder oder ... es ist immer nur eine Option wählbar - also keine Mehrfachauswahl: Radiobutton. Wie zuvor erstellst du zunächst eine Legende. Mit der Auswahlüberschrift.
Auch für die Radiobuttons musst du eine Beschriftung anlegen.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Um einen Radiobutton anzulegen, klickst du in der Symbolleiste auf Formular - Formularfeld. Den Feldyp änderst du auf Radiobutton. Lege den Gruppennamen fest. Die Radiobuttons für deine Abfrage müssen alle den gleichen Gruppennamen besitzen, sonst funktioniert es nicht. Der Feldwert gibt die Auswahl für diesen Radiobutton an. Klickt dein Besucher auf diesen Button, entscheidet er sich für Tee.

Auch hier hast du wieder die Möglichkeit einen Tab-Index zu setzen. Aber auch hier gilt ... möchtest du wirklich deinem Besucher zumuten alle Optionen anspringen zu müssen, nur um zum Abschicken-Button zu gelangen? Bestätige den Assistenten mit OK um den einen Radiobutton zu erstellen. Wiederhole den Vorgang für jede Option, die du anlegen möchtest. In der Browservorschau kannst du deine Auswahlliste mit Radiobuttons ausprobieren.

Möchtest du eine der Optionen verändern, musst du sie nicht komplett neu machen. Klicke einfach auf den Button, die Checkbox oder die Liste, die du bearbeiten möchtest, und rufe das Formularfeld über die Symbolleiste Formular - Feldtyp oder Formular - Auswahlliste wieder auf.

[col]Für jedes Formular benötigst du natürlich einen Abschicken-Button. Zusätzlich zum Abschicken kannst du einem Besucher auch die Möglichkeit geben, seine Eingabe wieder zu löschen. Dazu gibt es den Reset-Button.

So wie der Absende-Button ist auch der Reset-Button mit einer automatischen Funktion belegt. Über Symbolleiste - Formularfeld rufst du den Assistenten auf. Ändere den Feldtyp in Reset-Button.|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]

Der Feldname muss reset lauten. Im Feldwert trägst du die Beschriftung des Buttons ein. Mit einem Klick auf OK ist er schon fertig. Über die Browservorschau kannst du den Reset-Button auf deinem Formular ausprobieren. Die Buttons Reset und Abschicken beziehen sich immer nur auf die Inhalte des definierten Formularbereiches, in dem sie enthalten sind.

Alle Elemente kannst du nun noch per CSS formatieren. Hier findest du eine Übersicht aller Auswahlarten -> Lösung

Übung

Um das Ganze so richtig zu üben, erstellst du eine kleine Umfrage. Du möchtest eine Marktforschung über das Leseverhalten deiner Besucher durchführen. Hierzu legst du ein Umfrageformular an.

Was willst du wissen?
  1. Wie alt sind deine Leser? - gib Felder mit Altersangaben von - bis vor (Radiobutton)
  2. In welchem Bundesland leben sie? - gib eine Auswahlliste vor (Auswahlliste)
  3. Was lesen deine Besucher - Gib hier Themenfelder vor wie Krimi, Roman, Fantasie, Comic ... (Checkbox)
  4. Wann lesen deine Besucher - Gib eine Mehrfachauswahl vor, z.B.: Vor dem Einschlafen, Am Nachmittag, Am Abend statt Fernsehen, am Wochenende, im Urlaub ...
  5. Kaufen deine Besucher Bücher oder leihen sie die Bücher? (Radiobutton)
  6. Wie viele Bücher besitzen deine Besucher - gib mehrere von - bis Angaben an (Radiobutton)
Das Formular soll dir per E-Mail zugeschickt werden und der Besucher soll die Möglichkeit haben alle Angaben zu löschen.

So könnte die Lösung aussehen: Lösung - Umfrage

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 14 - weitere Formularfelder

Beitrag von kp2709 » Fr 12. Sep 2014, 20:22

hi ihr lieben,
nun könnt ihr an dieser umfrage teilnehmen :lol: :oops: :roll: :oops: :lol:
http://reikuma27.reikuma.bplaced.de/web ... frage.html

lg
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 14 - weitere Formularfelder

Beitrag von anke » Sa 13. Sep 2014, 06:28

hallo Kurt

super, jetzt kannst du auch deine Umfragen gestalten ;)

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 14 - weitere Formularfelder

Beitrag von Hellriders » Do 5. Nov 2015, 18:01

So meine Umfrage kann gestartet werden, :D

Wie kann man es Überprüfen das überall etwas ausgewählt wurde,
da der Absende Button auch funktioniert wenn nichts audgewählt wird. :o

Umfrage

gruß micha

camouflage1984
Beiträge: 243
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 14 - weitere Formularfelder

Beitrag von camouflage1984 » Fr 6. Nov 2015, 04:15

Hallo Micha

Hab an der Umfrage teilgenommen :D
Hellriders hat geschrieben:Wie kann man es Überprüfen das überall etwas ausgewählt wurde,
Das kannst du mit Javascript oder PHP machen.

Hier mit Javascript und
hier mit PHP.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: Bing [Bot] und 1 Gast