Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, Wirtschaftsinformatik, Statistik

Transkript

1 1 Aufgaben HTML Formulare

2 Aufgabe 1 (Vorbereitung) Google Suche 2 Probieren vor Studieren.. Arbeitsauftrag: 1.) Fügen Sie mit Notepad++ in Ihrer Datei index.html den unten gezeigten Quelltextschnipsel für die Google-Suche ein. 2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. Quelltextschnipsel: <form method="get" action=" target="_blank"> Suchbegriff eingeben:<br> <input type="text" name=q size="60"> <input type="submit" name="x" value="mit Google suchen"> </form> Ergebnis:

3 Aufgabe 2 Formulare mit eigenem Script: 3 Aufgabe: 1. Kopieren Sie die die Datei (PHP-Script) antwort.php von in Ihr Verzeichnis C:\HTML (mit Herunterladen ) und dann wieder hoch auf in Ihr eigenes Verzeichnis. 2. Testen Sie das PHP-Script mit dem Browser und folgendem Aufruf: Nummer>/ antwort.php?text=nur+ein+test 3. Spielen Sie mit dem Text hinter TEXT=, z.b. Ich+bin<br><hr>ein +Text 4. Schauen Sie sich in Ihrem Verzeichnis die neue Datei antwort.log an.

4 Aufgabe 3 Formulare 4 Aufgabe: 1. Laden Sie im Browser die Formular-Beispieldatei mit formulartest.html. Schauen Sie sich den Quelltext an. 2. Erstellen Sie durch Ausschneiden aus formulartest.html eine neue HTML-Datei formulareinfach.html mit einem Formular, das nur ein einzeiliges Textfeld und einen Absendebutton enthält. unter action tragen Sie antwort.php ein. 3. Testen Sie die Funktion des neuen Formularfeldes und ob die Nachrichten in der Logdatei antwort.log eingetragen werden. Hinweis: Das Antwortscript benötigt einen Webserver mit PHP und funktioniert nicht auf Ihrem lokalen Rechner.

5 Aufgabe 4 Formulare: 5 Aufgabe: 1. Kopieren Sie die die Datei (PHP-Script) antwort2.php von in Ihr Verzeichnis C:\HTML (mit Herunterladen ) und dann wieder hoch auf in Ihr eigenes Verzeichnis. 2. Testen Sie das PHP-Script mit dem Browser und folgendem Aufruf: Nummer>/ antwort.php2?a1=hugo23&var2=ein+test

6 Hinweise zu Aufgabe 5 6 <form method="get" action="antwort2.php" enctype="multipart/form-data"> <!-- eine weitere Möglichkeit mit einem einzeiligen Eingabefeld--> Text in Zeile eingeben:<br> <input type="text" name="text" size="30"><br> <br><br> Eine oder mehrere Möglichkeiten in den Checkboxen auswählen:<br> <input type="checkbox" name="auswahl1" value="1"> erste Auswahlmöglichkeit<br> <input type="checkbox" name="auswahl2" value="2"> zweite Auswahlmöglichkeit<br><br> Genau eine M&oumlglichkeit in den Radiobuttons auswählen:<br> <input type="radio" name="auswahl" value="a"> erste Auswahlmöglichkeit<br> <input type="radio" name="auswahl" value="b" checked="checked">zweite Auswahlmöglichkeit<br> <br> <input type="submit" name="l" value="absenden"> </form>

7 Aufgabe 5 Formulare 7 Aufgabe: 1. Erzeugen Sie aus formulareinfach.html eine neue Datei formularmehr.html. 2. Bauen Sie zwei Checkboxen und zwei Radiobuttons ein. Verwenden Sie als action antwort2.php 3. Testen Sie die Funktion des neuen Formularfeldes und ob die Nachrichten in der Logdatei antwort2.log eingetragen werden.

8 6. Aufgabe NUR BBS HTML PRAKTIKUM 8 Voraussetzungen: Grundkenntnisse Internet, erste HTML-Erfahrung, Windows- Nutzung, Daten aus Praktikum 1.Termin und 2. Termin, Verständnis der entsprechenden Musterlösungen. Lernziele: Sie können verschiedene Formulartypen in Webseiten einbauen. Hinweis: Ihre Daten liegen auf dem Webserver in einem Verzeichnis, das mit Ihrer Nummer benannt ist, z.b: Nummer>, Hochladen mit Nummer>/ADM Aufgaben: 1. Kopieren Sie Ihre Datei des zweiten Termins oder die Musterlösung in eine Datei bestell.html. Führen Sie alle folgenden Schritte auf Ihrem Arbeitsplatzrechner in C:\HTML\ aus und kopieren Sie dann erst zum finalen Test die Dateien auf den Server.

9 noch 6. Aufgabe NUR BBS HTML PRAKTIKUM: 9 2. Erstellen Sie nun in bestell.html das weiter hinten im Screenshot angegebene Bestellformular, jedoch vorerst ohne die Google-Suche. Wichtig: nutzen Sie das Antwortscript unter Hinweise: Sie können Ihren Feldern beliebige syntaktisch richtige Namen geben. Die Formularfelder für die Getränke sind in einer Tabelle eingebettet. Ihre Antwort sollte von der Struktur her so ähnlich wie im Screenshot weiter hinten aussehen, die Bezeichnungen werden dann Ihre Feldnamen sein. Tipp: laden Sie antwort2.php herunter, laden Sie in Ihre Verzeichnis hoch und benutzen Sie es dort. Sie können sich mit Numme>/antwort2.log Ihre Eingaben anschauen.

10 noch 6. Aufgabe NUR BBS HTML PRAKTIKUM Erstellen Sie die Google-Suche im Bestellformular. Hinweise / Funktion: Der Benutzer gibt einen Suchbegriff ein und klickt auf die Schaltfläche. Das Formular sendet eine Anfrage an Google; Google zeigt dann die Suchergebnisse an. Die URL für eine Google-Suchanfrage lautet q=suchbegriff. Sie müssen also die GET-Methode benutzen, als Formularaktion eintragen und das Feld mit dem Suchbegriff q nennen. 4. Fertig. - Letzte Folie -