Suche in meinem Heimatblatt Mein Heimatblatt Hochschulrechenzentrum Universität

Schein Aufgabe Lösung Vorgehen mit Phase 5 HTML-Kurs Kurse, allgemein

Hinweise (Blatt 7)

Formulare

Inhalt:

• Aufgabe und Zweck
• Informationen zum Thema
• Genereller Aufbau
• Eingabefelder
  • Kontrollkästchen
  • Radio-Knöpfe
  • Einzeilige Text-Eingabefelder
  • Dateiauswahl-Fenster
  • Passwort-Felder
  • Auswahl-Listen
  • Mehrzeilige Text-Eingabefelder
  • Versteckte Eingabefelder
• Blind-Tabellen
• Weitere Möglichkeiten in Formularen
• Weiterverarbeitung von Formularen
• Praktisches Vorgehen mit dem HTML-Editor Phase5

Aufgabe und Zweck

Mit Hilfe des HTML-Elements form können Sie Formulare definieren. Die Formulare enthalten üblicherweise Eingabefelder, die vom Anwender ausgefüllt und mittels spezieller Schaltflächen an eine E-Mail-Adresse oder zur Weiterverarbeitung an ein zu spezifizierendes Programm gesandt werden können.

Voll funktionsfähige Beispiele für Formulare -- die zwei mögliche Aufgaben demonstrieren -- finden Sie bei:

• Suchformular für die HTML-Dokumente von Günter Partosch
• Ich möchte eine Teilnahmebestätigung haben (mit PHP) [Bestätigung für die Teilnahme an einem Kurs]
• einfache, ältere Variante (ohne PHP) für den gleichen Zweck: Ich möchte eine Teilnahmebestätigung haben

Informationen zum Thema

Genereller Aufbau

• Alle HTML-Formulare sind im Prinzip nach dem folgenden Schema aufgebaut:

  <form method="methode" action="ziel" 
  enctype="codierung">
  ...
  Text und Eingabefelder
  ...
  <input type="submit">
  <input type="reset">
  </form>
  

• Mit <input type="submit"> und <input type="reset"> vereinbaren Sie zwei Schaltflächen zum Abschicken bzw. Verwerfen des Formularinhalts.
• Und das macht Ihr Browser daraus: Beispiel a
• Wahrscheinlich entsprechen das Layout des Formulars bzw. die Beschriftung der Schaltflächen noch nicht Ihren Wünschen. Siehe dazu aber Blind-Tabellen bzw. die Beispiele des Abschnitts Eingabefelder.
• Mit Hilfe der Angaben bei den Attributen method und action im Anfangs-Tag von form kann festgelegt werden, was mit den Formulardaten wie geschehen soll:
  • Bei action kann entweder ein E-Mail-URL oder der URL des weiterverarbeitenden Programms angegeben werden. Beispiele sind
    action="mailto:Guenter.Partosch@hrz.uni-giessen.de" und
    action="/cgi-bin/weiter.pl" (hier das Perl-Programm weiter.pl im Verzeichnis /cgi-bin des aktuellen WWW-Servers).
    Im übrigen gelten hier die Regeln für URL-Angaben.
  • Mit method="get" und method="post" können zwei Methoden spezifiziert werden, wie die Formulardaten zum Ziel (E-Mail-URL oder weiterverarbeitendes Programm) transportiert werden sollen. Werden die Formulardaten per E-Mail transferiert, so ist method="post" anzugeben. Wird der Formularinhalt an ein Weiterverarbeitungsprogramm gesendet, so hängt es von der Art der Weiterverarbeitung ab, ob method="get" oder method="post" anzugeben ist.
• Werden die Formulardaten an eine E-Mail-Adresse gesendet, so ist -- mit einer Ausnahme -- immer enctype="text/plain" anzugeben, da das voreingestellte Encoding hier nicht sinnvoll ist.
• email-7h.lst zeigt, wie die als E-Mail-Brief übertragenen Daten eines Formulars beim Adressaten aussehen könnten.
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/verarbeiten.htm#email]

Eingabefelder

Damit mit Hilfe eines HTML-Formulars Daten übertragen werden können, müssen geeignete Eingabefelder vereinbart werden. Im Folgenden werden die Arten

• Kontrollkästchen,
• Radio-Knöpfe,
• einzeilige Text-Eingabefelder,
• Dateiauswahl-Fenster,
• Passwort-Felder (alle mit dem HTML-Befehl <input ...>),
• Auswahl-Listen (mit dem HTML-Element select) und
• mehrzeilige Text-Eingabefelder (mit dem HTML-Element textarea)

genauer vorgestellt.

Kontrollkästchen

• Recht einfache Eingabefelder sind Kontrollkästchen. Sie werden mit dem HTML-Befehl <input ...> und dem Attribut type="checkbox" vereinbart.
• Als zusätzliches Attribut kann name="bezeichner" angegeben werden: Alle Felder mit der gleichen Angabe gehören zu einer Gruppe. Der Anwender kann im Formular beliebig viele (auch gar keines) Kästchen einer Gruppe ankreuzen.
• Als weiteres zusätzliches Attribut ist value="wert" sinnvoll: Wird das entsprechende Kontrollkästchen ausgewählt, so wird wert beim Absenden des Formulars übertragen.
• Durch Angabe des Attributs checked="checked" kann ein Kästchen vorselektiert werden.
• Kontrollkästchen können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-b" 
  enctype="text/plain">
  <p>Wählen Sie einen oder mehrere Kurse (Windows-Kurs ist schon ausgewählt):</p>
  
  WinWord <input type="checkbox" name="Kurs" value="WinWord"><br>
  LaTeX   <input type="checkbox" name="Kurs" value="LaTeX"><br>
  Windows <input type="checkbox" name="Kurs" value="Windows" checked="checked"><br>
  
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel b
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/auswahl.htm#checkboxen]
• Nebenbei: Mit Hilfe des Attributs value wurden die Schaltflächen für das Absenden (submit) bzw. Verwerfen (reset) eines Formulars mit sinnvolleren Texten versehen.
• Und noch einmal nebenbei: Durch das Einfügen des HTML-Befehls <br> konnte das Formular schon bisschen übersichtlicher gestaltet werden.

Radio-Knöpfe

• Auf den ersten Blick ähneln Radio-Knöpfe den Kontrollkästchen. Sie werden mit dem HTML-Befehl <input ...> und dem Attribut type="radio" vereinbart.
• Der Unterschied zeigt sich bei der Auswirkung des Attributs name="bezeichner": Alle Radio-Knöpfe mit der gleichen Angabe gehören zu einer Gruppe. Der Anwender kann im Formular genau einen Radio-Knopf aus einer Gruppe ankreuzen.
• Die Attribute value="wert" und checked="checked" haben die gleiche Bedeutung wie bei den Kontrollkästchen.
• Radio-Knöpfe können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-c" 
  enctype="text/plain">
  <p>Wählen Sie Ihre Einkommensgruppe (mittlere Gruppe ist vorausgewählt):</p>
  
  <input type="radio" name="Einkommen" value="k25000"> < 25000 DM <br>
  <input type="radio" name="Einkommen" value="25000-50000"> 25000-50000 DM <br>
  <input type="radio" name="Einkommen" value="50000-75000" checked="checked"> 
  50000-75000 DM <br>
  <input type="radio" name="Einkommen" value="75000-100000">75000-100000 DM <br>
  <input type="radio" name="Einkommen" value="g100000"> > 100000 DM <br>
  
  <input type="submit" value="Abschicken">
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel c
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/auswahl.htm#radiobuttons]

Einzeilige Text-Eingabefelder

• Einzeilige Text-Eingabefelder sind wohl die Eingabefelder, die am häufigsten in einem Formular eingesetzt werden. Sie werden mit dem HTML-Befehl <input ...> und dem Attribut type="text" vereinbart.
• Mit Ihrer Hilfe kann der Anwender kleine einzeilige Texte im Formular eingeben und übertragen lassen.
• Das Attribut name="bezeichner" versieht das Eingabefeld mit einem internen Bezeichner. Er wird beim Transfer des Formularinhalt mitübertragen.
• Andere, optionale Attribute sind size="anzeigelaenge" (Länge des Eingabefeldes in Zeichen) und maxlength="feldlaenge" (interne Feldlänge des Eingabefeldes).
• Einzeilige Text-Eingabefelder können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-d" 
  enctype="text/plain">
  <p>Geben Sie Ihren Namen ein:</p>
  
  Vorname  <input type="text" name="Vorname"><br>
  Nachname <input type="text" name="Nachname"><br>
  
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel d
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/eingabe.htm#felder]

Dateiauswahl-Fenster

• Mit dem HTML-Befehl <input ...> und dem Attribut type="file" wird ein Eingabefeld für einen Dateinamen sowie eine Schaltfläche zum Öffnen eines Dateiauswahl-Fensters vereinbart.
• Mit ihrer Hilfe kann der Anwender eine Datei auswählen, deren Inhalt zusammen mit dem Formular übertragen werden soll.
• Sinnvolle Attribute sind name="bezeichner, accept="mime-typ" (erlaubte Datei-Typen) und maxlength="max_größe" (maximale Dateigröße in Byte).
• Zweckmäßige Angaben für mime-typ sind beispielsweise text/* (alle Typen von Textdateien), text/plain ("normale" Textdateien), text/html (HTML-Dateien) oder auch application/pdf (PDF-Dateien). Nähere Informationen zu den MIME-Typen finden Sie bei Stefan Münz [diverses/mimetypen.htm].
• Dateiauswahl-Fenster können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-e" 
  enctype="multipart/form-data">
  <p>Wählen Sie eine Datei zum Transfer aus:</p>
  
  <input type="file" name="Vorname"><br>
  
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel e
• Achtung: Soll in einem Formular der Inhalt einer Datei zu einer E-Mail-Adresse transferiert werden, so ist unbedingt das Attribut enctype="multipart/form-data" im Anfangs-Tag von form anzugeben.
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/datei_upload.htm]

Passwort-Felder

• Manchmal ist es notwendig, ein Passwort so in einem Formular eingeben zu können, dass es nicht am Bildschirm gelesen werden kann. Ein Feld für derartige Zwecke kann mit dem HTML-Befehl <input ...> und dem Attribut type="password" realisiert werden.
• Für das eingetippte Passwort werden am Bildschirm Sterne angezeigt.
• Sinnvolle Attribute sind name="bezeichner", size="anzeigelaenge" und maxlength="feldlaenge" (mit der gleichen Bedeutung wie bei den einzeiligen Text-Eingabefeldern).
• Passwort-Felder können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-f" 
  enctype="text/plain">
  <p>Geben Sie für den Zugriff auf das XYZ-Projekt Benutzerkennung und 
  Paßwort ein:</p>
  
  Benutzerkennung  <input type="text" name="account"><br>
  Passwort <input type="password" name="Passwort"><br>
  
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel f
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/eingabe.htm#felder_passwort]

Auswahl-Listen

• Will der Formular-Autor dem Anwender eine Liste zulässiger Antworten vorgeben, so macht er das mit Hilfe des HTML-Elements select.
• Auswahl-Listen der Art select sind im Prinzip wie folgt aufgebaut:

  <select ...>
  <option>Auswahl 1</option>
  <option>Auswahl 2</option>
  ...
  </select>
  

• Jede vorgesehene Auswahl-Angabe wird in das HTML-Element option eingeschlossen.
• Durch das option-Attribut selected="selected" kann eine Auswahl-Angabe vorselektiert werden.
• Mittels des select-Attributs size="anzahl" kann festgelegt werden, wie viele Auswahl-Angaben angezeigt werden.
• Auswahl-Listen können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-g" 
  enctype="text/plain">
  <p>Geben Sie Ihr Bundesland an (Hessen ist vorausgewählt):</p>
  
  <select size="8">
  <option>Baden-Württemberg</option>
  <option>Bayern</option>
  <option>Berlin</option>
  <option>Brandenburg</option>
  <option>Bremen</option>
  <option>Hamburg</option>
  <option selected="selected">Hessen</option>
  <option>Mecklenburg-Vorpommern</option>
  <option>Niedersachsen</option>
  <option>Nordrhein-Westfalen</option>
  <option>Saarland</option>
  <option>Sachsen</option>
  <option>Sachsen-Anhalt</option>
  <option>Sachsen-Anhalt</option>
  <option>Schleswig-Holstein</option>
  <option>Thüringen</option>
  </select><br>
  
  <input type="submit" value="Abschicken">
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel g
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/auswahl.htm#listen]

Mehrzeilige Text-Eingabefelder

• Für die Übermittlung von Kommentaren, Mitteilungen oder Kommentaren in einem Formular eignen sich die bereits vorgestellten einzeiligen Text-Eingabefelder nur bedingt.
• Besser für diesen Zweck geeignet sind mehrzeilige Text-Eingabefelder. Sie werden durch das HTML-Element textarea realisiert.
• Sinnvolle Attribute sind name="bezeichner" (mit der üblichen Bedeutung), cols="spaltenzahl" (Anzahl der sichtbaren Spalten) und rows="zeilenzahl" (Anzahl der sichtbaren Zeilen).
• Um dem Anwender die Eingabe zu (?)erleichtern(?), kann zwischen dem Angangs- und Ende-Tag des Elements textarea auch ein Eingabetext vorgegeben werden.
• Mehrzeilige Text-Eingabefelder können beispielsweise wie folgt verwendet werden:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-i" 
  enctype="text/plain">
  <p>Was halten Sie vom XYZ-Kurs? Geben Sie einen kurzen Kommentar:</p>
  
  <textarea name="kommentar" cols="40" rows="4">
  Der Kurs ist ganz super-toll!!
  </textarea><br>
  
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel i
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/eingabe.htm#bereiche]

Versteckte Eingabefelder

• Manchmal ist es sinnvoll, auch Formulardaten zu übertragen, die nicht im Formular eingegeben werden und die nicht am Bildschirm zu sehen sind.
• Dazu dient der HTML-Befehl <input ...> mit dem Attribut type="hidden".
• Ein Beispiel:

  <input type="hidden" name="version" value="1.1">
  

• Von Bedeutung sind hier die Attribute name="bezeichner" und value="wert". Sie bewirken, dass automatisch das Wertepaar (bezeichner, wert) beim Absenden des Formulars übertragen wird.
• Informationen zu diesem Themenbereich: Stefan Münz [html/formulare/versteckte.htm]

Blind-Tabellen

• Mit Hilfe von Blind-Tabellen (das sind Tabellen ohne sichtbare Zellengrenzen) können Sie einfach und elegant das Layout von Formularen gestalten.
• Wichtig ist hier die Attribut-Angabe border="0" im Anfangs-Tag von table.
• <tr>...</tr> enthält jeweils den Inhalt einer Tabellenzeile, <td>...</td> den Inhalt einer einzelnen Tabellenzelle.
• Leere Tabellenzellen sollten mit dem Entity   aufgefüllt werden.
• Tabellen können überaus kompliziert sein. Für Formularen reichen aber meistens Konstrukte der folgenden Art:

  <form method="post" 
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Formulartest-h" 
  enctype="text/plain">
  <table border="0">
  <tr>
  <td>Anrede</td>
  <td>Herr <input type="radio" name="anrede" value="Herr">
      Frau <input type="radio" name="anrede" value="Frau"></td>
  </tr>
  <tr><td>Titel</td><td><input type="text" name="titel"></td></tr>
  <tr><td>Vorname</td><td><input type="text" name="vorname"></td></tr>
  <tr><td>Nachname</td><td><input type="text" name="nachname"></td></tr>
  <tr><td>Straße</td><td><input type="text" name="strasse"></td></tr>
  <tr><td>Hausnummer</td><td><input type="text" name="nr"></td></tr>
  <tr><td>Postleitzahl</td><td><input type="text" name="plz"></td></tr>
  <tr><td>Ort</td><td><input type="text" name="ort"></td></tr>
  </table>
  <input type="submit" value="Abschicken"> 
  <input type="reset" value="Verwerfen">
  </form>
  

• Und das macht Ihr Browser daraus: Beispiel h
• Und so kommen die Formulardaten bei Guenter.Partosch@hrz.uni-giessen.de an: email-7h.lst
• Zu den Tabellen siehe im übrigen auch Übungsblatt 9 und Stefan Münz [html/tabellen/index.htm].
• Zu den Blind-Tabellen: Stefan Münz [html/tabellen/layouts.htm]

Weitere Möglichkeiten in Formularen

Auf die Darstellung einiger anderer Möglichkeiten in Formularen muss hier verzichtet werden. Das sind beispielsweise:

• Klick-Buttons: HTML-Befehl input mit dem Attribut type="button"; Stefan Münz [html/formulare/klickbuttons.htm]
• grafische Schaltflächen: HTML-Befehl input mit dem Attribut type="image"; Stefan Münz [html/formulare/formularbuttons.htm#grafische]
• verschachtelte Menüstrukturen: HTML-Element optgroup; Stefan Münz [html/formulare/auswahl.htm#menuestruktur]
• Gruppierung von Formularelementen: HTML-Element fieldset; Stefan Münz [html/formulare/strukturieren.htm#gruppieren]
• Label für Formularelemente: HTML-Element label; Stefan Münz [html/formulare/strukturieren.htm#label]

Weiterverarbeitung von Formularen

• Bei dem Attribut action des form-Anfangs-Tags kann entweder ein E-Mail-URL oder der URL eines weiterverarbeitenden Programms angegeben werden. Beispielsweise:

  <form method="post" action="name.php">
  

  oder

  <form method="post"
  action="mailto:Guenter.Partosch@hrz.uni-giessen.de?Subject=Teilnahmebestaetigung"
  enctype="text/plain">
  

• Ein Beispiel für ein Formular mit einem weiterverarbeitenden Programm finden Sie in Ich möchte eine Teilnahmebestätigung haben (mit PHP). Dieses Formular benutzt die PHP-Datei name.php.
• Weitere Beispiele für Formulare mit weiterverarbeitenden Programmen sind Formular-Aufruf des Programms zaehlen.ksh und Formular-Aufruf des Programms multizaehlen.ksh. In beiden Fällen werden die Daten durch ein passendes Perl-Programm verarbeitet.
• Es geht über den Rahmen dieses Kurses hinaus, zu zeigen, wie ein solches Programm generell aufgebaut sein muss und wie es funktioniert.
• Die dafür vorgesehene Standard-Programmierschnittstelle auf WWW-Servern ist CGI (Common Gateway Interface). Manche WWW-Server bieten auch noch andere Schnittstellen an.
• Zum Thema lesen Sie Stefan Münz [cgiperl/index.htm].
• Übrigens: Wollen Sie selbst solche Anwendungen realisieren, so muss der Provider, bei dem Sie Ihre HTML-Dokumente speichern, den Zugriff auf diese Programmierschnittstelle erlauben. HRZ-Benutzer lesen dazu am besten
  Jürgen Obermann: Benutzereigene CGI-Programme (http://www.uni-giessen.de/admin/www/usercgi.html).

Praktisches Vorgehen mit dem HTML-Editor Phase5

Aufgabe 7 und Phase 5

• Eingebaute Möglichkeiten
• Praktische Vorgehensweise

$Revision: 1.12 $ ($Date: 2003/11/02 11:51:53 $) by $Author: g029 $