Nach dem Laden der Webseite sollte der Cursor direkt im ersten Formularfeld blinken (siehe Abbildung 11.3).

Transkript

1

2

3 Nach dem Laden der Webseite sollte der Cursor direkt im ersten Formularfeld blinken (siehe Abbildung 11.3). Abbildung 11.3: Der Cursor springt automatisch in das erste Formularfeld. Und hier ist die Erklärung für die Zeile JavaScript: onload sagt dem Browser, dass er die folgende Anweisung beim L a- den der Webseite ausführen soll. Die Anweisung document.getelementbyid('besuchername').focus(); heißt im Klartext: Suche auf der angezeigten Webseite (document) ein Element mit der ID besuchername. Setze den Cursor in dieses Feld, und lass ihn blinken (focus). Falls JavaScript im Browser ausgestellt sein sollte, passiert einfach gar nichts. 240

4 Ein Kontaktformular erstellen In HTML5 gibt es das Attribut»autofocus«,... aber das versteht momentan noch kein Browser. Irgendwann werden Sie die Zeile JavaScript aus diesem Abschnitt weglassen können und stattdessen einfach das Attribut autofocus in das gewünschte For mular element schreiben: Tipp <input type="text" id="besuchername" name="besuchername" autofocus> Aber noch ist es nicht so weit Schritt 4: Das Reiseziel für die Formulardaten festlegen Ein Klick auf die Schaltfläche Abschicken sendet die Formulardaten zur Verarbeitung an ein Programm auf einem Webserver-Computer. Dieses Programm könnte zum Beispiel die Formulardaten überprüfen, in einer Datenbank speichern oder per verschicken. Falls Sie momentan keinen Webspace oder zumindest keinen Zugriff auf ein solches Programm haben, bietet der Formular-Chef von nettz. de eine einfache und sichere Alternative ohne Registrierung und ohne Verpflichtun gen: formular-chef.de Falls Sie bereits Webspace haben und Ihr Webhoster Ihnen ein Programm zum Versenden von Formulardaten zur Verfügung stellt, können Sie natürlich statt des Formular-Chefs gerne dieses Pro gramm benutzen und das folgende ToDo überspringen. 241

5 ToDo: Die Formulardaten zum Formular-Chef schicken 1. Ergänzen Sie form wie folgt (das gesamte Tag kann in einer Zeile stehen): <form id="kontaktformular" action=" fc.cgi" method="post"> 2. Speichern Sie die Webseite, und betrachten Sie sie im Browser. Das Attribut action gibt das Reiseziel der Formulardaten an, also das Programm, das die Formulardaten verarbeitet. Hier tragen Sie die komplette URL zum Formular-Chef ein. Beim Formular-Chef müssen Sie außerdem noch method="post" angeben. Dieses Attribut stellt unter anderem sicher, dass die Formulardaten unsichtbar verschickt werden. Optional ist im Anfangs-Tag von form das Attribut enctype="multipart/ form-data", das bei einem Formular mit Datei-Upload dafür sorgt, dass dieser reibungslos funktioniert. nettz.de betreibt den Formular-Chef übrigens bereits seit 1998, und in dieser Zeit hat es nach eigener Aussage keine rechtlichen oder sonstigen Probleme gegeben. nettz.de verbürgt sich außerdem dafür, dass keinerlei Adressen oder Daten gesammelt oder protokolliert werden. Tipp Formulare oder Links mit»mailto:«sind nicht wirklich eine Alternative Das Attribut wird manchmal als Alternative zu einem serverseitigen Programm eingesetzt. Der Browser schickt die Formulardaten dann an das Standard-Mailprogramm des Besuchers. Voraussetzung für das Funktionieren von mailto: ist, dass der Besucher ein korrekt konfiguriertes Mailprogramm auf seinem Rechner hat. In Zeiten von GMX, Gmail & Co. ist dies häufig nicht mehr der Fall. 242

6 Ein Kontaktformular erstellen Wenn Sie Pech haben, erschreckt sich der Besucher ob des ihm unbekannten Mailprogramms, das ein Konto einrichten möchte und lauter unverständliche Dinge fragt. Mit ein bisschen Glück kann der Besucher die Mail sogar abschicken vielleicht liegt sie aber auch noch lange nach Beendigung des Programms im Postausgang. Der Besucher glaubt dann, er habe Ihnen eine Mail geschickt, aber Sie wissen davon nichts Schritt 5: Dem Formular-Chef die -Adresse mitteilen Sie sind fast fertig: Sie müssen dem Formular-Chef nur noch Ihre -Adresse mitteilen, damit er Ihnen die Daten per zuschicken kann. Dazu bauen Sie im folgenden ToDo ein unsichtbares Formularfeld in das Formular ein. ToDo: Dem Formular-Chef Ihre -Adresse mitteilen 1. Ergänzen Sie die fett gedruckte Zeile im Quelltext von kontakt. html. Ersetzen Sie dabei bitte die Zeichenfolge IHRE_ durch Ihre -Adresse: <form id="kontaktformular" action=" fc.cgi" method="post"> <input type="hidden" name="empfaenger" value="ihre_ "> <label for="absender">ihre -Adresse:</label> <input type="text" id="absender" name="absender"> 2. Haben Sie beim Attribut value den Wert "IHRE_ " wirklich durch Ihre eigene -Adresse ersetzt? 3. Speichern Sie die Datei. 243

7 Das neue HTML-Element erzeugt ein im Browserfenster nicht sichtbares (hid den) Formularfeld mit dem Namen empfaenger. Der Formular-Chef erwartet die benötig te -Adresse in einem Formularfeld mit ge nau diesem Namen. Tipp Formular-Chef: So schützen Sie sich vor Spam Damit die im Quelltext notierten -Adressen nicht für Spam- Zwecke missbraucht werden können, bietet der Formular-Chef eine einfache Ver schleierung. Ersetzen Sie dazu einfach durch die Zei chenfolge»x X«so können Spam-Roboter und Suchmaschinen Ihre Mailadresse im Quelltext der Webseite nicht so leicht erkennen. Statt <input type="hidden" name="empfaenger" schreiben Sie: <input type="hidden" name="empfaenger" value="beispielx Xtest.de"/> Trotzdem sollten Sie für ein im Web veröffentlichtes Kontaktformular eine gesonderte -Adresse nutzen, denn die Spam-Programme wer den beim automatisierten Einsammeln der Adressen auch immer pfiffi ger Schritt 6: Das fertige Formular testen Sie können das Formular direkt von Ihrer Festplatte im Browser aufrufen und testen, sofern Sie eine Verbindung zum Internet haben: Rufen Sie die Kontaktseite im Browser auf. Füllen Sie das Formular aus. Klicken Sie auf Abschicken. Der Formular-Chef schickt die eingegebenen Formulardaten an die E Mail-Adresse im versteckten Formularfeld, und der Besucher erhält im Browser eine Antwortseite, auf der nettz.de in der kostenlosen Version des Formular-Chefs ein Werbebanner einblendet. 244

8 Ein Kontaktformular erstellen Weitere Optionen beim Formular-Chef Der Formular-Chef bietet noch jede Menge weitere Optionen. Wenn Sie zum Beispiel in Ihrem Mailprogramm dem Besucher direkt antworten möchten, geben Sie dem -Feld einfach den Namen absender: <input type=" " id="besuchermail" name="absender"> Tipp Wenn jetzt jemand das Kontaktformular ausfüllt und Sie eine Mail bekommen, können Sie in Ihrem Mailprogramm einfach auf den Befehl»Antworten«klicken. Sie können beim Formular-Chef auch die Antwortseite gestalten, Pflichtfelder definieren und prüfen, ob die eingegebenen Daten wirklich eine gültige Mailadresse sind. Wie das (und vieles mehr) geht, erfahren Sie in der Dokumentation des Formular-Chef: formular-chef.de/index.cgi?seite=docu 11.7 Auf einen Blick Hier sind noch einmal die wichtigsten Punkte dieses Kapitels im Über blick: HTML-Formulare beginnen mit <form> und enden mit </form>. Formularelemente werden mit label beschriftet. Das Attribut for enthält den Wert der ID des betreffenden Formularelements: <label for="besuchername">. Einzeilige Eingabefelder werden mit <input type="text"> definiert. HTML5 führt neue Feldtypen für ( ), Webadressen (url) und Telefonnummern (tel) ein. Browser, die das nicht verstehen, benutzen ein Feld vom Typ text. Jedes Formular hat mindestens einen»submit-button«, also eine Schaltfläche zum Abschicken. Mit CSS kann man leicht ansprechende Kontaktformulare gestalten. Zur Verarbeitung der Formulardaten wird ein serverseitiges Programm benötigt.der Formular-Chef ist eine werbefinanzierte Alternative, wenn keine solchen Skripte zur Verfügung stehen. 245

9

10 Kapitel 12 HTML-Tabellen und Druckversion Worin Sie lernen, wie man HTML-Tabellen erstellt und gestaltet, und eine Druckversion für die Webseiten erstellen. Die Themen im Überblick: Tabellen sind nicht verboten, Seite 247 Eine Druckversion für die Beispielseiten, Seite 255 Auf einen Blick, Seite 263 In diesem Kapitel wird der erste Teil dieses»css-grundkurses«durch die Erstellung und Gestaltung einer HTML-Tabelle und einer Druckversion für die Beispielsite abgerundet Tabellen sind nicht verboten Wie im ersten Kapitel gezeigt wurde, waren Tabellen lange Zeit die einzige Möglichkeit, Objekte auf einer Webseite zu positionieren. CSS hat diese Rolle übernommen, und in zwischen werden Tabellen mehr entsprechend ihrer ursprünglichen Aufgabe eingesetzt, nämlich zur Darstellung tabellarischer Daten. 247

11 Eine einfache Tabelle:»table«,»tr«und»td«Es gibt nur wenige HTML-Elemente, die zum Erstellen einer einfachen Tabelle benötigt werden: Die Tabelle: table Beginn und Ende der Tabelle werden mithilfe der Tags <table> und </table> markiert. Die Tabellenzeilen: tr tr steht für table row. <tr> und </tr> kennzeichnen den Beginn und das Ende einer Zeile. Die Tabellenzellen: td td heißt table data und enthält die Daten der Tabelle. Die Tags <td> und </td> begrenzen die einzelnen Zellen in der Tabelle. Alle Textzei chen und Grafiken in der Tabelle stehen zwischen <td> und </td>. Tabellen sind nicht schwierig, sie werden im Quelltext nur sehr schnell sehr unübersichtlich. Achten Sie bei Tabellen von Anfang an auf korrekte Einrückungen, um den Quelltext lesbar und übersichtlich zu halten. Während der Bearbeitung einer Tabelle bietet es sich der Einfachheit halber an, die Rahmenlinien mit dem eigentlich veralteten Attribut border sichtbar zu machen: Listing 12.1: Eine einfache Ta belle mit zwei Zeilen und zwei Spalten 01 <table border="1"> 02 <tr> 03 <td>zeile 1, Spalte 1</td> 04 <td> Zeile 1, Spalte 2</td> 05 </tr> 06 <tr> 07 <td>zeile 2, Spalte 1</td> 08 <td> Zeile 2, Spalte 2</td> 09 </tr> 10 </table> Im Firefox sieht diese Tabelle nur mit dem Browser-Stylesheet so aus wie in Abbildung

12 HTML-Tabellen und Druckversion Es gibt noch das Element th wie table heading, das für Überschriftenzeilen in einer Tabelle benutzt wird. Die meisten Browser-Stylesheets stellen den Zellinhalt zwischen <th> und </th> fett und zentriert dar, wenn er von Ihnen nicht anders gestaltet wird. Abbildung 12.1: Tabelle mit zwei Zeilen und zwei Spalten Im Quelltext stehen die Spalten untereinander Die Unübersichtlichkeit des Quelltextes von Tabellen kommt daher, dass die Darstellung im Quelltext nicht der Darstellung im Browser entspricht. Während im Browser eine Tabelle aus waagerechten Zeilen und senkrechten Spalten besteht, gibt es im Quelltext nur waagerechte Zeilen (tr) und Zellen (td). Es gibt kein Element zur Erstellung von Spalten, denn die Spalten ergeben sich aus der Anzahl der Zellen innerhalb der Zeilen. Tabellen sind im Quelltext verwirrend: Im Browserfenster stehen die Spalten einer Tabelle nebeneinander. Im Quelltext stehen die Spalten einer Tabelle untereinander. Tipp Kopf, Fuß und Körper einer Tabelle In HTML können Sie eine Tabelle in die logischen Bereiche Kopf, Fuß und Rumpf unterteilen. Dadurch gibt es einige neue Möglichkeiten: Die logischen Bereiche der Tabelle lassen sich in einem Stylesheet ganz einfach selektieren und unterschiedlich gestalten. Beim Ausdruck einer langen Tabelle könnte ein Browser auf jeder Seite die Spaltenüberschriften im Tabellenkopf wiederholen. Die Elemente zur logischen Einteilung heißen (in der Reihenfolge des Auftretens) thead, tfoot und tbody. Bemerkenswert ist dabei die den Grundsätzen der Anatomie widersprechende Reihenfolge: Kopf, Fuß, Körper. 249

13 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschließlich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen: