Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil 1 Seite 3 Seite 3 Inhaltsverzeichnis Teil 2 Seite.

Ähnliche Präsentationen


Präsentation zum Thema: "Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil 1 Seite 3 Seite 3 Inhaltsverzeichnis Teil 2 Seite."—  Präsentation transkript:

1 Formulare in HTML

2 Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil 1 Seite 3 Seite 3 Inhaltsverzeichnis Teil 2 Seite 4 Seite 4 Inhaltsverzeichnis Teil 3 Seite 5 Seite 5 Formulare definieren Seite 6 Seite 6 Eingabefelder Seite 7 Seite 7 Ein einzeiliges Eingabefeld Seite 8 Seite 8 Dateien mit einem Formular verschicken Seite 9 Seite 9 Radiobuttons Seite 10 Seite 10 Radiobuttons

3 Inhalt Teil 2 Seite 11 Seite 11 Checkbuttons Seite 12 Seite 12 Checkbuttons Seite 13 Seite 13 Ausführungsbuttons Seite 14 Seite 14 Manuelle Beschriftung der Buttons Seite 15 Seite 15 Grafische Absendebuttons Seite 16 Seite 16 Anklickbare Buttons Seite 17 Seite 17 Anklickbare Buttons Seite 18 Seite 18 Mehrzeilige Eingabefelder Seite 19 Seite 19 Auswahllisten Seite 20 Seite 20 Auswahlliste

4 Inhalt Teil 3 Seite 21 Seite 21 Auswahllisten Seite 22 Seite 22 Auswahllisten Seite 23 Seite 23 Menüstrukturen Seite 24 Seite 24 Label von Formularelementen Seite 25 Seite 25 Label von Formularelementen Seite 26 Seite 26 Elementgruppen Seite 27 Seite 27 Elementgruppen Seite 28 Seite 28 Übertragung von Formularen Seite 29 Seite 29 Übertragung von Formularen Seite 30 Seite 30 CSS für Formulare

5 Formulare definieren Ein Formular wird mit dem -Tag eingeleitet und durch wieder Geschlossen. Zu den Attributen welche in diesen Tags verwendet werden gehören action=„“ und method=„“. Mit „action“ verweist man auf ein Programm oder Script welche die eingetragenen Daten verarbeiten soll. z.B.:  Inhalt

6 Eingabefelder Es gibt verschiedene Eingabefelder die alle mit dem -Tag erstellt werden. Die einzelnen Typen werden mit dem Attribut type=„“ genauer bestimmt. Es gibt insgesamt 10 verschiedene Typen. text, password, checkbox, radio, submit, reset, file, hidden, image und button z.B: z.B:  Inhalt

7 Ein Einzeiliges Eingabefeld Benutzername: Benutzername:
Passwort: Passwort:  Inhalt

8 Dateien mit einem Formular verschicken datei.html  Inhalt

9 Radiobuttons Definition: Definition: Bei einem Radiobutten Button ist es besonders wichtig ihm einen Namen zuzuweisen, da alle Radiobuttons mit dem selben Namen einer Gruppe angehören von der nur ein einziger ausgewählt werden kann.  Inhalt

10 Radiobuttons Wählen Sie ihr Urlaubsziel: Wählen Sie ihr Urlaubsziel: Mallorca Mallorca Ibiza Ibiza Paris Paris radio.html  Inhalt

11 Checkbuttons Definition: Definition: Auch bei einer Checkbox sollte ein einheitlicher Name für die Gruppe definiert werden. Wählen Sie ihre Urlaubsziele: Wählen Sie ihre Urlaubsziele: Mallorca Mallorca Ibiza Ibiza Paris Paris checkbox.html  Inhalt

12 Checkbuttons Schon im Quelltext können einzelne Checkbuttons Im Voraus aktiviert werden: Wählen Sie ihre Urlaubsziele: Wählen Sie ihre Urlaubsziele: Mallorca Mallorca Ibiza Ibiza Paris Paris checkbox2.html  Inhalt

13 Ausführungsbuttons Es gibt 2 verschiedene ausführungsbuttons: submit_reset.html Die Buttons können auch manuel beschriftet Werden. Dazu muss das Attribut value=„Beschriftung“ hinzugefügt  Inhalt

14 Manuelle Beschriftung der Buttons submit_reset_man.html  Inhalt

15 Grafische Absendebuttons Definition: Definition: image.html  Inhalt

16 Anklickbare Buttons Definition: Definition: Mit dem Attribut value=„…“ lässt sich der Button beschriften. z.B: z.B: Wenn ein Button mit Namen (name=„“) gekennzeichnet worden ist, kann er über JavaScript angesprochen werden. klick.html  Inhalt

17 Anklickbare Buttons Es gibt auch eine neuere Variante von Buttons, die allerdings nicht von älteren Browsern erkannt wird: Beschriftung Beschriftung button.html  Inhalt

18 Mehrzeilige Eingabefelder Definition: Definition: Bei einer „textarea“ können Breite und Höhe angegeben werden: Ihre Meinung… mehrzeiler.html  Inhalt

19 Auswahllisten Definition: … Definition: … Zwischen diesen beiden Tags werden die einzelnen Optionen mit „…Option…“ definiert. „…Option…“ definiert.Beispiel: auswahlliste.html  Inhalt

20 Auswahllisten Quelltext vum Beispiel:  Inhalt

21 Auswahllisten Mit dem Attribut size=„2“ lässt sich die Höhe des angezeigten Bereiches verändern. … … auswahlliste_size.html Jede Option in einer Auswahlliste braucht einen Wert, der beim senden des Formulares übermittelt wird. … … Auch der Tag muss benannt werden um den Wert von einer Liste zuweisen zu können  Inhalt

22 Auswahllisten Wenn man das Attribut multiple in den -Tag einbindet können auch mehrere -Tag einbindet können auch mehrere Optionen ausgewählt werden indem man die „Strg“-Taste gedrückt hält. Möchte man eine Option im Voraus auswählen, so fügt man im entsprechenden -Tag das Attribut selected hinzu.  Inhalt

23 Menüstrukturen Es ist möglich in einer Auswahlliste die einzelnen Optionen zu gliedern. Hierzu verwendet man zu gliedern. Hierzu verwendet man optgroup.html  Inhalt

24 Label von Formularelementen Mit … lassen sich beschreibende Texte und Formularelemente miteinander verbinden, so dass beide beim Senden des Formulars übermittelt werden. Dazu wird zunächst im einleitenden das Attribut for=„“ gesetzt. In den Anführungszeichen muss der selbe Wert stehen, der im zu verknüfenden Formularelement als id=„“ gespeichert wird.  Inhalt

25 Label von Formularelementen Beispiel: Ihr Name: Ihr Name:  Inhalt

26 Elementgruppen Ein Formular kann auch in einzelne Elementgruppen unterteilt werden. elementgruppen.html Hierzu muss jede Gruppe von und eingeschlossen werden. und eingeschlossen werden. Zwischen und kann man eine Überschrift für diese Gruppe schreiben.  Inhalt

27 Elementgruppen

Wer bin ich? Wer bin ich? Vorname, Name: Vorname, Name: -Adresse: -Adresse:
Was will ich Was will ich Pizza Pizza Gyros Gyros Chop Suey Chop Suey Eisbein Eisbein
Bestellung Bestellung
 Inhalt

28 Übertragung von Formularen Formulare werden meistens per übermittelt. Dazu muss man im -Tag beim Attribut action=„“ zwischen den Anführungszeichen den Befehl schreiben. Ich habe ein Beispieldokument angefertigt um gleich zu zeigen wie die übermittelten Eingaben angezeigt werden. form2.html  Inhalt

29 Übertragung von Formularen Die übermittelten Daten des gerade gesehenen Formulars würden in etwa so aussehen: Interessent_Name=Wilfried Olthoff Interessent_Telefon= Interessent_Straße=Eschweg 23 Interessent_Ort=HardingenInteresse_An=Eule  Inhalt

30 CSS für Formulare Auch Formularelemente lassen sich durch Style Sheets verändern. Beispiel: css.html  Inhalt


Herunterladen ppt "Formulare in HTML. Inhalt Teil 1 Seite 1 Seite 1 Titelseite Seite 2 Seite 2 Inhaltsverzeichnis Teil 1 Seite 3 Seite 3 Inhaltsverzeichnis Teil 2 Seite."

Ähnliche Präsentationen


Google-Anzeigen