IT-Werkzeuge Web-Programmierung Kapitel 2 Stand
Werbung
Übung WS 2014/2015 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 2 Stand: 14.10.2014 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt 1. Einführung in die Web-Programmierung 2. Web-Programmierung mit HTML 3. Webdesign mit CSS 4. Einführung in Java-Script Übersicht 5. Einführung in PHP 6. Datenbankabfragen mit SQL und PHP 1. Einführung in die Web-Programmierung 2. Web-Programmierung mit HTML 3. Webdesign mit CSS 4. Einführung in Java-Script Übersicht 5. Einführung in PHP 6. Datenbankabfragen mit SQL und PHP 1. Einführung in die Web-Programmierung 2. Web-Programmierung mit HTML a. Grundlagen b. HTML-Tags Übersicht c. Formulare 3. Webdesign mit CSS 4. Einführung in Java-Script 5. Einführung in PHP 6. Datenbankabfragen mit SQL und PHP Web-Programmierung mit HTML 4 Grundlagen Hypertext Markup Language (HTML): HTML ist eine Auszeichnungssprache (Markup Language). Sie hat die Aufgabe mit Hilfe von HTML-Tags, logische Bestandteile eines Dokuments zu beschreiben. Die Elemente haben jeweils einen fest definierten Erstreckungsraum. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <h1> Text der Überschrift </h1> Hypertext bedeutet, dass ein Dokument Verweise (Links) auf andere Dokumente beinhalten kann. Der Webbrowser interpretiert die HTML-Dokumente als formatierte Webseite. http://de.selfhtml.org/ Web-Programmierung mit HTML 5 Grundlagen Hypertext Markup Language (HTML) – Syntax: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: Dokumenttyp-Deklaration (Angabe zur HTML-Version) Header (Kopfdaten z. B. Angaben zu Titel der Seite) Body (Textkörper – dargestellter Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Außer der Dokumenttyp-Deklaration wird der gesamte Inhalt einer HTML-Datei in folgende Tags eingeschlossen: <html>...</html> Hinter dem einleitenden HTML-Tag folgt der Kopf der HTML-Datei, in dem die Kopfdaten festgelegt werden: <head>...</head> Unterhalb davon folgt der Textkörper: <body>...</body> Dazwischen wird der eigentliche Inhalt der Datei notiert. http://de.selfhtml.org/ Web-Programmierung mit HTML 6 Grundlagen <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> DokumenttypDeklaration <html> Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <head> <title>Meine erste Webseite</title> </head> <body> <h2> Herzlich Willkommen zur Vorlesung </h2> <h1> Web-Programmierung</h1> </body> </html> http://de.selfhtml.org/ Kopfdaten Textkörper Web-Programmierung mit HTML 7 Grundlagen Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Kommentare: HTML beinhaltet die Möglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare <!-- ... --> einzufügen. Diese werden von Web-Browsern ignoriert, d. h. bei der Präsentation nicht angezeigt. Kommentare sind besonders sinnvoll, um den Quellcode verständlich zu gestalten und somit die Widerverwendbarkeit der Anwendung zu unterstützen. <html> <head> <!-- Das ist der Kopfbereich --> <title>Titel der Seite</title> </head> <body> Meine erste Seite </body> </html> http://de.selfhtml.org/ Web-Programmierung mit HTML Grundlagen Zur Überprüfung der Syntax können sog. HTML-Validatoren verwendet werden: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. http://www.validome.org/ Beispiel: http://www.validome.org/ 8 1. Einführung in die Web-Programmierung 2. Web-Programmierung mit HTML a. Grundlagen b. HTML-Tags Übersicht c. Formulare 3. Webdesign mit CSS 4. Einführung in Java-Script 5. Einführung in PHP 6. Datenbankabfragen mit SQL und PHP Web-Programmierung mit HTML 10 HTML-Tags Überschriften: HTML unterscheidet 6 verschiedene Überschriften, um Hierarchieverhältnisse in Dokumenten abzubilden. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <h[1|2|3|...6]> ... </h[1|2|3|...6]> Die Nummer steht für die Überschriftenebene (1 ist die höchste Ebene, 6 die niedrigste). Dahinter folgt der Text der Überschrift. Überschriften werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = “left|center|right|justify“ kann die Ausrichtung auch entsprechend geändert werden. <html> <head> <title> Überschriften definieren </title> </head> <body> <h1 align = "center"> Überschrift 1. Ordnung </h1> <h2 align = "right"> Überschrift 2. Ordnung </h2> <h3> Überschrift 3. Ordnung </h3> </body> </html> http://de.selfhtml.org/ Web-Programmierung mit HTML HTML-Tags Textabsätze: Absätze dienen der optischen Gliederung eines Textes: <p>...</p> Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Textabsätze werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = “left|center|right|justify“ kann die Ausrichtung auch entsprechend geändert werden. <html> <head> <title>Absatz</title> </head> <body> <h1>Textabsätze ausrichten</h1> <p align="center">Dies ist ein zentrierter Absatz.</p> <p align="right">Dies ist ein Absatz, der rechtsbündiger ausgerichtet ist.</p> <p align="left">Dies ist ein Absatz, der linksbündig ausgerichtet ist ...</p> <p align="justify">Dies ist ein Absatz, der im Blocksatz ausgerichtet ist ...</p> </body> </html> http://de.selfhtml.org/ 11 Web-Programmierung mit HTML 12 HTML-Tags Zeilenumbruch: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Zeilenumbrüche können an einer beliebigen Stelle mit Hilfe des <br> - Tags gesetzt werden. <html> <head> <title>Zeilenumbruch erzwingen</title> </head> <body> <p>Die Veranstaltung<br> <b> <i> Webprogrammierung </i> </b> <br> richtet sich an alle Studenten, die gerne eine Internetanwendung programmieren!</p> </body> </html> http://de.selfhtml.org/ Web-Programmierung mit HTML 13 HTML-Tags Listen: Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen versehen. Dabei unterscheidet man zwischen ungeordneten und nummerierten Listen! Die HTML-Tags <ul> ... </ul> (ul = unordered list) oder Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <ol>...</ol> (ol = ordered (nummerierte) list) kennzeichnen eine Aufzählungsliste. Durch <li>...</li> werden die einzelnen Punkte innerhalb der Liste (li = list item) definiert. <html> <head> <title>Listen</title> </head> <body> <ol> <li>Vorlesung <ul> <li>E-Commerce I </li> <li>Analytisches CRM - Prozesse und Methoden</li> </ul> </li> <li>Übung </li> </ol> </body> </html> http://de.selfhtml.org/ Web-Programmierung mit HTML HTML-Tags Block/Container: Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einschließen: <div> ... </div> Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Dadurch können gemeinsame Eigenschaften (wie z. B. eine zentrierte Ausrichtung) für alle im Block enthaltenen Elemente definiert werden. <html> <head> <title>Webseite</title> </head> <body> <div align = “center“> <h1> Alles ist zentriert </h1> <ul> Liste <li> 1.Element </li> <li> 2.Element </li> </ul> </div> </body> </html> http://de.selfhtml.org/ 14 Web-Programmierung mit HTML HTML-Tags Tabellen: In HTML lassen sich Tabellen definieren, um Daten tabellarische darzustellen oder Text und Grafik strukturierter am Bildschirm zu verteilen. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <table [border = 0|1|2...]> ... </table> Das Attribut border legt die Stärke der Gitternetzes fest. Der angegebene Wert ist die Breite des Rahmens in Pixel. <tr>...</tr> legt eine neue Tabellenzeile an (tr = table row). Eine Tabelle kann Kopfzellen: <th>...</th> (th = table header) und Datenzellen <td>...</td> (td = table data) enthalten. (Der Text in Kopfzellen wird hervorgehoben) http://de.selfhtml.org/ 15 Web-Programmierung mit HTML Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. HTML-Tags <html> <head> <title> Bachelor-Veranstaltungen</title> </head> <body> <h1>Bachelor-Module</h1> <table border="1"> <tr> <th>Modul: Datenbanken und Programmierung</th> </tr> <tr> <td>Programmierung mit Java</td> </tr> <tr> <td>Datenbanken mit MS Access</td> </tr> </body> </html> http://de.selfhtml.org/ 16 Web-Programmierung mit HTML 17 HTML-Tags Aufgabe: Unser Lehrstuhl bietet im Sommersemester drei Bachelor Module mit verschiedenen Veranstaltungen an. Programmieren Sie eine Internetseite, auf der die einzelnen Module und Veranstaltungen übersichtlich zusammengefasst sind. Beachten Sie dabei folgende Punkte: Der Titel der Internetseite ist der Name des Lehrstuhls. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Der Text (Bachelor-Module) soll als zentrierte Überschrift gestaltet werden. Die Tabelle soll zentriert ausgerichtet werden und einen deutlichen Rahmen haben. Die Titel der einzelnen Module sollen hervorgehoben werden. Überprüfen Sie den Syntax Ihres Dokuments mit Hilfe eines HTML-Validators (http://www.validome.org/). Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Web-Programmierung mit HTML HTML-Tags Aufgabe: 18 Web-Programmierung mit HTML 19 HTML-Tags Verweise: Eine Homepage besteht typischerweise aus mehreren HTML-Dateien. Dabei unterscheidet man zwischen einer Einstiegsseite und mehreren Themenseiten Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Damit der Betrachter Verweise erkennt, sollten diese möglichst aussagekräftig benannt und grafisch hervorgehoben sein! http://de.selfhtml.org/ Web-Programmierung mit HTML 20 HTML-Tags Verweise: Für Verweise in HTML gibt es das a-Element (a = anchor). Zusätzlich ist das Attribut href erforderlich (href = hyper reference). Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <a href=“./Datei.html">Datei im selben Verzeichnis</a> <a href="http://www.ku-eichstaett.de/">KU Eichstaett-Ingolstadt</a> Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Durch das Attribut target = _blank (Verweis wird in einem neuen Fenster angezeigt) target = _self (Verweis wird in demselben Fenster angezeigt) ist es jedoch möglich, eine „Zielfensterbasis“ anzugeben. <a href= http://www.ku-eichstaett.de/ target = _blank> Universität</a> http://de.selfhtml.org/ Web-Programmierung mit HTML HTML-Tags Verweise zu E-Mail-Adressen Es kann auf jede beliebige E-Mail-Adresse ein Verweis gesetzt werden. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <a href="mailto:[email protected]">Max Mustermann</a> http://de.selfhtml.org/ 21 Web-Programmierung mit HTML 22 HTML-Tags Anker: Innerhalb einer HTML-Datei können Anker definiert werden, um einen Sprung an die Ankerstelle innerhalb einer Datei zu ermöglichen. Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. #anfang <html> <head> <title>Anker definieren und Verweise zu Ankern</title> </head> <body> <h1><a name="anfang">Seitenanfang</a></h1> <h2> Kapitel 2</h2> <p><a href="#anfang">Seitenanfang</a> </p> </body> </html> http://de.selfhtml.org/ Web-Programmierung mit HTML HTML-Tags Aufgaben: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Im Sommersemester werden an unserem Lehrstuhl verschiedene Veranstaltungen angeboten. Programmieren Sie eine Internetseite, die die verschiedenen Veranstaltungen enthält und nach Vorlesung, Übung, Proseminar und Hauptseminar unterscheidet! 23 Web-Programmierung mit HTML 24 HTML-Tags Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Aufgaben: Verlinken Sie die einzelnen Lehrveranstaltungen mit den jeweiligen Seiten unseres Lehrstuhls! (Achten Sie darauf, dass sich jeweils eine neue Internetseite öffnet) Überprüfen Sie die syntaktische Korrektheit Ihrer Internetseite mit Hilfe eines HTML-Validators! Web-Programmierung mit HTML 25 HTML-Tags Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Grafiken: Um Grafiken in HTML-Dateien einzubinden, muss die Grafikdatei an der gewünschten Stelle im HTML-Quelltext referenziert werden. Für Grafikreferenzen gibt es in HTML das <img>-Tag (img = image). Mit Hilfe von Attributen können nähere Einzelheiten der Grafikreferenz festgelegt werden. Mit dem Attribut src wird die gewünschte Grafikdatei bestimmt. (Pflichtattribut) Mit dem Attribut alt wird ein Alternativtext für den Fall festgelegt, dass die Grafik nicht angezeigt werden kann. Mit den Attributen width | height geben Sie die Breite bzw. Höhe der Grafik an. <html><head> <title>Breite und Höhe von Grafiken</title> </head> <body> <p><img src="Logo.jpg" width="50" height="83" alt="Logo"></p> </body></html> http://de.selfhtml.org/ Web-Programmierung mit HTML 26 HTML-Tags Frames: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Mit Hilfe von Frames kann der Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufgeteilt werden. <html> <head> <title>Beschreibung des Frameset-Inhalts</title> </head> <frameset ...> <frame ...> </frameset> </html> http://de.selfhtml.org/ <!-- Frameset-Definition --> <!-- Frame-Fenster-Definition --> Web-Programmierung mit HTML 27 HTML-Tags Frames: Beim Definieren von Framesets wird bestimmt, wie das Anzeigefenster des Browsers in verschiedene Frame-Fenster aufgeteilt werden soll. Im einleitenden Tag <frameset...> wird die Aufteilung festgelegt. Dabei unterscheidet man zwischen cols (Spalten) und rows (Zeilen). Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Dahinter wird bestimmt, wie die Aufteilung genau aussehen soll. Im Beispiel wird mit Hilfe von rows="20%, 80%" eine Aufteilung in zwei Zeilen erzwungen, wobei die obere Zeile 20% des Anzeigefensters in Anspruch nimmt, die untere 80%. <frameset rows = 20%,80%> <!-- Frameset-Definition --> </frameset> http://de.selfhtml.org/ Web-Programmierung mit HTML 28 HTML-Tags Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Frames zu einem Frameset definieren: Mit je einem <frame>-Tag können innerhalb eines Framesets die zugehörigen Frames (frame = Rahmen) definiert werden. Durch das Attribut src (Quelle) wird ein Verweis auf eine Datei angegeben, die den Inhalt des jeweiligen Frames enthält. <html><head> <title>Frameset mit Sitemap</title></head> <frameset cols=50%,50%> <frame src="verweis.html" name="Navigation"> frameset.html <frame src="startseite.html" name=“Hauptseite"> </frameset> </html> <html><head> verweis.html <title>Navigation</title> </head> <body> <h1>Navigation</h1> <p> <a href=“http://www.google.de” target="Hauptseite"><b>Googeln</a><br> </p> </body></html> http://de.selfhtml.org/ Web-Programmierung mit HTML 29 HTML-Tags Aufgabe: Programmieren Sie eine Internetseite, die aus zwei Frames besteht. Im linken Fenster sollen ihre Lieblingsseiten aufgelistet und verlinkt sein. Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Im Hauptfenster soll die entsprechende Seite angezeigt werden! 1. Einführung in die Web-Programmierung 2. Web-Programmierung mit HTML a. Grundlagen b. HTML-Tags Übersicht c. Formulare 3. Webdesign mit CSS 4. Einführung in Java-Script 5. Einführung in PHP 6. Datenbankabfragen mit SQL und PHP Web-Programmierung mit HTML 31 Formulare Allgemeines zu Formularen: HTML stellt die Möglichkeit zur Verfügung, Formulare (wie Eingabefelder oder Auswahllisten) zu erstellen. Formulare können eingesetzt werden, um strukturierte Auskünfte von Anwendern einzuholen, Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. um Anwendern das Suchen in Datenbeständen zu ermöglichen, um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern. http://de.selfhtml.org/ Web-Programmierung mit HTML 32 Formulare Mit <form>...</form> kann ein Formular (form = Formular) definiert werden. Alles, was zwischen den beiden <form>-Tags steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Buttons. Im einleitenden <form>-Tag geben Sie mit dem Pflichtattribut action an, an welchen URL die Formulardaten beim Absenden des Formular übertragen werden sollen. Der URL sollte die Adresse eines Programms auf dem Server-Rechner sein, das die Formulardaten weiterverarbeitet. Üblicherweise handelt es sich dabei um ein CGI-Script, das z. B. in PHP geschrieben wurde. <form action=“Dateiname.php" method="get"> <!-- hier folgen die Formularelemente --> </form> http://de.selfhtml.org/ Web-Programmierung mit HTML 33 Formulare Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Ein weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut method. Dieses legt fest, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte: method="get", hängt der Browser die Formulardaten als Parameter an die Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da get als DefaultEinstellung definiert ist). Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach Browser auf ca. 2000 limitiert sein kann. Das verarbeitende CGIProgramm kann diese als Parameter übergebene Zeichenkette auslesen und weiter verarbeiten. method="post", überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server. Der Web-Server stellt die Daten dem CGI-Programm über den Standardeingabekanal zur Verfügung. http://de.selfhtml.org/ Web-Programmierung mit HTML 34 Formulare Einzeilige Eingabefelder: <input> definiert ein einzeiliges Eingabefeld (input = Eingabe), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen werden kann Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. type = gibt an, um welche Eingabe es sich handelt: input type =“text“ input type = “password“ size = legt die Anzahl der Zeichen fest. maxlength = legt die interne Feldlänge in Zeichen fest. value = belegt das Textfeld vor. <form action=“..."> <p>Vorname:<br> <input type="text" name="vn" size="30" maxlength="30“ value=“Vorbelegter Wert“> </p> <p>Nachname:<br> <input type=“password" name="nn" size="30“ maxlength="40"></p> </form> http://de.selfhtml.org/ Web-Programmierung mit HTML Formulare Mehrzeilige Eingabefelder: < textarea> definiert ein mehrzeiliges Eingabefeld (textarea = Textbereich), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen werden kann Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. rows = bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen), cols = bestimmt die Anzahl der angezeigten Spalten (cols = Spalten). <form action=“..."> <Schicken Sie uns bitte Ihr Feedback:<br> <p><textarea name=“feedback" cols="50" rows="10"> Mehrzeiliges Textfeld </textarea> </p> </form> http://de.selfhtml.org/ 35 Web-Programmierung mit HTML 36 Formulare Auswahllisten: <select> definiert eine Auswahlliste, mit folgenden Attributen: name ist der interne Bezeichner, damit auf die Daten der Liste zugegriffen werden kann. size bestimmt die Anzeigegröße der Liste, Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. multiple erlaubt eine Mehrfachauswahl (optionales Attribut!) <option>...</option> bestimmt jeweils einen Eintrag der Auswahlliste. <option selected>...</option> selektiert einen Listeneintrag vor. <option value = “K03“>...</option> bestimmt, dass beim Absenden des Formulars ein interner Wert übergeben wird. <form action=“..."> <p> <select name="top5" size=“4“ multiple> <option>Programmierung mit Java</option> <option selected>Webprogrammierung</option> <option value=“K03“>Anayltisches CRM</option> </select> </p> </form> http://de.selfhtml.org/ Web-Programmierung mit HTML Formulare Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Radiobuttons und Checkboxen: Radio-Buttons werden durch <input type="radio"> definiert, Checkboxen werden durch <input type="checkbox"> definiert. Mit Hilfe des Attributs name können Radiobuttoms gruppiert werden. Alle Radio-Buttons mit dem gleichen Namen gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Weitere mögliche Attribute: checked, value <form action=“..." <p>Welche Vorlesung möchten Sie besuchen?</p> <p> <input type="radio" name="vl" value="v01"> Programmierung mit Java <br> <input type="radio" name="vl" value="v02"> Web-Programmierung <br> </p> </form> <form action=“..."> <p>Welche Vorlesung möchten Sie besuchen?</p> <p> <input type="checkbox" name="vl" value="v01" checked > Programmierung mit Java <br> <input type="checkbox" name="vl" value="v02“> Web-Programmierung <br> </p> </form> http://de.selfhtml.org/ 37 Web-Programmierung mit HTML 38 Formulare Buttons zum Absenden oder Abbrechen: HTML stellt zwei Standard-Buttons zur Verfügung, um Formulareingaben zu verarbeiten: <input type="submit“ value =“Absenden“> schickt die Formulardaten an die im einleitenden <form>-Tag spezifizierte Adresse Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. <input type="reset" value =“Abbrechen“> bricht die Aktion ab und alle Eingaben werden gelöscht. (Mit dem Attribut value wird die Beschriftung der Buttons festgelegt) <form action=“..."> <p>Welche Vorlesung möchten Sie besuchen?</p> <p> <input type="radio" name="vl" value="v01"> Programmierung mit Java <br> <input type="radio" name="vl" value="v02"> Web-Programmierung <br> </p> <input type = "submit" value ="Absenden"> <input type = "reset" value ="Abbrechen"> </form> http://de.selfhtml.org/ Web-Programmierung mit HTML Formulare Aufgabe: Katholische Universität Eichstätt-Ingolstadt Lehrstuhl für ABWL und Wirtschaftsinformatik Benedikt Schumm, M.Sc. Sie haben die Aufgabe eine Anmeldeseite für den Newsletter Ihres Unternehmens zu implementieren. Als Vorlage können Sie folgende Internetseite verwenden. 39
