Präsentation vom 11. 01. 2010 – Übersicht über Formulare und ihre Verwendung. Zusammen mit den gedruckten Unterlagen: http://www.slideshare.net/noelboss/documents

1. connected
Formulare
© 2010 by Noël Bossart

2. Formulare
Formulare werden eingesetzt, um vom Benutzer
Informationen abzufragen und (in den meisten Fällen) an
den Server zu senden. Praktisch alle Webseiten setzen
Formulare ein.
Modernes Webdesign 7.3.7

3. Formulare
<form method='get' action='results.php'>
! <fieldset id="suche" class="">
! ! <legend>Suche</legend>
! ! <label for='q'>Suchen: </label>
! ! <input id='q' name='q' type='text' value='' />
! ! <input type='submit' value='suchen' />
! </fieldset>
</form>

4. <form />
<form action="ziel.html" method="get">
action = Zielseite:
ziel.html
method = Übertragungsart:
get: Daten werden über die URL übermittelt
post: Daten werden durch den Browser mit der Seitenanfrage
übermittelt

5. method get
<form action="ziel.html" method="get">
Vorteile: Solche Abfragen können per Link verschickt, oder als
Bookmark gespeichert werden
Nachteile: Die Struktur des Formulars ist offen-gelegt und
Manipulationen werden damit erleichtert
Gebrauch: Suchen, Filter, alles was gespeichert oder versendet
werden soll

6. method get
<form action="ziel.html" method="get">
Vorteile: Solche Abfragen können per Link verschickt, oder als
Bookmark gespeichert werden
Nachteile: Die Struktur des Formulars ist offen-gelegt und
Manipulationen werden damit erleichtert
Gebrauch: Suchen, Filter, alles was gespeichert oder versendet
werden soll

7. method get
<form action="ziel.html" method="get">
Vorteile: Solche Abfragen können per Link verschickt, oder als
Bookmark gespeichert werden
Nachteile: Die Struktur des Formulars ist offen-gelegt und
Manipulationen werden damit erleichtert
Gebrauch: Suchen, Filter, alles was gespeichert oder versendet
werden soll

8. method post
<form action="ziel.html" method="post">
Vorteile: Die Formular-Parameter sind nicht offen über die URL
zugänglich und es können mehr und komplexere Daten übertragen
werden
Nachteile: Abfragen welche über ein solches Formular gemacht
werden können nicht als Bookmark gespeichert oder an Freunde
versendet werden
Gebrauch: Anmeldeformulare, Bestellungen, sensible Daten

9. method post
<form action="ziel.html" method="post">
Vorteile: Die Formular-Parameter sind nicht offen über die URL
zugänglich und es können mehr und komplexere Daten übertragen
werden
Nachteile: Abfragen welche über ein solches Formular gemacht
werden können nicht als Bookmark gespeichert oder an Freunde
versendet werden
Gebrauch: Anmeldeformulare, Bestellungen, sensible Daten

10. method post
<form action="ziel.html" method="post">
Vorteile: Die Formular-Parameter sind nicht offen über die URL
zugänglich und es können mehr und komplexere Daten übertragen
werden
Nachteile: Abfragen welche über ein solches Formular gemacht
werden können nicht als Bookmark gespeichert oder an Freunde
versendet werden
Gebrauch: Anmeldeformulare, Bestellungen, sensible Daten

11. <form />
Zu beachten ist, dass bei XHTML strict nur Block
Elemente im Form-Tag stehen dürfen!
<form action="ziel.html" method="post">
<input type="submit" value="senden" />
</form>

12. <form />
Zu beachten ist, dass bei XHTML strict nur Block
Elemente im Form-Tag stehen dürfen!
<form action="ziel.html" method="post">
<p>
<input type="submit" value="senden" />
</p>
</form>

13. Elemente
input type=”text”
input type=”radio”
input type=”checkbox”
input type=”submit”
button
select / option
textarea
label

14. Elemente
Wie wir gesehen haben, gibt es vom Tag input mehrere
Ausprägungen welche über das Type Attribut gesteuert
werden. Damit diese Elemente über CSS einzeln
angesteuert werden, empfehle ich das Setzen einer
Klasse pro Element welche dem Type entspricht:
<input type="text" class="text" ... />
<input type="radio" class="radio" ... />
<input type="checkbox" class="check" ... />
<input type="button" class="button" ... />
<input type="submit" class="button submit" ... />

15. Formular: label’s
Der Einsatz von Label’s ist sehr wichtig um die Usability zu erhöhen und
die Semantik des Formulars zu gewährleisten. Damit werden
Beschreibungstexte mit dem eigentlichen Eingabeelement verbunden.
Durch einen Klick auf das Label, wird das Eingabefeld angewählt:
<label for=”s”>Suchen:</label>
<input id=”s” name=”suchbegriff” value=”” />

16. Radios
Radios – und manchmal auch Checkboxen – sind
Eingabefelder, welche in Gruppen vorkommen. Man
kann damit Abfragen in einer ODER Beziehung tätigen
da immer nur eine Möglichkeit pro Radio-Gruppe
wählbar ist. Die Gruppe wird über das name Attribut
gebildet.
<input type="radio" name="gender" value="m" />
<input type="radio" name="gender" value="f" />

17. Radios
Wenn ein Radio ausgewählt ist, hat ist das Attribut
checked gesetzt. Man beachte das in XHTML Attribute
nicht einzeln stehen dürfen und daher checked=”checked”
geschrieben wird. In HTML darf checked als allein
stehendes Attribut vorkommen.
<input type="radio" name="gender" value="m"
checked="checked" />
<input type="radio" name="gender" value="f" />

18. Checkboxen
Auch Checkboxen kommen oft in Gruppen vor – können aber im
Gegensatz zu Radios auch alleine stehen. Die Radios lassen
Mehrfachauswahlen – also UND Verknüpfungen – zu. Sie sind
ebenfalls über das name Attribut miteinander verbunden. Auch
Checkboxen haben das Attribut checked welches angibt, ob eine
Checkbox ausgewählt ist. Da jedoch mehrere Auswahlen
gleichzeitig vorkommen können ist es wie ein Array aufgebaut:
<input type="checkbox" name="hobby[kino]" value="true" />
<input type="checkbox" name="hobby[tanzen]" value="true" />
<input type="checkbox" name="hobby[fussball]" value="true" />

19. Senden...
Das Formular wird meist mittels eines Buttons
abgesendet. Dieser Button (es können noch weitere
Buttons vorhanden sein, welche nicht den Senden-
Event auslösen) hat das Type-Attribut submit:
<input type="submit" value="suchen" />

20. Serverseite
Auf dem Server werden die Werte je nach Sende-Methode in einem POST oder
einem GET Array ankommen. Bei PHP ist dies das $_POST und das $_GET
Array. Die Indizes dieser Arrays bilden die name Attribute der Formular-
Elemente. Das name Attribut ist also im Prinzip der Name der Variabel für die
Serverseite und das value Attribut enthält den Variabeln-Wert.

21. Serverseite
Auf dem Server werden die Werte je nach Sende-Methode in einem POST oder
einem GET Array ankommen. Bei PHP ist dies das $_POST und das $_GET
Array. Die Indizes dieser Arrays bilden die name Attribute der Formular-
Elemente. Das name Attribut ist also im Prinzip der Name der Variabel für die
Serverseite und das value Attribut enthält den Variabeln-Wert.
Array(
[username] => max
[hobbies] => Array(
[kino] => true
)
)

22. Aufgabe
Erstellen eines Formulares für eine Medien-Bibliothek:
- Name des Mediums
- Art des Mediums (DVD, Buch, Blueray)
- Beschreibung (Kurztext)
- Erscheinungsjahr
- Sprache
- Genre
- Bewertung (0-5)