Das wichtigste Mittel, um Formulare zu gestalten, sind Tabellen. Mit Tabellen kann man alle Elemente genau so positionieren, wie man es gerne hätte. Die Tabellenzellen sollten feste Größen in Pixel haben, damit die Ordnung auch bei viel kleineren oder größeren Browserfenstern erhalten bleibt. Beachte, dass die Größen nur eingehalten werden, wenn die Zelleninhalte auch in die Zelle passen. Das ist gar nicht so einfach, denn Netscape geht auch hier eigene Wege. Während bei den einzelnen Versionen des Internet Explorers und von Opera die Eingabefelder gleich breit dargestellt werden, werden die selben Felder von NN 4 sehr viel breiter und von NN 6, NN 7 und von Mozilla 1 etwas schmaler dargestellt.
Einspaltige Formulare sind meist viel übersichtlicher als mehrspaltige.
| Gib hier deinen Vornamen ein: | und hier den Nachnamen: |
Das obere Beispiel ist deshalb meist nicht so gut, wie das untere.
| Gib hier deinen Vornamen ein: | |
| und hier den Nachnamen: |
Die Möglichkeiten von Tabellen als Design- und Layouthilfe hab ich ja schon bei den Tabellen erklärt. Natürlich darf ein Formular nicht in einer Tabelle beginnen und außerhalb davon enden und umgekehrt. Mit Hilfe eines blind.gif und von Tabellen lassen sich die Formulare so gestalten wie man sie gerne hätte.
|
So sieht's in deinem Browser aus:
| |
Das ist der Quelltext dazu:
|
Ein Fieldset ist ein zusammen gehörender Formularbereich, der einen Rahmen und eine Überschrift hat.
Fieldsets sind seit HTML4 im HTML-Standard enthalten. Trotzdem werden sie erst seit relativ kurzer
Zeit auch von Browsern interpretiert, die nicht von Microsoft sind. Der IE beherrscht das
<fieldset>
Ein Fieldset wird mit <fieldset> eingeleitet und mit </fieldset> beendet. Dazwischen gehört alles was in diesem Bereich dargestelllt werden soll. Die 'Überschrift' gehört ganz an den Anfang des Inhalts des Fieldsets und wird mit <legend> eingeleitet und mit </legend> abgeschlossen. Sie bekommt normalerweise nicht automatisch eine besondere Textauszeichnung. Im Beispiel habe ich deshalb mit <b> und </b> Fettdruck erzeugt.
Um dir zu zeigen, wie das Fieldset von den einzenen Browsern interpretiert wird, habe ich das Beispiel
oben in allen Browsern die mir zur Verfügung stehen dargestellt und einen Screenshot (Screen : engl. -
Schrirm, Leinwand, Abschirmung, Bildschirm; shot: engl. - Schuss, Foto; Screenshot - Foto vom Bildschirm)
davon gemacht. Unten kannst du die Ergebnisse sehen.
|
So sieht's im IE 5.5 aus:
|
|
So sieht's im NN 4 aus:
|
|
So sieht's im NN 6 aus:
|
|
So sieht's im NN 7 und in Mozilla 1 aus:
|
|
So sieht's in Opera 5 aus:
|
|
So sieht's in Opera 6 aus:
|
|
So sieht's in Opera 7 aus:
|
Aber du kannst so was mit Hilfe von Tabellen, einem blind.gif und etwas Mühe so nachbauen, dass es in allen Browsern gleich aussieht. Allerdings bin ich der Meinung, dass das mittlerweile in den meisten Fällen nicht mehr notwendig ist.
Jetzt hast du alles wesentliche gelernt, was man an HTML-Kenntnissen braucht, um den Body einer Homepage zu gestalten. Über den Head wurde bisher fast nicht gesprochen. Das wird im Kapitel "Der Head" nachgeholt.
Um einen Link zu setzen, der direkt auf diese Seite führt,
verwende folgende Url: