Formulare Lösungen

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. 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

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>


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)


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.


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] => true3. [tanzen] => true4. )

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


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

Technology

Formulare Lösungen