HTML Formulare. Benutzerschnittstelle für interaktive Webseiten

Größe: px

Ab Seite anzeigen:

Download "HTML Formulare. Benutzerschnittstelle für interaktive Webseiten"

Kilian Walter
vor 8 Jahren
Abrufe

1 1 HTML Formulare Benutzerschnittstelle für interaktive Webseiten

2 Literatur und Links 2 Literatur: Coar, Ken; Bowen, Rich: Apache-Kochbuch HTML: kein Buch oder irgend eins für Einsteiger, z. B. Münz, Stefan; Nefzger, Wolfgang: HTML 4.0 Handbuch. HTML, JavaScript, DHTML, Perl Links: Apache: XAMP: HTML: Notepad++: PHP: Python: BSCW: Eclipse: CSS PHP CSS Smartphone Notepad++:

org/ Notepad++: http://notepad-plus-plus.org/download/v6.1.8.html PHP: http://www.selfphp.de/ Python: http://www.python.org/ BSCW: http://www.bscw.de/unternehmen.html Eclipse: http://www.eclipse.

3 Wie gestalte ich Interaktive Webseiten? 3 Grundsätzliches Vorgehen Erstellung einer Interaktiven Webanwendung mit PHP: 1.) Erzeugen einer HTML-Seite (z.b. formular.html) mit einem Formular und einem Aufruf eines Antwortscriptes (z.b. antwort.php). 2.) Erzeugen eines Antwortscriptes (z.b. mit PHP wie antwort.php) 3.) Testen.

) Erzeugen einer HTML-Seite (z.b. formular.

4 Wie funktioniert eine interaktive Internetseite grundsätzlich 4 1. Aufruf eines HTML-Formulars(*) 2. Ausfüllen HTML-Formulars(*) Ihre Eingabe: huba buba Absenden Browser 3. Abschicken des HTML-Formulars: mit HTTP POST oder HTTP GET werden Daten an Webserver übertragen.(*) 4. Programm / Script bearbeitet Daten und erzeugt als Ausgabe HTML-Code antwort.php Server 5. Ausgabe wird an Browser zurück übertragen und angezeigt. Ihre Eingabe: huba buba Ergebnis: schubi dubi Browser (*) Alternativ kann ein Programm / Script mit HTTP GET auch ohne Formular in der Browsereingabezeile aufgerufen werden.

Abschicken des HTML-Formulars: mit HTTP POST oder HTTP GET werden Daten an Webserver übertragen.(*) 4.

5 Wie sieht ein einfaches Formular in HTML aus? 5 Ein einfaches HTML-Formular (ohne HTML-Rahmen <html><head>..) <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <input type="text" name="text" size="30"> <input type="submit" name="l" value="absenden">

6 Wie sieht ein einfaches PHP-Script aus? 6 Ein einfaches Script zur Illustration. Zur PHP-Programierung gibt es einen eigenen Foliensatz.

7 Wie ist eine form aufgebaut? 7 Formulare allgemein Hier: Methode GET, es gibt auch noch POST, HEAD. <form method="get" action="antwort.php" >.. Verschiedene Eingabefelder, Führungstexte etc Auswertungsscript, Heißt so, wie Sie es genannt haben

8 Wie werden in HTML Texteingabefelder dargestellt? 8 Formulare Textfelder  <form method="get" action="antwort2.php"> Text in Textbereich eingeben: <textarea name="text" cols=45 rows=5/></textarea> <input type="submit" name="l" value="absenden">  <form method="get" action="antwort2.php"> Text in Zeile eingeben: <input type="text" name="text" size="30"> <input type="submit" name="l" value="absenden">

php"> Text in Textbereich eingeben: <textarea name="text" cols=45 rows=5/></textarea> <input type="submit" name="l"

9 Wie wird ein einzeiliges Textfeld codiert? 9 <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <input type="text" name="text" size="30"> <input type="submit" name="l" value="absenden"> Das Script antwort.php muss sich im gleichen Verzeichnis auf dem Webserver befinden wie das Formular. Sonst voll qualifizieren.

<input type="submit" name="l" value="absenden"> Das Script antwort.

10 Wie sieht die Ausgabe von antwort.php aus? 10 Aufruf mit einzeiligem Textfeld im Formular oder direkt in der Browserzeile, z.b.

11 Wie wird ein mehrzeiliges Textfeld codiert? 11 <textarea name="text" cols=45 rows=5/></textarea> <input type="submit" name="l" value="absenden">

12 Wie können Anhakkästchen dargestellt werden? 12 Formulare Checkboxen ( multiple choice Mehrfachauswahl ) <form method="get" action="antwort2.php" > Eine oder mehrere Möglichkeiten in den Checkboxen auswählen: <input type="checkbox" name="auswahl1" value="1"> erste Auswahlmöglichkeit <input type="checkbox" name="auswahl2" value="2"> zweite Auswahlmöglichkeit <input type="submit" name="l" value="absenden"> Vorbelegung einer Checkbox mit: checked= checked. AUSWAHL1 wird als Variablenname übertragen. Variablennamen müssen unterschiedlich sein.

type="checkbox" name="auswahl2" value="2"> zweite Auswahlmöglichkeit <input type="submit" name="l" value="absenden"> Vorbelegung einer Checkbox mit:

13 Wie können Auswahlknöpfe (Einfachauswahl) dargestellt werden? 13 Formulare Radiobutons ( multiple choice Einfachfachauswahl ) <form method="get" action="antwort2.php" > Genau eine Möglichkeit in den Radiobuttons auswählen: <input type="radio" name="auswahl" value="a"> erste Auswahlmöglichkeit <input type="radio" name="auswahl" value="b" checked="checked"> zweite Auswahlmöglichkeit <input type="submit" name="l" value="absenden"> Variablenname muss gleich sein. Beispiele unter

php" > Genau eine Möglichkeit in den Radiobuttons auswählen: <input type="radio" name="auswahl" value="a"> erste Auswahlmöglichkeit <input

Ähnliche Dokumente

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik 1 Aufgaben HTML Formulare 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