I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren


Formulare und Kommentare

Funktion und Zweck
Kommentare
Formular: Sicht des Anwenders
Formular: Sicht des Autors
Aufgaben

Funktion und Zweck von Formularen

HTML stellt die Möglichkeit zur Verfügung, Formulare zu erstellen. Formulare können für unterschiedliche Aufgaben eingesetzt werden:

  • dem Anwender die Möglichkeit zu bieten, etwa um aus einer Produktpalette oder aus dem Angebot der Seiten etwas Bestimmtes zu bestellen bzw. zu suchen;
  • Anwendern das Suchen in Datenbanken zu ermöglichen;
  • Anwendern die Möglichkeit zu geben, selbst Daten für eine Datenbank beizusteuern

In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen und Buttons anklicken, Formulare absenden oder löschen. Der Betreiber der Seiten gibt beim Erstellen eines Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll. Sie können sich die ausgefüllten Daten beispielsweise per E-Mail zuschicken lassen (Hier wird diese Möglichkeit umgesetzt) oder von einem CGI-Programm auf dem Server-Rechner weiterverarbeiten lassen.

 

Kommentare

Der HTML-Code einer einzigen Bildschirmseite kann mehrere DIN A4-Seiten groß sein. Damit man nicht die Übersicht über den umfangreichen HTML-Code verliert, sollte man in jeder Datei mit Kommentaren arbeiten. Kommentare sieht der Anwender nicht (außer er schaut sich den Quellcode an). Sie sind für den Autor bestimmt. Sie müssen keine Kommentare einfügen, diese dienen nur zur eigenen Orientierung.

Der Kommentar kann aus einer oder mehreren Zeilen bestehen. Der Quellcode sieht wie folgt aus:
<!-- Hier steht ein einzeiliger Kommentartext -->

<!-- Hier steht der Kommentartext,
wenn er zwei oder mehrere
Zeilen umfasst. 
//-->

 

 

Sicht des Anwenders

Party-Einladung

Wenn du zur Party kommst, dann fülle dieses Formular aus.

Vorname:
Nachname:

Ich bringe mit.

Möchtest du bei mir übernachten?

Ja Nein Weiß nicht

Ich besorge folgende Speisen:

Brot Salz Wein

Sonstige Speisen:

Bemerkungen und Anregungen:

Sicht des Autors - HTML-Code 
<html>
<head>
<title>Formular</title>
</head>
<body>


<h3>Party-Einladung</h3>
<p>Wenn du zur Party kommst, dann fülle dieses Formular aus. </p>

<!-- Formular definieren, Daten schicken, E-Mail-Adresse 
Party-Formular
//-->
<form method="post" action="mailto:lauer@johann-lauer.de" enctype="text/plain">

<!-- Textfelder einfügen-->
<p>Vorname:<input name="Vorname" type="text" size="40" maxlength="80" value="Max"><br>
Nachname:<input name="Nachname" type="text" size="40" maxlength="80" value="Mustermann"></p>

<!-- Auswahlmenü einfügen-->
<p>Ich bringe <select name="personen" size="1">
<option>Niemanden
<option>eine Person
<option> eine Mannschaft
</select> mit.</p>

<!-- Radio-Buttoms. Damit zwingt man den Benutzer sich für eine Alternative zu entscheiden (entweder oder). 
Die gewünschte Variante kann man vorgeben mit dem Attribut "checked".

//-->
<p>Möchtest du bei mir übernachten?</p>
<p><input type="radio" name="uebernachtung" value="ja">Ja
<input type="radio" name="uebernachtung" value="nein" checked>Nein
<input type="radio" name="uebernachtung" value="weissn">Weiß nicht</p>

<!-- Check-Boxes.  Hier können mehrere Varianten angekreuzt werden.-->
<p>Ich besorge folgende Speisen:</p>
<input type="checkbox" Name="speise" value="brot" checked>Brot
<input type="checkbox" Name="speise" value="Salz">Salz
<input type="checkbox" Name="speise" value="Wein" checked>Wein</p>

<!-- Weitere Textfelder einfügen-->
<p>Sonstige Speisen:
<input Name="sonstiges" type="text" size="50" maxlength="80">
<p>Bemerkungen und Anregungen:</p>
<textarea name="bemerkungen" rows="6" cols="30"></textarea></p>

<!-- Übermittlungs-Buttons -->
<p><input type="submit" value="Anmeldung absenden">
<input type="reset" value="Anmeldung löschen"></p>

<!-- Formular beenden -->
</form>


</body>
</html>

Die Antwort des Nutzers bekommt man über E-Mail. So sieht das Ergebnis aus:


Vorname=Max
Nachname=Musterman
personen=Niemanden
uebernachtung=ja
speise=brot
speise=Wein
sonstiges=bringe meinen Schlafsack mit
bemerkungen=freue mich auf Euer Fest

Aufgaben

  1. Erstellen Sie im Unterverzeichnis "htm" eine Datei "formulare.htm". Diese Datei sollte ein Formular mit Inhalten Ihrer Wahl enthalten. 
  2. Verwenden Sie Kommentare, wie dies im Beispiel oben vorgeführt wurde.
  3. Schauen Sie sich den Quellcode dieser Seite an. Klicken Sie in Ihrem Browser auf die rechte Maustaste und drücken dann "Quelltext anzeigen" (der Mauszeiger muss im Fenster stehen, das Sie ansehen wollen), wenn Sie den Internet Explorer benutzen.  Im Netscape müssen Sie zuerst die rechte Maustaste drücken, dann "Rahmen im neuen Fenster öffnen", danach "Ansicht" dann "Seitenquelltext".
  4. Prüfen Sie durch Anschauen des Quellcodes auch bei anderen Seiten, ob der Autor mit Kommentaren arbeitet.
  5. In dieser Datei wurde aus didaktischen Gründen auf eine Gestaltung mit Hilfe von Tabellen verzichtet. Gestalten Sie Ihr Formular mit Hilfe von Tabellen, nachdem Sie es erstellt haben, damit es für den Anwender übersichtlicher wird.

  Tabellen Seite drucken Links-Multimedia
I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren
© Copyright by Johann-Lauer.de
Quelle: www.web-publishing.biz E-Mail: info@web-publishing.biz
Seitenanfang