Suche senden
Hochladen
Formulare Lösungen
•
0 gefällt mir
•
861 views
N
Noël Bossart
Folgen
Lösung HTML Formulare – Unterlagen und Übungen
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 6
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Formulare
Formulare
Noël Bossart
CSS3 Selektoren und deren Eigenschaften
CSS3 Selektoren und deren Eigenschaften
Lucas M
JavaScript & jQuery
JavaScript & jQuery
Noël Bossart
BdS - Garantieverzinsung: Der Große Bluff
BdS - Garantieverzinsung: Der Große Bluff
Hans Müller
Clevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook Posts
Gregor Biswanger
nlu
nlu
Dreamcast
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
Noël Bossart
Fussball Euro 2012
Fussball Euro 2012
gueste3fea5
Empfohlen
Formulare
Formulare
Noël Bossart
CSS3 Selektoren und deren Eigenschaften
CSS3 Selektoren und deren Eigenschaften
Lucas M
JavaScript & jQuery
JavaScript & jQuery
Noël Bossart
BdS - Garantieverzinsung: Der Große Bluff
BdS - Garantieverzinsung: Der Große Bluff
Hans Müller
Clevere Tipps zum Thema Facebook Posts
Clevere Tipps zum Thema Facebook Posts
Gregor Biswanger
nlu
nlu
Dreamcast
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
Noël Bossart
Fussball Euro 2012
Fussball Euro 2012
gueste3fea5
OKNOS Webservice
OKNOS Webservice
OKNOS Internettechnologie
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Kai Hackbarth
Social Media Governance in der Wissenschaft
Social Media Governance in der Wissenschaft
Prof. Alexander Gerber
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
optivo GmbH
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
optivo GmbH
Journalismus 2-0
Journalismus 2-0
Prof. Alexander Gerber
WissJour20
WissJour20
Prof. Alexander Gerber
Formulare // MM 08-11
Formulare // MM 08-11
Noël Bossart
Titnus Lol
Titnus Lol
guestbfc8d0
Fundraising Isa 071009
Fundraising Isa 071009
guestf18693
Robo Memo Elpos Tagung
Robo Memo Elpos Tagung
luzius
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
WebInterpret SAS
Irregular verbs
Irregular verbs
Nalan English
D3 M4 U10 P1 GIOCO
D3 M4 U10 P1 GIOCO
M. Magrini Kunze
Umzug
Umzug
xandy80
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
WebInterpret SAS
Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
Xinnovations-2010
Xinnovations-2010
Prof. Alexander Gerber
Weitere ähnliche Inhalte
Andere mochten auch
OKNOS Webservice
OKNOS Webservice
OKNOS Internettechnologie
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Kai Hackbarth
Social Media Governance in der Wissenschaft
Social Media Governance in der Wissenschaft
Prof. Alexander Gerber
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
optivo GmbH
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
optivo GmbH
Journalismus 2-0
Journalismus 2-0
Prof. Alexander Gerber
WissJour20
WissJour20
Prof. Alexander Gerber
Formulare // MM 08-11
Formulare // MM 08-11
Noël Bossart
Titnus Lol
Titnus Lol
guestbfc8d0
Fundraising Isa 071009
Fundraising Isa 071009
guestf18693
Robo Memo Elpos Tagung
Robo Memo Elpos Tagung
luzius
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
WebInterpret SAS
Irregular verbs
Irregular verbs
Nalan English
D3 M4 U10 P1 GIOCO
D3 M4 U10 P1 GIOCO
M. Magrini Kunze
Umzug
Umzug
xandy80
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Noël Bossart
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
WebInterpret SAS
Hello World // MM 08-11
Hello World // MM 08-11
Noël Bossart
Xinnovations-2010
Xinnovations-2010
Prof. Alexander Gerber
Andere mochten auch
(20)
OKNOS Webservice
OKNOS Webservice
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Realisierung von Service-Varianten und zustandsbehafteten Services aus Basis ...
Social Media Governance in der Wissenschaft
Social Media Governance in der Wissenschaft
optivo - Torben Otto und René Kulka
optivo - Torben Otto und René Kulka
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Seminar: Tipps und Tricks für erfolgreiches Lifecycle-Marketing
Journalismus 2-0
Journalismus 2-0
WissJour20
WissJour20
Formulare // MM 08-11
Formulare // MM 08-11
Titnus Lol
Titnus Lol
Fundraising Isa 071009
Fundraising Isa 071009
Robo Memo Elpos Tagung
Robo Memo Elpos Tagung
Europäischer Verkaufsbeschleuniger - die Features
Europäischer Verkaufsbeschleuniger - die Features
Irregular verbs
Irregular verbs
D3 M4 U10 P1 GIOCO
D3 M4 U10 P1 GIOCO
Umzug
Umzug
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Monthly report on de international sales september 2015
Monthly report on de international sales september 2015
Hello World // MM 08-11
Hello World // MM 08-11
Xinnovations-2010
Xinnovations-2010
Formulare Lösungen
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
Jetzt herunterladen