HTML5. Das umfassende Praxis- und Referenzwerk GÜNTER BORN

Transkript

1

2 HTML5 Das umfassende Praxis- und Referenzwerk GÜNTER BORN

3 Tabellenformatierung 16 in HTML definierten Farben zuweisen. In Abbildung 7.16 sehen Sie ein Beispiel für eine Tabelle, deren Hintergrund zeilenweise eingefärbt wurde. 1 Abbildung 7.16: Tabelle mit farbigem Hintergrund Die HTML-Anweisungen zur Darstellung dieser Tabelle sind nachfolgend aufgeführt. An den betreffenden Stellen wurden den Tags ein style-attribut mit der Eigenschaft background-color zugewiesen. <table border="1" style="width:80%; padding:5pt;"> <th style="background-color: aqua;"> <b>ware</b></th> <th style="background-color: aqua;"> <b>preis (Euro/kg)</b></th> <tr style="background-color: #ffc0ff;"> <td>äpfel</td><td>4,20</td></tr> <tr><td>bananen</td><td>3,80</td></tr> <tr style="background-color: #ffc0ff;"> <td>trauben</td><td>4,80</td></tr> <tr><td>zitronen</td> <td>2,30</td></tr> </table> Verwenden Sie das style-attribut im <table>-tag, wird der Hintergrund der kompletten Tabelle eingefärbt. Beim <tr>-tag färbt der Browser den Hintergrund einer Zeile ein. Und beim <td>-tag bezieht sich die Hintergrundfarbe auf eine Zelle. Achten Sie aber bei der Wahl der Hintergrundfarben darauf, dass der Kontrast zum Zellinhalt erhalten bleibt. Verwenden Sie helle Hintergrundfarben und dunkle Textfarben

4 Kapitel 7 Tabellen in HTML5 WWW TIPP Sie finden die Beispieldatei \Beisp\Kap07\Bsp07_14.html im Beispielarchiv. Die Datei Bsp07_14a.html färbt den Text der gesamten Tabelle mit einer Hintergrundfarbe ein Tabellen mit Hintergrundbildern Eine weitere mit CSS-Anweisungen durchführbare Möglichkeit besteht darin, den Hintergrund einer Tabelle oder einzelner Zellen mit einem Hintergrundbild zu belegen (Abbildung 7.17). Abbildung 7.17: Tabelle mit Hintergrundbild Soll die Tabelle mit einem Hintergrundbild versehen werden, muss statt der background-color-eigenschaft der CSS-Wert background-image im <table>- Tag aufgenommen werden. Als Wert erhält die Eigenschaft den URL auf die betreffende GIF- oder JPEG-Datei. Soll eine einzelne Zelle mit einem Hintergrundbild versehen werden, ist das Attribut in den <tr>-tag der Zelle einzufügen. Ist die Tabelle breiter oder höher als das Bild, wird das Motiv im Hintergrund gekachelt dargestellt. Nachfolgend sehen Sie den HTML-Quellcode für die Darstellung des Beispiels. 236

5 Tabellenformatierung <table border="1" style="width:80%; padding:5pt; background-image: url(blume.jpg);"> <th><b>ware</b></th> <th><b>preis (Euro/kg)</b></th> <tr><td>äpfel</td><td>4,20</td></tr> <tr><td>bananen</td><td>3,80</td></tr> <tr><td>trauben</td><td>4,80</td></tr> <tr><td>zitronen</td><td>2,30</td></tr> </table> Sie finden die Beispieldatei \Beisp\Kap07\Bsp07_15.html im Beispielarchiv. Wie Sie die Zellränder mit farbigen Linien gestalten, wurde bereits in den Eingangsbeispielen dieses Kapitels erläutert. Damit möchte ich das Kapitel zur Tabellengestaltung abschließen. Sie könnten Tabellen auch für das Layout einer Seite einsetzen. Dies ist aber in HTML5 verpönt, da Inhalt und Darstellung getrennt werden sollen. WWW TIPP

6

7 Inhalt Kapitel 8 Formulare HTML ermöglicht bereits seit der Version 2.0, Formulare zur Abfrage von Benutzereingaben zu erstellen. Dieses Kapitel geht auf das Erstellen von Formularen in HTML5 ein. 8.1 Umgang mit Formularen Bevor es an die Schritte zum Erstellen eines Formulars geht, möchte ich kurz einen Blick auf die Grundlagen werfen. Was sind Formulare und wie werden Dateien übertragen? Formulare verwenden Formulare bestehen aus bestimmten Elementen wie Schaltflächen, Eingabefeldern etc., die in einem HTML-Dokument angeordnet sind. Sobald der Benutzer die Dokumentseite aufruft, werden die Formularelemente eingeblendet. Er kann die Eingaben tätigen bzw. die Optionen definieren. Über eine Schaltfläche Senden lassen sich die Formulardaten an den Server übertragen. In Abbildung 8.1 sehen Sie ein Beispiel für ein solches Formular, in das sich Benutzername und Vorname eintragen lassen Index

8 Kapitel 8 Formulare Abbildung 8.1: Beispielformular Sobald der Benutzer die Daten über die Senden-Schaltfläche an den Server abschickt, lassen sich diese in geeigneter Weise aufbereiten: Die Eingabedaten des Formulars können an eine -Adresse weitergeleitet werden. Die Eingabedaten können auf dem Server durch ein Skriptprogramm (CGI, PHP, Pearl, JavaScript, VBScript etc.) bearbeitet werden. Die letzte Option ermöglicht es beispielsweise, die Daten in einer Datenbank oder in einer Textdatei auf dem Server zu speichern. Dadurch lassen sich die Daten später in geeigneter Weise auswerten Das <form>-tag zur Formulargestaltung Wie sieht die Realisierung eines Formulars in HTML konkret aus? Das in Abbildung 8.1 gezeigte Formular besitzt den folgenden HTML-Code: <form action="/cgi-bin/post" method="post"> <p><label for="fname">name</label> <input type="text" size="20" name="fname" value="born"></p> <p><label for="fvname">vorname</label> <input type="text" size="20" name="fvname" value="hugo"></p> <p><input type="submit" name="fsenden" value="senden"> </p> </form> 240

9 Umgang mit Formularen Die Elemente des Formulars werden in den Tags <form>...</form> eingeschlossen. Die einleitenden und abschließenden Tags besitzen mehrere Aufgaben: Der Browser erkennt an diesen Tags, wo das Formular beginnt und wo es endet. Innerhalb der <form>...</form>-sequenz finden sich alle Definitionen für die Steuerelemente des Formulars. Im einleitenden Tag lässt sich vereinbaren, was mit den Eingabedaten des Formulars passieren soll. Alle Steuerelemente des Formulars, die zwischen den <form>-tags stehen, werden in den Eingabedatensatz übernommen. Im Formular können einfache Texte (zur Beschriftung von Elementen) oder Tags zum Erzeugen der Steuerelemente enthalten sein. Sie können in diesem Teil auch andere Tags wie <a>, <p>, <br>, <img> etc. zur Gestaltung des Formulars aufnehmen. Mit dem <label>-tag in obigem Beispiel lässt sich ein Eingabefeld beschriften. Ein Textfeld wird über einen <input>-tag erzeugt. Das Gleiche gilt für die Schaltfläche Senden. Attribute des <form>-tags Die Attribute der einzelnen Tags bestimmen die Funktion der Steuerelemente und die Wirkungsweise des Formulars. Ein HTML-Dokument kann mehrere <form>-abschnitte enthalten. Sie dürfen aber keine <form>-tags schachteln. Die Attribute des einleitenden <form>-tags legen fest, wie das Formular beim Absenden zu behandeln ist. Mit dem Attribut action legen Sie fest, was mit den Eingabedaten des Formulars beim Anklicken der Senden-Schaltfläche passieren soll. Hierzu gibt es zwei Varianten, die durch das angegebene Protokoll bestimmt werden: http: mailto: Es wird eine URL-Adresse mit dem Auswerteprogramm angegeben. Es wird eine -Adresse angegeben, zu der die Eingabedaten zu schicken sind Kommt das Protokoll http: im Wert vor, muss eine URL-Adresse zu der Seite folgen, auf der das Programm zur Auswertung der Formulareingaben gespeichert ist. Bei diesen Programmen handelt es sich in der Regel um CGI-Skripts (CGI=Common Gateway Interface), die die Formulardaten übernehmen, bearbeiten und ggf. speichern. Ein denkbarer Eintrag wäre zum Beispiel: action=" Die obige Anweisung veranlasst den Server, die Datei post von der angegebenen Domain zu laden und auszuführen

10 Kapitel 8 Formulare INFO CGI stellt eine allgemeine Schnittstelle des Servers zum Aufrufen von Programmen dar. Die CGI-Skripts lassen sich in verschiedenen Sprachen wie Pearl, Java- Script, PHP etc. erstellen. Dies hängt davon ab, welche Skriptsprachen von dem betreffenden Server unterstützt werden. Die Gestaltung dieser Auswerteprogramme ist sehr serverspezifisch und soll an dieser Stelle nicht weiter vertieft werden. Einige Hinweise finden Sie nachfolgend. Die zweite Möglichkeit besteht darin, das mailto:-protokoll zur Übertragung der Eingabedaten zu verwenden. Die folgende Anweisung action="mailto://gborn@born.net" veranlasst, dass die Daten als an die angegebene Adresse verschickt werden. Der Ansatz setzt aber voraus, dass ein -Client auf dem System des Benutzers installiert ist. Wegen dieser Randbedingung sollten Sie nach Möglichkeit auf den Datenversand mit mailto: verzichten. Im einleitenden <form>-tag definiert das method-attribut die Methode, mit der die Formulardaten übergeben und verarbeitet werden. Hierbei gibt es folgende Varianten: Get: Bei dieser Methode übergibt der Server die Formulardaten in einer Umgebungsvariablen an das CGI-Skript (Standard). Post: Der Server übergibt die Formulardaten als Standardeingabestrom über die Standardeingabeeinheit an das CGI-Skript (diese Variante ist zu bevorzugen). Put: Hier wird der im action-attribut angegebene URL nicht als Skriptadresse, sondern als Datei interpretiert, in die Formulardaten zu speichern sind. Delete: Diese Methode löscht die im Attribut action angegebene Ressource auf dem Server. In der Praxis kommen nur die beiden Methoden Get und Post zum Einsatz. Zusätzlich lässt sich über das optionale enctype-attribut das Format der weitergegebenen Formulardaten festlegen. Dies kann der folgende Wert sein: enctype="application/x-www-form-urlencoded" Alternativ lässt sich das folgende MIME-Format enctype="multipart/form-data" oder enctype="text/plain " verwenden. Mit dem optionalen name-attribut kann noch ein eindeutiger Name für das Formular definiert werden. Dies ist wichtig, falls ein Dokument mehrere Formulare enthält. Weiterhin erleichtert dieser Name ggf. die Auswertung der Formulardaten. 242

11 Umgang mit Formularen In einem weiteren Attribut kann in der Art accept-charset="utf-8" der unterstützte Zeichensatz vorgegeben werden. Zudem gibt es die Möglichkeit, ein target-attribut (z. B. target="_blank") als Ziel für die Antwort vorzugeben. Mit dem Wert _blank wird ein neues Fenster geöffnet, während _self die Antwort auf die Formulareingabe im gleichen Fenster liefert. Die Attributangabe autocomplete="off" im <form>-tag unterdrückt in manchen Browsern die Autovervollständigung bei Formulareingaben. Sie haben dann die Möglichkeit, mit autocomplete="off" in den Tags des Formulars die Autovervollständigung für einzelne Steuerelemente abzuschalten. Mit dem Attribut novalidate lässt sich die Formularüberprüfung beim Senden unterdrücken. Scripte zur Formularauswertung Um Skriptprogramme (z. B. JavaScript) beim Absenden eines Formulars aufzurufen, lässt sich das Ereignisattribut onsubmit verwenden. Das betreffende Ereignis (Mausklick auf die Senden-Schaltfläche) ruft ein lokales Skript im Browser auf, in dem beispielsweise die Eingabedaten überprüft werden können (siehe Kapitel 11, 12). Gibt diese Skriptfunktion den Wert "false" zurück, wird das Formular nicht abgeschickt. Bei einer Übertragung der Formulardaten an den Server liefert dieser in der Regel eine Antwort an den Benutzer zurück Beispiele zur Skriptauswertung Die Gestaltung der Skriptprogramme zur Bearbeitung der Formulardaten erfolgt in Abhängigkeit vom benutzten Server und von der verwendeten Skriptsprache. Hier können daher nur einige globale Hinweise zu diesem Thema gegeben werden. Oft halten Webspace-Anbieter fertige CGI-Skripts für bestimmte Formulare bereit. Mit etwas Suchaufwand finden Sie auch fertige Skriptprogramme zur Formularauswertung. Wer keine Skriptprogramme auf seiner Homepage ausführen kann (weil der Hoster dies nicht anbietet oder der Aufwand zu groß ist), kann die Formulareingaben auch über externe Skriptprogramme auswerten und als zustellen lassen. Unter kann man sich z. B. kostenlos registrieren, und bei ist die Funktion sogar ohne Registrierung nutzbar. Bei beiden Webseiten lässt sich eine HTML-Anweisung zum Aufruf eines Skripts für eigene Formulare einsehen. Wird das Skriptprogramm in eigene Formulare eingebunden, stellt dieses die Benutzereingaben als zu. Hier der Auszug des HTML-Formularcodes für formular-chef.de. <form action=" method="post" enctype="multipart/form-data"> <p><label for="fname">name</label> INFO

12 Kapitel 8 Formulare Abbildung 8.2: Ergebnismail des Beispielformulars <input type="text" size="20" name="fname" value="born" /></p> <p><label for="fvname">vorname</label> <input type="text" size="20" name="fvname" value="hugo" /></p> <input type="hidden" name="empfaenger" value="gborn@born.de" /> <p><input type="submit" name="fsenden" value="senden" /></p> </form> Bei formular-chef.de ist ein versteckter <input>-tag mit dem Attribut type="hidden" erforderlich. Im value-attribut ist die -Adresse anzugeben. Abbildung 8.2 zeigt die Ergebnis- mit den Formulardaten, die dann zugestellt wird. Der Auszug des HTML-Formularcodes für onlex.de sieht ähnlich aus. Hier wird im Wert des action-attributs der Benutzername bei Onlex angegeben. <form action=" method="post"> <p><label for="fname">name</label> <input type="text" size="20" name="fname" value="born" /></p> <p><label for="fvname">vorname</label> <input type="text" size="20" name="fvname" value="hugo" /></p> 244

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: