Volksbildungswerk Klarenthal e.V.

Kurs 232/Herbst 2002:
Workshop: Wir erstellen eine Homepage!

Zusammenfassung Doppelstunde 5 (14.10.2002)

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]

  1. Formulare
    In Formularen kann ein Besucher einer Webseite Daten in Eingabefeldern eingeben, auch mehrzeilige Texte, aus Listen Einträge auswählen oder bestimmte Knöpfe, sog. Buttons, anclicken. Über einen solchen Knopf wird am Ende das Formular abgeschickt. Ein Script auf dem Server führt damit dann gewisse Aktionen aus, z.B. wird anhand der Angaben eine Bestellung ausgelöst oder ein eMail generiert.
    Anmerkung: Mit Javascript können die Eingabefelder vor dem Abschicken überprüft werden.
    Die Basistags und ihre Attribute:
    • <form action="script" method="post|get" target="Ausgabefenster"> ... Elemente des Formulars ... </form>
    • Elemente des Formulars:
    • <input type="text" name="Feldname" size="Anzeigelänge" maxlength="Feldlänge" value="vorgegebener Inhalt (Default-Wert)"></input>
    • Bei Radiobuttons wird nur ein Wert an den Server geschickt:
      <input type="radio" name="Feldname" value="vorgegebener Wert"></input>
      Auswahl 1
      Auswahl 2
      Das Attribut checked="checked" (XHTML-konform; es reicht auch einfach checked) wählt einen Eintrag beim Laden der Seite aus:
      Auswahl 3 (ausgewählt)
    • Bei Checkboxen wird kein, ein, oder mehrere Werte an den Server geschickt:
      <input type="checkbox" name="Feldname" value="vorgegebener Wert"></input>
      Auswahl 1
      Auswahl 2
      Das Attribut checked="checked" wählt einen oder mehrere Einträge beim Laden der Seite aus:
      Auswahl 3 (ausgewählt)
      Auswahl 4 (auch ausgewählt)
    • <input type="button" value="Label des Buttons" onClick="Javascript-Aktion"></input>
      z.B. value="Zurück" onClick="history.back()" funktioniert wie der Zurück-Knopf des Browsers.
    • <textarea name="NameTextfeld" rows="5" cols="50" wrap="virtual">
      </textarea>
      readonly="readonly" verhindert das Schreiben in ein solches Feld.
    • <input type="hidden" name="Feldname" value="vorgegebener Wert"></input>
      So können vorgegebene Werte an das Serverscript übertragen werden, ohne daß der Besucher diese sieht. Einige Scripte erwarten solche versteckte Angaben.
    • <input type="submit" name="Abschicken" value="Ab damit!"></input>
      Übertragen des Formulares an den Server.
    • <input type="reset" name="Zurücksetzen" value="Lieber doch nicht."></input>
      Das Formular wird wieder auf den Ursprungszustand zurückgesetzt; es wird nichts an den Server übertragen.
    • Auswahllisten werden mit den Tags
      <select name="Name der Auswahl" size="Anzahl der angezeigten Werte">
      Das Attribut multiple="multiple" läßt eine Mehrfachauswahl zu. Ansonsten wird nur ein Wert an den Server übermittelt.
      <option value="Wert">Auswahlmöglichkeit</option>
      ...
      </select>
      definiert. Das Attribut selected="selected" wählt einen Eintrag vorab aus.
      Beispiel:
    • Vorsicht: Mit dem Input-Attribut type="file" kann der Dateimanager aufgerufen werden und so eine Datei als Anhang verschickt werden. Besser, Sie bauen eine solche potentielle Virenschleuder nicht auf Ihrer Webpage ein!

    Und natürlich können andere Tags wieder mit diesen Tags (fast) beliebig verschachtelt werden, z.B. in einer Tabelle oder mit verschiedenen Formatierungen.

    Der HTMLEditor Phase 52 verfügt über einen Tab Formular, der alle Elemente eines Formulares zur Verfügung stellt.

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]
© 2002 Andreas Schmidt