Formulare Lösungen

1.342 Aufrufe

Veröffentlicht am

Lösung HTML Formulare – Unterlagen und Übungen

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.342
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Formulare Lösungen

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

×