Lösung HTML Formulare – Unterlagen und Übungen

1. Formulare
Das Form-Element
1. <form action="ziel.html" method="get" accept-charset="utf-8">
2. <p>
3. <input type="submit" value="Speichern" />
4. </p>
5. </form>
Besonderes: Das form Element darf im Doctype Strict nur Block-Level Elemente
enthalten.
action: Das Action Attribut gibt die Ziel-URL an. Diese kann auf dem eigenen
oder auf einem externen / anderen Server liegen. Falls sie auf dem gleich
Server ist, muss auf eine richtige Verlinkung geachtet werden (Ordner ../)
method=”get” Wenn ein Formular per get übermittelt wird, werden die Parameter
in der URL übertragen. Diese lassen sich speichern und versenden was
oft bei Suchen o.ä. praktisch ist
mehtod=”post” Post übermittelt die Daten im Request des Browsers - für den
User unsichtbar. Dies kann von Vorteil sein wenn es um sicherheitskritische
Dinge geht: Useranmeldung, speichern von Inhalten etc.
Formulare strukturieren
1. <fieldset>
2. <legend>Registrieren</legend>
3. <!-- Input Elemente... -->
4. </fieldset>
Besonderes: Das Formular kann mittels sogenannten fieldset Elementen strukturiert
werden. Ein Fieldset gruppiert eine Anzahl (ein Set) an Eingabe-Feldern ein. Es hat ein Titel
welcher zuoberst durch ein legend Element angeben wird.
© 2010 by Noël Bossart
XHTML: Formulare
1 /6

2. Label-Element
1. <label for="username">Username</label>
2. <input id="username" name="username" type="text" class="text" value="" />
Besonderes: Das Label wir durch das for Attribut mit dem id Attribut eines beliebigen
Formular-Elements verbunden.
Verwendung: Das Label ist ein wichtiges Element und sollte immer eingesetzt
werden. Es gibt dem Input-Feld eine Bedeutung und vergrössert den
Klickbaren Bereich eines Eingabefeldes (bes. bei Checkboxen etc praktisch)
Input-Elemente Allgemein
Besonderes: Das Input Element kann unterschiedliche Ausprägungen haben.
Entscheidend ist dabei das type Attribut.
Beim Stylen zu beachten: Da man in CSS nicht gut auf Attributen selektieren
kann sollte man den input Elementen eine Klasse = dem Attribut geben
Senden Button: Submit
1. <input type="submit" class="submit" value="Senden" />
Besonderes: Löst den Submit-Event des Forumlars aus. Damit wird das Formular
entweder per get oder per post an die Ziel URL gesendet, welche mit dem Attribut
method definiert wurde.
Es gibt weitere Buttonarten welche mit dem Attribut type definiert werden:
button, reset
value: enthält den sichtbaren Button-Text und wird, falls ein name Attribut
vorhanden ist, auch übermittelt
Alternative: es Kann auch der button tag verwendet werden:
<button type=”submit”>Senden</button>
© 2010 by Noël Bossart
XHTML: Formulare
2 /6

3. Einzeiliges Text-Eingabefeld
1. <input id="username" name="username" type="text" class="text" value="" />
Besonderes: Das (einzeilige) Text-Eingabefeld ist wohl das bekannteste und das
einfachste Formular-Elementen. Der Wert steht im value Attribut.
Passwort Eingabefeld
1. <input name="passwort" type="password" class="text" value="" />
Besonderes: Das Passwort Feld ist das Schwesternfeld eines normalen Textfeldes. Es
zeit den Eingabetext jedoch nicht an sonder verschlüsselt es.
Achtung: Das Passwort wird nur verschlüsselt *angezeigt* nicht aber wirklich
verschlüsselt übertragen. Dies stellt ein Sicherheitsrisiko. Man kann das Password
per JavaScript und md5 vor der Übertragung verschlüsseln oder https einsetzen.
Mehrzeiliges Eingabefeld
1. <textarea name="bemerkungen" rows="8" cols="40">
2. </textarea>
Besonderes: Das Mehrzeilige Text-Feld, die Textarea – Textbereich – ist (fast) das einzige
Formular-Element welches nicht leer ist, sondern den Wert umschliesst. Es hat also kein
value Attribut sondern der eingegeben Text steht zwischen Anfang- und End-Tag.
Beim Stylen zu beachten: rows und cols werden von den Browsern unterschiedlich
interpretiert – es ist daher besser, wenn man die Dimensionen in CSS
mit width und height angibt. Die Schrift ist ausserdem meistens default eine
Schrift mit fester Zeichenbreite (Courier)
© 2010 by Noël Bossart
XHTML: Formulare
3 /6

4. Radio Felder
3. <fieldset id="anrede">
4. <legend>Anrede</legend>
5. <label for="herr">Herr</label>
6. <input id="herr" name="anrede" type="radio" class="radio" value="herr" />
7. <label for="frau">Frau</label>
8. <input id="frau" name="anrede" type="radio" class="radio" value="frau"
checked="checked" />
9. </fieldset>
Besonderes: Radio Elemente kommen immer in Gruppen vor. Die Gruppierung wird
durch ein gemeinsames name Attribut gebildet. Über das selected Attribut weiss das
Backend, welcher Wert ausgewählt wurde. Im obigen Beispiel erhält das Backend eine
Variabel mit dem Namen anrede und dem Wert frau.
Das Radio Element entspricht einer ODER Verknüpfung.
checked=”checked” gibt das ausgewählte Element an, es kann nur ein
Element ausgewählt werden
Beim Stylen zu beachten: IE macht einen komischen Rand um die Boxen,
wenn im CSS für input Elemente generell ein Rand definiert wurde. Daher macht
eine Klasse “checkbox” Sinn womit man diesen Rand entfernen kann
Verwendung: Für kleiner Auswahlen (ca. 2-6) bei denen es nur eine Auswahl-
Möglichkeit gibt.
Alternative: Eine Selectbox eigent sich auch für längere Listen
Bemerkungen: Wenn ein Radio einmal ausgewählt wurde, kann es nicht mehr
abgewählt werden. Wenn dies gewünscht sein sollte, zusätzliches (leeres) Element
einfügen. Kann nur mit JS gestyled werden.
© 2010 by Noël Bossart
XHTML: Formulare
4 /6

5. Checkboxen
1. <fieldset id="hobbies">
2. <legend>Hobbies</legend>
3. <label for="sport">Sport</label>
<input id="sport" name="hobbies[sport]" type="checkbox" class="checkbox"
value="true"/>
<label for="kino">Kino</label>
<input id="kino" name="hobbies[kino]" type="checkbox" class="checkbox"
value="true" checked="checked" />
<label for="tanzen">Tanzen</label>
<input id="tanzen" name="hobbies[tanzen]" type="checkbox" class="checkbox"
value="true" checked="checked"/>
4. </fieldset>
Besonderes: Checkboxen können in Gruppen vorkommen, sie können jedoch auch
alleine stehen. Die Gruppierung wird durch ein gemeinsames name Attribut gebildet. Im
Gegensatz zum Radio-Element sind bei Checkboxen mehrere ausgewählte Elemente
möglich. Das Backend erhält diese Werte als Array :
1. [hobbies] => Array (
2. [kino] => true
3. [tanzen] => true
4. )
Das Checkbox Element entspricht einer UND Verknüpfung.
checked=”checked” Es können mehrere Werte dieses Attribut haben
Beim Stylen zu beachten: Auch Checkboxen erhalten vom IE besagten Border
auch hier mittels Klasse “checkbox” diesen enrfernen
Verwendung: Für Fragen mit mehreren (optionalen) Lösungen welche mit
ja/nein ausgewählt werden können. Jedoch nicht zu viele Punkte (bis ca 10…)
Kann auch für einzelafragen (Okey, Ja, Nein etc) verwendet werden
Alternative: Selectboxen mit multiple=”multiple” und size > 2
Bemerkungen: Kann nur mit JS anders gestyled werden
© 2010 by Noël Bossart
XHTML: Formulare
5 /6

6. Selectboxen
1. <select name="haarfarbe" id="haarfarbe" size="1">
2. <option value="" selected="selected">Bitte wählen</option>
3. <option value="schwarz">Schwarz</option>
4. <option value="braun">Braun</option>
5. <option value="blond">Blond</option>
6. <option value="andere">Andere</option>
7. </select>
Besonderes: Das Selectbox Element besteht aus mehreren Elementen, ähnlich einer UL
LI Kombination. Einem Eltern-Element, das select Element welches das name- und
weitere Attribute enthält, und Kinder Elemente, die option Elemente welche die einzelnen
Optionen die zur Auswahl stehen angeben. Jedes option Element hat ein eigenes value
Attribut.
Eine Selectbox kann sowohl eine UND- als auch ODER Verknüpfung
darstellen. Dies hängt vom vorhanden sein eines multiple Attributs und
dem size Attribut ab, welches grösser als 1 sein muss um UND
Verknüpfungen zu ermöglichen.
size="4" Verwandelt das DropDown Element in eine Auswahlbox mit 4
sichtbaren Linien
multiple="multiple" Damit können mehrere Einträge gewählt werden (CTRL
drücken). Dies geht aber nur, wenn das Selectbox kein DropDown mehr ist,
womit size>1 sein muss Für unerfahrene Benutzer evt. zu kompliziert anzuwenden
Beim Stylen zu beachten: Selectboxen unterschieden sich im Styling stark.
IE kann keinen farbigen Rand erstellen
Verwendung: Für Abfragen mit vielen Optionen, sowohl UND als auch ODER
Verknüpfungen. UND Verknüpfungen evt. zu kompliziert für unerfahrene
Benutzer (Hinweistext schreiben, oder durch DIV mit Checkboxen und overflow scroll
© 2010 by Noël Bossart
XHTML: Formulare
6 /6