PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge

Größe: px

Ab Seite anzeigen:

Download "PHP & HTML. Kurzeinstieg HTML. Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge"

Sofia Böhler
vor 6 Jahren
Abrufe

1 Zentrum für Informationsdienste und Hochleistungsrechnen (ZIH) PHP & HTML Kurzeinstieg HTML Zellescher Weg 12 Willers-Bau A109 Tel Michael Kluge (michael.kluge@tu-dresden.de)

2 HTML Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen Formularelemente im Detail Michael Kluge / 2

3 HTML Client Server Konzept Webbrowser stellt eine Anfrage an den Server Server bearbeitet die Anfrage und liefert die angeforderte statische Webseite aus Interaktion ist nur im Rahmen von Links auf andere statische Dokumente möglich Webbrowser Benutzeroberfläche HTTP- Anfrage HTML- Daten Webserver Datenspeicher Server-System Michael Kluge / 3

4 HTML Themenübersicht Client Server Konzept Grundlagen HTML Baumstruktur Aufbau von Elementen Beispiel-Dokument Aufbau von Formularen Formularelemente im Detail Michael Kluge / 4

5 HTML Dokumentaufbau html head body meta title link h1 p p p Michael Kluge / 5

6 HTML Elemente Elemente sind durch spitze Klammern (< >) eingeschlossen Jedes Element besteht aus einem öffnenden und einem schließenden Tag Das schließende Tag beginnt mit einem Schrägstrich (/) Attribute beschrieben Elemente näher <h1>eine Überschrift</h1> <input type= text name= value= /> Michael Kluge / 6

7 HTML Wichtige Elemente für den Anfang <html></html> umschließt gesamtes HTML-Dokument <head></head> umschließt Kopfbereich des Dokuments <title></title> Titel der Seite in der Kopfzeile d. Browsers <body></body> Körper des Dokumentes Wird im Browserfenster angezeigt Michael Kluge / 7

8 HTML Wichtige Elemente für den Anfang <h1></h1>.. <h6></h6> Überschriften im Text <p></p> Absätze im Text <br /> HTML Zeilenumbruch (\n wird ignoriert) Michael Kluge / 8

9 HTML Beispieldokument <html> <head> <title>titel der Webseite</title> </head> <body> <h1>dies ist eine Überschrift ersten Grades</h1> <p>ich bin nur ein kleiner Blindtext. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.</p> </body> </html> html head body title h1 p Michael Kluge / 9

10 HTML Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen Formular und Formularelemente Übertragungsmethoden Übertragungskodierung Formularelemente im Detail Michael Kluge / 10

11 HTML Aufbau eines Formulars Beginnt mit <form> und endet mit </form> enthält verschiedene Formularelemente Wichtige Attribute action -> wohin mit den Daten method -> wie wird übermittels enctype -> mit welcher kodierung <form action= script.php method= post > <input type= text name= text1 /> <input type= submit value= Abschicken > </form> Michael Kluge / 11

12 HTML Übertragungsmethoden (method) Steuert die Art in der Datenübertragung METHOD=GET (Standard) Datenversand über URL-Parameter wird benötigt wenn Daten mit JavaScript verarbeitet werden sollen METHOD=POST Datenversand an die Standardeingabe eines Webservers muss in jedem Fall verwendet werden wenn Dateien übertragen werden Michael Kluge / 12

13 HTML Übertragungskodierung (enctype) Steuert die Art in der Datenkodierung application/x-www-form-urlencoded Standard wenn nichts angegeben ist Geeignet zur Übertragung von Texten Automatische Zeichenkodierung multipart/form-data Voraussetzung für die Dateiübertragung Automatische Zeichenkodierung text/plain Keine Zeichenkodierung Geeignet nur zur Übertragung von Sonderzeichen freien Texten Michael Kluge / 13

14 HTML Daten mit Links übermitteln Beginnt mit <a> und endet mit </a> Übertragung von Einzelinformationen Daten werden immer per GET übertragen Wichtige Attribute href Ziel-URL <a href= index.php?param1=wert&param2=wert2>linktext</a> Michael Kluge / 14

15 HTML Themenübersicht Client Server Konzept Grundlagen HTML Aufbau von Formularen Formularelemente im Detail Texteingabe (Text, Passwörter) Mehrfachauswahlen (Dropdowns, Listen) Auswahlen (Radio- und Checkboxen) Dateien Buttons (Submit, Reset, Image, Button) Michael Kluge / 15

16 HTML Formulare (<input type= text />) einzeiliges Texteingabefeld wichtige Attribute name eindeutiger Name des Elementes value default-wert im Element maxlength maximale Anzahl von Zeichen readonly Elementwert nicht änderbar Formatierung über CSS möglich <input type= text name= value= /> Michael Kluge / 16

17 HTML Formulare (<textarea>...</textarea>) mehrzeiliges Texteingabefeld Wert steht zwischen öffnendem und schließendem Tag wichtige Attribute name eindeutiger Name des Elementes rows / cols Anzahl von Zeilen und Spalten readonly Elementwert nicht änderbar Formatierung über CSS möglich <textarea name= eintext > </textarea> hier steht der default text Michael Kluge / 17

18 HTML Formulare (<input type= password />) einzeiliges Textfeld, Zeichen erscheinen als * wichtige Attribute name eindeutiger Name des Elementes value default-wert im Element maxlength maximale Anzahl von Zeichen readonly Elementwert nicht änderbar Formatierung über CSS möglich <input type= password name= pwd value= geheim /> Michael Kluge / 18

19 HTML Formulare (<input type= hidden />) nicht sichtbares Textfeld verwendbar für versteckte Daten wichtige Attribute name eindeutiger Name des Elementes value default-wert im Element Formatierung über CSS möglich <input type= hidden name= versteckt value= /> Michael Kluge / 19

20 HTML Formulare (<input type= file />) Auswahl von lokalen Datein für den Upload Aussehen vom Browser abhängig Dialogfelder nicht formatierbar wichtige Attribute name eindeutiger Name des Elementes maxlength maximale Dateigröße in Byte Formatierung über CSS NICHT möglich <form method= post enctype= multipart/form-data > <input type= file name= datei maxlength= /> </form> Michael Kluge / 20

21 HTML Formulare (<input type= submit />) Button zum Absenden eines Formulars Verwendung des Buttons übermittels Daten an den die Form- Action Wichtige Attribute name eindeutiger Name des Elements value Wert und Beschriftung des Elements Formatierung mit CSS möglich <input type= submit value= abschicken /> Michael Kluge / 21

22 HTML Formulare (<input type= img src= />) Button zum Absenden eines Formulars Als Button wird eine Grafik angezeigt Wichtige Attribute name eindeutiger Name des Elements src Pfad zur anzuzeigenden Grafik Werte aus einem "Value" Attribut werden nur vom Firefox korrekt übermittelt <input type= image name= abschicken src= img/absend.jpg /> Michael Kluge / 22

23 HTML Formulare (<input type= reset />) Zurücksetzen des Formulars Alle Werte im Formular werden auf den default-wert gesetzt Wichtige Attribute name eindeutiger Name des Elements value Wert und Beschriftung des Elements Formatierung mit CSS möglich <input type= reset value= Abbrechen /> Michael Kluge / 23

24 HTML Formulare (<select>...</select>) Auswahl bzw. Drop-Down Liste Wichtige Attribute name eindeutiger Name des Elements size Anzahl der Zeilen (1=DropDown) multiple Mehrfachauswahl erlauben Formatierung über CSS NICHT möglich  <select name= liste >... </select>  <select name= liste size= 3 >... </select>  <select name= liste size= 3 multiple= multiple >... </select> Michael Kluge / 24

25 HTML Formulare (<option>...</option>) Elemente innerhalb einer Liste Wichtige Attribute select Vorauswahl des Elementes value übermittelter Wert Formatierung mit CSS NICHT möglich <select name= liste size= 3 multiple= multiple > <option value= 1 >Pizza Napoli</option> <option value= 2 selected= selected >Pizza Salami</option> </select> Michael Kluge / 25

26 HTML Formulare (<optgroup>...</optgroup>) dient zum Gruppieren von Listen dabei ist maximal eine Ebene möglich Wichtige Attribute: label Die Beschriftung der Gruppe <optgroup label= Pizza > <option value= p1 >Pizza Napoli</option> <option value= p2 >Pizza Salami</option> </optgroup> <optgroup label= Schnitzel > <option value= s1 >Wiener Schnitzel</option> <option value= s2 >Schnitzel Hawaii</option> </optgroup> Michael Kluge / 26

27 HTML Formulare (<input type= radio />) boolsches Auswahl Element es kann immer nur ein Element gewählt sein Wichtige Attribute: name ordnet Elemente einer Gruppe zu value legt den übermittelten Wert fest checked Vorauswahl von Elementen Formatierung über CSS NICHT möglich Visa <input type= radio name= radio1 value= Visa /> Master <input type= radio name= radio1 value= Mastercard /> Amex <input type= radio name= radio1 value= American Express /> Michael Kluge / 27

28 HTML Formulare (<input type= checkbox />) Auswahl von Optionen über Checkboxen Wichtige Attribute: name ordnet Elemente einer Gruppe zu value legt den übermittelten Wert fest checked Vorauswahl von Elementen Formatierung über CSS NICHT möglich Visa <input type= checkbox name= radio1 value= Visa /> Master <input type= checkbox name= radio1 value= Mastercard /> Amex <input type= checkbox name= radio1 value= American Express /> Michael Kluge / 28

Ähnliche Dokumente

<form name= test action= test.php method= get autocomplete= on > </form> <form name= test action= test.php method= post autocomplete= on > </form>

<form name= test action= test.php method= get autocomplete= on > </form> <form name= test action= test.php method= post autocomplete= on > </form> WEBFORMULARE Nutzung von Formularen Suchbegriffe eingeben Benutzerdaten übertragen (Anschrift, Bankverbindung) Waren in Webshop bestellen Kommunikation über Gästebücher, Blogs, Chats Was wird benötigt?