Volksbildungswerk Klarenthal e.V.

Kurs 60/Herbst 2001:
Workshop: Wir erstellen die Homepage des Volksbildungswerkes Klarenthal e.V.

Zusammenfassung Doppelstunde 5 (15.10.2001)

[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>
    • <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 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 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 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 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 wählt einen Eintrag vorab aus.
      Beispiel:

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

  2. Tabellen
    Tabellen bestehen aus Zeilen und Spalten. Tabellen ohne Rahmen (border="0") nennt man "blinde Tabellen".
    Einzelne Zellen können sich auch über mehrere Zeilen/Spalten erstrecken.
    Die Basistags:
    <table border="#" summary="Kurzinhaltsangabe einer Tabelle">
       <tr>    TableRow (Zeile)
          <th>TableHeader: Kopfzeile einer Spalte, zentriert und Fettschrift</th>
          <td>TableData (Spalte): Zelleninhalt</td>
       </tr>
    </table>
    Anmerkung: Das Tag <th> ist gleichbedeutend mit <td align="center"><b>Text</b></td>.

    Beliebte Attribute:
    width="#" Breite der Zelle/Tabelle in Pixel oder %
    height="#" Höhe der Zelle/Tabelle in Pixel oder %
    align="center|left|right" horizontale Ausrichtung der Tabelle/Zelle
    valign="top|bottom|middle" vertikale Ausrichtung der Zelle
    nowrap kein Zeilenumbruch in einer Zelle
    Mit colspan="#" und rowspan="#" werden Spalten bzw. Zeilen miteinander verbunden.
    Mit bgcolor="#" können Hintergrundfarben der Tabellen und/oder einzelner Zellen definiert werden.

    Der HTMLEditor Phase 52 verfügt über einen Tab Tabelle, der sowohl alle Elemente einer Tabelle zur Verfügung stellt, aber auch einen Eingabeassistenten anbietet.
[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]
© 2001 Andreas Schmidt