Formulare definieren l Formular einleiten mit form l

Formulare definieren l Formular einleiten mit <form> l Attribut method bestimmt die Art der Weiterleitung der Daten: l method="post" (Formular wird nur versendet) l method="get" (Formular wird versendet und weiterverarbeitet) l Attribut action gibt an, mit welchem Programm das Formular ausgeführt werden soll: l action="mailto: Programmaufruf l Attribut enctype formatiert die Daten nach einem bestimmten Schema: l enctype="Format" 10. Formulare 1

Grundlagen der Formularerstellung l Alle Elemente müssen innerhalb des Tags <form></form> liegen. l Formulare können nicht ineinander verschachtelt werden. l Wenn Formulardaten als E-Mail eintreffen sollen: l Attribut method="post" l Attribut enctype="text/plain" (beim Versand der Daten per E-Mail) 10. Formulare 2

Einzeilige Eingabefelder l Befehl <input type="text". . . > leitet Eingabefeld ein, es existiert kein abschließender Tag. l type="text" definiert das Feld als einzeiliges. l Jedes Formularelement erhält internen Namen, der spätere Zuordnung ermöglicht: name="Bezeichnung" <html> <head> <title>Formular: Einzeilige Eingabefelder</title> </head> <body> <h 3>Formular: Einzeilige Eingabefelder</h 3> <form action="post" enctype="text/plain" method="mailto: mail@adresse. de"> <p><input type="text" name="Name"> </p> <p><input type="text" name="Vorname"></p> <p><input type="text" name="PLZ"> </p> <p><input type="text" name="Ort"> </p> </form> </body> </html> 10. Formulare 3

Bezeichnete Eingabefelder <html> <head> <title>Formular: Einzeilige Eingabefelder</title> </head> <body> <h 3>Formular: Einzeilige Eingabefelder</h 3> <form action="post" enctype="text/plain" method="mailto: mail@adresse. de"> <p> Name: <input type="text" name="Name"></p> <p> Vorname: <input type="text" name="Vorname"> </p><p> Postleitzahl: <input type="text" name="PLZ"></p> <input type="text" <p> Wohnort: name="Ort"></p> </form> </body> </html> 10. Formulare 4

Längenangaben l Mit Attribut size="Zeichen" Breite für das Eingabefeld festlegen l Mit Attribut maxlength="Zeichen" maximale Länge für das Eingabe bestimmen. . . <body> <h 3>Formular: Einzeilige Eingabefelder</h 3> <form action="post" enctype="text/plain" method="mailto: mail@adresse. de"> <p>Name: <input type="text" name="Name" size="20"></p> <p>Vorname: <input type="text name="Vname" size="17"></p> <p>Postleitzahl: <input type="text" name="PLZ" size="5" maxlength="5"></p> <p>Wohnort: <input type="text" name="Ort" size="17"></p> </form> </body>. . . 10. Formulare 5

Feldinhalt vorbelegen/Eingabefeld nur lesen l Mit Attribut value="Inhalt" kann Eingabefeld standardmäßig mit Inhalt gefüllt werden. l Beispiel: l Eingabe: <input type="text" name="url" value=" http: //www. "> l Ergebnis: l Mit Attribut readonly kann Eingabefeld gesperrt werden. l Beispiel: l Eingabe: <input type="text" name="Preis" value="29, 00 DM" readonly> 10. Formulare 6

Passwortfelder l Mit Befehl <input type="password"> wird Texteingabe des Anwenders in Form von Sternchen angegeben. l Beispiel: l Eingabe: <input type="password" name="pw" size="8"> l Ergebnis: 10. Formulare 7

Mehrzeilige Eingabefelder l Attribut <textarea. . . > kennzeichnet ein mehrzeiliges Eingabefeld. l Attribut name="Bezeichnung" ordnet den internen Namen zu. l Beispiel: l Eingabe: Bemerkungen: <textarea name="Bemerkungen"> Platz für Ihre Bemerkungen. . . </textarea> l Ergebnis: 10. Formulare 8

Breite und Höhe bestimmen l Attribut rows="Zeilen" bestimmt die sichtbare Zeilen- anzahl des Eingabefelds. l Attribut cols="Zeichen" bestimmt die sichtbare Breite des Eingabefelds. l HTML-Formatierungen werden nicht ausgeführt, sondern als Text dargestellt. l Bemerkungen: <textarea name="Bemerkungen"> rows="5" cols="10" 1234567890 2 3 4 5</textarea> 10. Formulare 9

Zeilenumbruch erzwingen l Internet Explorer: automatischer Zeilenumbruch l Netscape Navigator: schreibt Text hintereinander l Attribut wrap="Art" bricht Eingabe um, wenn Text länger als Breite des Eingabefelds: l wrap="virtual": stellt Umbrüche beim Versand per E-Mail nicht dar l wrap="physical": stellt Umbrüche beim Versand per E-Mail dar l Beispiel: 10. Formulare <textarea name="eingabe" rows="5" cols="20" wrap="physical">Geben Sie Ihren Text ein. . . </textarea> 10

Schaltflächen l Befehl <input type="submit" erzeugt Schaltfläche zum Versenden der Daten. l Befehl <input type="reset" erzeugt Schaltfläche zum Zurücksetzen der Daten. l Beispiel: <input type="submit"><input type="reset"> l Beschriftung durch den Browser abhängig von Sprachversion: Internet Explorer 5. 0, deutsch 10. Formulare Netscape Navigator 4. 6, englisch Opera 3. 60, englisch 11

Text der Schaltflächen festlegen l Attribut value="Beschriftung" bestimmt den Text auf der Schaltfläche l Beispiel: <input type="submit" value="Daten absenden"> <input type="reset" value="Eingabe löschen"> l Ergebnis: 10. Formulare 12

Auswahllisten l Der Befehl <select> leitet eine Auswahlliste ein. l Attribut name="Bezeichnung" ordnet der Auswahlliste intern einen Namen zu. l Beispiel: <select name="liste">. . . </select> l Attribut <option>: Eintrag füllt die Liste mit Daten. l Beispiel: <select name="liste"> <option>Note 1 -sehr gut <option>Note 2 -gut <option>Note 3 -befriedigend <option>Note 4 -ausreichend <option>Note 5 -mangelhaft <option>Note 6 -ungenügend </select> 10. Formulare 13

Anzeige einstellen l Attribut size="Höhe" wird in Zeilen angegeben. l Höhe der Anzeige kleiner als Menge der Einträge: Vertikale Bildlaufleisten werden eingeschaltet. l Beispiel: <select name="liste"size="3"> <option>Note 1 -sehr gut <option>Note 2 -gut <option>Note 3 -befriedigend. . . </select> 10. Formulare 14

Vorauswahl eines Eintrags l Standardmäßig ist immer der erste Eintrag als sichtbar ausgewählt. l Eintrag, der nicht am Anfang der Liste steht, kann mit Befehl selected ausgewählt werden. l Beispiel: <select name="liste"> <option>Note 1 -sehr gut <option>Note 2 -gut <option selected>Note 3 -befriedigend. . . </select> 10. Formulare 15

Mehrfachauswahl l Attribut multiple erlaubt die Auswahl mehrerer Einträge. l Die Tasten (Strg) oder (Umschalten) müssen betätigt werden, um mehrere Einträge auszuwählen. l Beispiel: <select multiple name="hobby"> <option>Angeln <option>Auto <option>Musik. . . </select> Die Rückgabewerte sind hobby=Auto hobby=Kino hobby=Lesen 10. Formulare 16

Wert übergeben l Attribut value="Wert" ist ein Synonym für den eigentlichen Eintrag. l Mit value="Wert" wird nur der Wert übermittelt, nicht die Einträge. l Beispiel: <select name="note"> <option value="1">Note 1 -sehr gut <option value="2">Note 2 -gut <option value="3">Note 3 -befriedigend. . . </select> 10. Formulare Bei der Auswahl "Note 3 -befriedigend" ist der Rückgabewert: note=3. 17

Kontrollkästchen l Befehl <input type="checkbox" name="Bezeichnung"> fügt Feld mit einer Kontrollauswahl ein. l Mit value="Wert" muss Wert angegeben werden, da ansonsten bei Ausgabe nur Rückmeldung über Aktivierung (yes/no) erscheint. l Beispiel: Was sind Ihre Hobbys? <input type="checkbox" name="hobby" value="Kino">Kino <input type="checkbox" name="hobby" value="Tanzen">Tanzen <input type="checkbox" name="hobby" value="Lesen">Lesen 10. Formulare 18

Vorauswahl bei Kontrollkästchen l Einträge können bei der Mehrfachauswahl bereits selektiert werden. l Attribut checked gibt an, welche Option standardmäßig ausgewählt sein soll. l Beispiel: Was sind Ihre Hobbys? <input type="checkbox" name="hobby" value="Kino">Kino <input type="checkbox" name="hobby" value="Tanzen" checked>Tanzen <input type="checkbox" name="hobby" value="Lesen">Lesen 10. Formulare 19

Optionsfelder l Befehl <input type="radio" name="Bezeichnung"> fügt Optionsfeld ein. l Alle Elemente einer Gruppe müssen den gleichen Namen haben. l Mit value="Wert" muss Wert für jeweilige Option angegeben werden. l Beispiel: <input type="radio" name="Zahlweise" value="Visa">Visa-Card <input type=" radio " name="Zahlweise" value="MCard">Mastercard <input type=" radio " name="Zahlweise" value="Barcley">Barcley-Card 10. Formulare 20

Vorauswahl bei Optionsfeldern l Attribut checked gibt an, welche Option standardmäßig ausgewählt sein soll. l Beispiel: <input type="radio" name="Zahlweise" value="Visa">Visa-Card <input type="radio" name="Zahlweise" value="MCard"checked>Mastercard <input type="radio" name="Zahlweise" value="Barcley">Barcley-Card 10. Formulare 21

Versteckte Datenübermittlung l Elemente einfügen, die Anwender nicht sehen l Mit Befehl <input type="hidden" name="Bezeichnung" value="Daten"> verstecktes Feld festlegen. l Beispiel: <input type="hidden" name="woher" value="Feedback-Formular"> 10. Formulare 22

Grafische Schaltfläche zum Absenden l Befehl <input type="image" name="Bezeichnung" src="Grafik"> definiert eine Schaltfläche als grafische Darstellung. l Die Schaltfläche muss sich innerhalb eines Formulars befinden. l Attribut border schaltet Umrandung um Grafik ein. l Beispiel: <form action="textarea. html" method="get" <input type="image" name="abschicken" src="grafbutt. gif" border="1" </form> 10. Formulare 23

E-Mail-Dienst im Internet l Probleme beim Versenden von Formularen per E-Mail: l Mail wird ohne Daten verschickt. l Anwender benutzt nicht das E-Mail-Programm des Browsers. (Formulare können überhaupt nicht versendet werden. ) l Lösung: E-Mail-Service Formmailer über Adresse http: //www. formmailer. com l Kann E-Mails versenden, die aus HTML-Formularen entstehen l Basiert auf Programmiersprache Perl l Formularänderung: <form action: mailto: . . . > ersetzen durch Aufruf des CGI-Skripts 10. Formulare 24