Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 7 - HTML-Formulare

Professionelle Websites: Basiswissen HTML und CSS Teil 7 - HTML-Formulare

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


10 HTML-Formulare

Webseiten mit der Funktion »Webpräsenz« sind nur eine mögliche Variante. Vieles, was das Web attraktiv macht, fällt eher unter den Begriff »Webanwendung«. Der »Seitenbesucher « wird zum »User«, der Suchen startet, Beiträge in Foren schreibt, persönliche digitale Fotoalben verwaltet, Kleinanzeigen aufgibt usw. Auch dabei basieren die Webseiten auf HTML.
Die nötige Interaktion mit dem Anwender beginnt in der Regel mit einem Formular. HTML stellt eine Reihe von Standard-Formularelementen zur Verfügung, die sich an den Dialogelementen moderner grafischer Benutzeroberflächen orientieren. So gibt es Eingabefelder, Radiobuttons, Checkboxen, Auswahllisten, Schaltflächen usw.
Mit dem Formular allein ist es jedoch nicht getan. Daten, die ein Anwender in einem Formular bestimmt und absendet, müssen irgendwie verarbeitet werden. Das Instrument dafür sind serverseitige Scripts, beispielsweise PHP-Scripts. Richtige Anwendungen für Formulare werden wir deshalb auch erst im Buchteil zu PHP und MySQL finden. Im vorliegenden Abschnitt konzentrieren wir uns auf die Strukturierungs- und Gestaltungsmöglichkeiten von Formularen auf Webseiten.

Bilder

Abbildung 4.70: Komplexes und gestyltes HTML-Formular (Ausschnitt)

10.1 Formularbereiche

Formulare werden in HTML durch <form...>...</form> markiert. Im einleitenden <form>- Tag werden wichtige Informationen notiert, z.B. was passieren soll, wenn der Anwender das Formular absendet. Zwischen <form> und </form> können Formularelemente notiert werden, aber auch Text und andere Elemente, die dazu beitragen, das Formular zu strukturieren.

Betrachten wir zunächst das einleitende <form>-Tag in einem Beispiel:

<form action="/index.php" method="post">
<!-- Formularinhalt -->
</form>

In diesem Beispiel wird bestimmt, dass die im Formular eingegebenen oder ausgewählten Daten beim Absenden an ein PHP-Script namens index.php, das sich im Wurzelverzeichnis des Webservers befindet, übertragen werden. Zuständig für die Verarbeitungsadresse ist das Attribut action=, das als Wert einen URI erwartet. Es kann sich also um eine beliebige geeignete Internetadresse oder um ein lokal referenziertes Script handeln.

Erlaubt sind auch Angaben des Typs mailto:jemand@irgendwo.xy. In diesem Fall sollte im <form>- ag unbedingt zusätzlich enctype="text/plain" notiert werden. Der Browser versucht dann, die Formulardaten über eine lokale Mail-Schnittstelle an die angegebene Mail- Adresse zu senden. Sicherlich ist diese Form der Formularverarbeitung die einfachste. Als Seitenanbieter gibt man einfach seine eigene Mail-Adresse in dieses Schema ein und schon bekommt man alle Formulardaten, die Anwender absenden, als E-Mail zugeschickt. Allerdings ist von dieser Praxis dringend abzuraten. Der Mail-Versand funktioniert nämlich bei vielen Anwendern nicht, da Browser normalerweise keine eigene Schnittstelle für den Mailversand besitzen und die erfolgreiche Kommunikation der Formulardaten vom Browser an ein Mail-Programm von vielen vagen Systemfaktoren abhängt. Bei betroffenen Anwendern wird Ihr Formular also für Ärger sorgen, da sie ein Formular, für dessen Ausfüllen sie möglicherweise einige Zeit investiert haben, am Ende nicht absenden können. Als Wert für das action-Attribut sollte also bei allen professionellen Angeboten ein Script angegeben werden, das die eingegebenen Daten ordentlich verarbeitet.

Ebenso wichtig wie das action-Attribut ist das Attribut method=. Als Werte sind hier entweder get oder post möglich. Damit wird die Art bestimmt, wie dem datenverarbeitenden Script die Daten übergeben werden. Auf die Details werden wir erst später im Buch eingehen. Doch auf eine leicht erkennbare Unterscheidung zwischen den Übertragungsmethoden GET und POST sei hier schon hingewiesen: Bei der GET-Methode werden die Formulardaten über den URI übertragen. In der Adresszeile des Browsers ist das daran erkennbar, dass dort nach Absenden des Formulars, also beim Aufruf des bei action= angegebenen Scripts, alle Namen und Werte der Formularelemente in einer Zeichenkette erscheinen. Nach Eingabe eines Suchbegriffs in Google erscheint im Browser beispielsweise:

http://www.google.de/search?hl=de&q=Siebenb%C3%BCrgen&btnG=Google-
Suche&meta=

Ein Quelltextauszug aus der Google-Seite mit dem Formular zur Suche lautet:

<form name="gs" method="GET" action="/search">

Das datenverarbeitende Script hat also den Dateinamen search und liegt im Wurzelverzeichnis des Webservers. Die Übertragungsmethode GET sorgt dafür, dass die eingegebenen Daten des Suchformulars im URI stehen. Bei der POST-Methode ist dies nicht der Fall. Das Script erhält die Daten in diesem Fall über den Standard-Input-Kanal des Server- Rechners.

Welche Übertragungsmethode Sie in einem Formular angeben müssen, hängt davon ab, welche der Übertragungsmethoden vom verarbeitenden Script ausgewertet werden. Wenn Sie das Script selber programmieren, können Sie die Methode selbst bestimmen. Handelt es sich um ein fremdprogrammiertes Script, muss die Schnittstelle von Daten, die diesem Script übergeben werden können, vom Programmierer oder Anbieter ohnehin dokumentiert sein. Dazu gehört auch die vom Script erwartete Übertragungsmethode. Bei mailto-Formularen muss die Methode POST gewählt werden.

Das einleitende <form>-Tag kann noch weitere Attribute enthalten, z.B. das name-Attribut, wie im obigen Beispielformular von Google erkennbar. Dieses ist vor allem in Zusammenhang mit JavaScript von Bedeutung. Im Buchteil über JavaScript werden wir darauf noch näher eingehen. Weitere Attribute lernen Sie in Abschnitt 4.10.3 über die Optimierung von Formularen kennen.

10.2 Formularelemente

Die nachfolgend vorgestellten Formularelemente können Sie zwischen <form> und </form> notieren.

Eingabefelder, Radiobuttons, Checkboxen und Schaltflächen
Eine ganze Reihe von Formularelementen in HTML werden alle nach dem gleichen Schema ausgezeichnet:

<input type="..." name="..." value="...">

Bilder

Tabelle 4.20: Formularelemente mit dem input-Element (Fortsetzung)

Einzeilige Eingabefelder eignen sich für alle Arten von Einzeldaten wie Namen, Mail- Adressen, Telefonnummern, Suchausdrücke usw. Passwortfelder sollten nur für entsprechende Zwecke genutzt werden. Dabei ist es wichtig zu wissen, dass lediglich die Darstellung am Bildschirm verschleiert wird. Die eingegebenen Daten werden dadurch noch nicht verschlüsselt.

Radiobuttons sind nur als Gruppe sinnvoll. Dabei erhalten alle zur Gruppe gehörigen Radiobuttons bei name= den gleichen Wert. Der Browser reagiert so, dass immer nur einer der Radiobuttons aktivierbar ist. Eine sinnvolle Anwendung sind beispielsweise zwei Radiobuttons zur Auswahl des Geschlechts männlich oder weiblich.
Checkboxen eignen sich vor allem zum Ein-/Ausschalten von Optionen wie etwa »Groß-/ Kleinschreibung unterscheiden«.
Sowohl bei Radiobuttons als auch bei Checkboxen können Sie im <input>-Tag das Standalone- Attribut checked (in XHTML: checked="checked") notieren. Damit erzwingen Sie, dass das entsprechende Element beim Aufrufen oder Zurücksetzen des Formulars vorausgewählt ist. Bei zusammengehörigen Radiobuttons kann natürlich nur eines der Elemente vorausgewählt werden.

Bei den Schaltflächen unterscheidet HTML grundsätzlich zwischen funktionslosen Schaltflächen (type="button") und den beiden vordefinierten Schaltflächen zum Absenden der Formulareingaben (»OK«-Funktionalität bzw. Submit-Button – type="submit") und zum Zurücksetzen der Formulareingaben (»Abbrechen«-Funktionalität bzw. Reset-Button – type="reset"). Funktionslose Schaltflächen sind vor allem für clientseitige Interaktionsverarbeitung mit JavaScript gedacht. Die beiden anderen Typen sind dagegen Nachbildungen der Standardschaltflächen von Dialogen, wie man sie auch bei modernen grafischen Benutzeroberflächen kennt. Die reset-Schaltfläche ist jedoch, was Usability betrifft, mit Vorsicht zu genießen, vor allem bei umfangreicheren Formularen. Ein unachtsamer Anwenderklick auf eine solche Schaltfläche und alle zuvor getätigten Formulareingaben sind unwiderruflich weg. Die meisten Formulare bieten daher nur die submit- Schaltfläche an.

Die Beschriftung der Schaltfläche wird in allen Fällen im value-Attribut festgelegt.
Die Auszeichnung von Schaltflächen über <input ...> ist nur die ältere von zwei Varianten. Für die neuere Variante wurde mit HTML 4.0 das button-Element eingeführt. Die folgenden beiden Beispiele bewirken im Browser letztlich das Gleiche:

<input type="submit" value="Absenden">
<button type="submit" value="Absenden"></button>

Der Unterschied besteht vor allem darin, dass das input-Element ein Standalone-Element ohne End-Tag ist (in XHTML muss es daher in der Form <input .../> notiert werden). Das button-Element erlaubt dagegen Elementinhalt, und zwar sowohl Text als auch Blockund Inline-Elemente. Auf diese Weise können Sie Buttonbeschriftungen auffällig gestalten, beispielsweise auch mit Grafiken.

Die Attribute name= und value= bestimmen die Daten, die beim Absenden des Formulars übertragen werden. Das name-Attribut bezeichnet den Namen eines Parameters und das value- Attribut dessen Wert. Während das name-Attribut bei allen input-Typen außer bei submit und reset obligatorisch ist, ist das value-Attribut nicht zwingend erforderlich, da der Wert zumindest bei Eingabefeldern, Radiobuttons, Checkboxen usw. durch den Anwender bestimmt wird. Das value- Attribut eignet sich bei Eingabefeldern jedoch dazu, einen Default-Wert vorzugeben.

Beispiel:
URL-Adresse: <input type="text" name="url" value="http:// ">

In diesem Fall wird das Eingabefeld mit dem Namen url mit der Zeichenfolge http:// vorbelegt.

Bei der Wertzuweisung an das name-Attribut gelten gewisse Regeln. Der Parametername muss mit einem Buchstaben A–Z oder a–z beginnen. Als weitere Zeichen sind ebenfalls A–Z und a–z erlaubt sowie die Ziffern 0–9 und die Zeichen für Unterstrich (_), den Bindestrich (-), Doppelpunkt (:) und Punkt (.). In Hinblick auf Programmiersprachen wie Java- Script oder PHP, die auf die Parameter über diese Namen zugreifen, sollten Sie sich jedoch unbedingt auf Buchstaben, Ziffern und Unterstrich beschränken. Groß- und Kleinschreibung werden bei den genannten Programmiersprachen ebenfalls unterschieden.

Auf die optische Gestaltung von Elementen wie Eingabefeldern, wozu auch die Bestimmung von angezeigter Breite gehört, gehen wir in Abschnitt 4.10.4 ein. Die Breite eines Eingabefelds hat jedoch nichts damit zu tun, wie viele Zeichen in dem Feld eingegeben werden können. Um die Anzahl der möglichen Zeichen in einem Feld zu begrenzen, benötigen Sie das maxlength-Attribut.

Ein Beispiel:
Vorname: <input type="text" name="given_name" maxlength="30">

In diesem Beispiel wird durch die Angabe maxlength="30" festgelegt, dass der Browser von Eingaben in diesem Feld maximal die 30 ersten Zeichen übertragen soll. Solche Begrenzungsangaben sind wichtig, wenn das verarbeitende Script die eingegebenen Daten beispielsweise in eine Datenbank schreibt, in der die Feldlängen entsprechend begrenzt sind. Allerdings ist auf die Zuverlässigkeit der Browser bei der Interpretation des maxlength-Attributs kein Verlass. Stattdessen empfiehlt es sich in jedem Fall, Feldeingaben vor dem Schreiben in eine Datenbank auch auf ihre Länge hin zu prüfen und gegebenenfalls abzuschneiden.

Speziellere Formen des input-Elements sind type="image", type="file" und type="hidden".

Die Angabe type="image" ersetzt type="submit" und ist funktionsgleich. Anstelle einer Standardschaltfläche kann eine frei wählbare Grafik als Absende-Button definiert werden, wie im folgenden Beispiel:

<input type="image" src="ok.png" alt="Absenden">

Die gewünschte Grafik wird beim src-Attribut als URI zugewiesen. Außerdem sollten Sie in diesem Fall auch das alt-Attribut notieren, das den Alternativtext enthält, falls die Grafik nicht angezeigt werden kann.

Die gleiche Funktionalität wie durch type="image" erreichen Sie übrigens über das button- Element wie folgt:

<button type="submit">
<img src="ok.png" alt="Absenden">
</button>

Versteckte Formularelemente (type="hidden") sind nur in Zusammenhang mit Scripting von Bedeutung. Wir werden deshalb erst bei den Scriptsprachen näher darauf eingehen.

Nicht ganz unproblematisch ist das input-Element mit der Funktionalität Datei-Upload (type="file"). Das serverseitige Script, das auf diese Weise Dateien vom Anwender übertragen bekommt, muss auf jeden Fall eine Reihe von Sicherheitschecks durchführen, um den Server nicht zu gefährden. Denn Dateien können Viren transportieren, sehr groß sein usw. Die erlaubte Maximalgröße ist zwar in HTML wie auch bei der Zeichenlänge von Eingabefeldern durch das maxlength-Attribut begrenzbar. Doch wie schon erwähnt ist kein Verlass darauf, dass alle Browser das Attribut konsequent beachten.
Wenn Sie in ein Formular ein File-Upload-Feld integrieren, sollte das einleitende <form>- Tag folgende Angaben erhalten:

<form action="..." method="post" enctype="multipart/form-data">

Die enctype-Angabe ist wichtig, damit serverseitig erkannt werden kann, dass es sich um mehrteilige Daten handelt. Der Wert multipart/form-data ist eine Mime-Type-Angabe für solche Zwecke. Als Übertragungsmethode sollte im Fall von File-Upload stets die POSTMethode gewählt werden.

Im <input>-Tag ist es außerdem möglich, mithilfe eines accept-Attributs die Dateiauswahl zu begrenzen, z.B.:

<input name="Datei" type="file" maxlength="100000" accept="image/*">

In diesem Beispiel wird dem Anwender erlaubt, eine lokal gespeicherte Grafikdatei (image/) beliebigen Typs (*) mit einer Maximalgröße von 100.000 Byte zum Hochladen auszuwählen.

Mehrzeilige Eingabebereiche
Ein mehrzeiliger Eingabebereich eignet sich für Freitext aller Art, etwa für Notizen, Bemerkungen, oder bei einem Forum oder Gästebuch für den Beitragstext. In HTML gibt es dafür ein eigenes Element:

<textarea name="bemerkung" cols="50" rows="10">Platz für Ihre Bemerkungen!</
textarea>

Das textarea-Element besteht aus Anfangs- und End-Tag. Dazwischen kann Text notiert werden. Dieser wird als Vorbelegungstext interpretiert.

Bilder

Abbildung 4.71: Mehrzeiliger Eingabebereich (textarea-Element)

Falls der Anwender mehr Text eingibt als die Größe des Bereichs zulässt, fügt der Browser automatisch eine Scrollleiste ein. Die Größe des Bereichs können Sie durch die Attribute rows= (Anzahl Zeilen) und cols= (Anzahl Spalten) festlegen. Diese Angaben sind allerdings nur für textmodusbasierte Browser wirklich von Bedeutung. Für grafische Browser empfiehlt es sich, die Größe des Eingabefelds zusätzlich mit entsprechenden CSS-Eigenschaften (width und height) festzulegen (in Zusammenhang mit der optischen Gestaltung von Formularen gehen wir noch genauer darauf ein).

Eingegebener Text wird übrigens automatisch umgebrochen. Durch Betätigen der (Enter)-Taste kann der Anwender Zeilenumbrüche im Text erzwingen.

Auswahllisten und Drop-down-Listen
HTML bietet ein Element für Listenauswahl in Formularen an: das select-Element. Ob es sich um eine längere Liste mit mehreren sichtbaren Einträgen handelt oder um eine Dropdown- Liste, die der Anwender aufklappen kann, bestimmen Sie durch ein Attribut.

Bilder

Abbildung 4.72: Auswahlliste als Liste mit mehreren Einträgen oder als Drop-down-Liste

Ein Beispiel:
<select name="pim_modul" size="4">
<option value="null" selected>[Bitte auswählen]</option>
<option value="adressen">Adressen</option>
<option value="aufgaben">Aufgaben</option>
<option value="termine">Termine</option>
<option value="events">Ereignisse</option>
<option value="notizen">Notizen</option>
<option value="journal">Journal</option>
</select>

Die Liste wird in <select>...</select> eingeschlossen. Die einzelnen Listeneinträge werden durch <option>...</option> markiert. Der Text zwischen <option> und </option> ist der Text, den der Anwender als Listeneintrag angeboten bekommt. Der Wert des Attributs value= ist dagegen der Wert, der beim Absenden der Formulardaten als der ausgewählte Listenwert an das verarbeitende Script übertragen wird.

Das einleitende <select>-Element erhält bei name= den Namen des Parameters, unter dem die Listenauswahl an das verarbeitende Script übergeben wird. Das Attribut size= bestimmt das Aussehen der Liste. Weisen Sie als Wert 1 zu, ist das Ergebnis eine Dropdown- Liste. Weisen Sie einen höheren Wert zu, ist das Ergebnis eine Liste mit so vielen sichtbaren Einträgen wie im Wert angegeben. Enthält die Liste mehr Einträge als bei size= angegeben, kann der Browser dem Anwender automatisch eine Scrollleiste anzeigen.
Das obige Beispiel zeigt noch eine andere Möglichkeit: Auswahllisten können eine Default- Auswahl enthalten. Eines der notierten option-Elemente können Sie durch das Standalone-Attribut selected als den vorausgewählten Listeneintrag bestimmen. Wenn Sie mit XHTML arbeiten, notieren Sie selected="selected".

In vielen Fällen ist es auch sinnvoll, einen Eintrag anzubieten, der keinen Nutzwert hat und stattdessen zur Auswahl auffordert, so wie im Beispiel das erste notierte option-Element.

Für längere Listen mit logisch gruppierbaren Einträgen bietet HTML die Möglichkeit an, Listeneinträge zu Gruppen zusammenzufassen.

Ein Beispiel: <select name="country" size="7">
<optgroup label="Europa">
<option value="de">Deutschland</option>
<option value="au">Österreich</option>
<option value="it">Italien</option>
<option value="es">Spanien</option>
</optgroup>
<optgroup label="Afrika">
<option value="eg">Ägypten</option>
<option value="ke">Kenia</option>
<option value="ug">Uganda</option>
</optgroup>
</select>

Die Gruppierung wird durch Einfügen von optgroup-Elementen erreicht. Zwischen <optgroup> und </optgroup> werden die jeweils zur Gruppe gehörigen Listeneinträge wie gewohnt mithilfe von option-Elementen notiert. Das einleitende <optgroup>-Tag erhält über das Attribut label= den Wert, der als Gruppenüberschrift angezeigt werden soll.

Bilder

Abbildung 4.73: Auswahlliste mit gruppierten Einträgen

Moderne Webbrowser setzen gruppierte Listen in der Regel so um wie abgebildet.

Bei manchen Listen kann es auch sinnvoll sein, dem Anwender die Auswahl mehrerer Einträge zu erlauben. HTML-seitig ist das kein Problem. Im einleitenden <select>-Tag wird einfach das Standalone-Attribut multiple (in XHTML: multiple="multiple") eingefügt. Problematischer ist es, dass der Anwender nicht weiß, dass er mehrere Einträge auswählen kann, und meistens auch gar nicht, wie. Bei expliziter Mehrfachauswahl ist es also zweckmäßig, im umgebenden Text des Elements auf die Möglichkeit der Mehrfachauswahl hinzuweisen. Da viele Anwender auch nicht wissen, dass sie mehrere Einträge durch Anklicken bei gedrückter (Strg)-Taste auswählen können, kann auch dazu ein entsprechender Hinweis im Text nicht schaden.

10.3 Formulardesign und Formularoptimierung

Seiten mit Formularen werden von Anwendern meist länger angezeigt und intensiver wahrgenommen als andere Seiten. Allein schon deshalb ist es Anbieterpflicht, Formulare so zu gestalten, dass der Anwender sich ohne Probleme darin zurechtfindet.

Folgende Punkte sind wichtig:
- Formularbereiche sollten optisch erkennbar sein.
- Feldbeschriftungen und Formularelemente sollten einheitlich zueinander ausgerichtet sein. Der Zusammenhang zwischen einer Feldbeschriftung und dem zugehörigen Feld muss eindeutig erkennbar sein.
- Eingabefelder sollten ordentlich positioniert sein und so weit sinnvoll eine einheitliche Länge haben, damit das Formular nicht zu unruhig wirkt.
- In umfangreicheren Formularen sollten logisch/thematische zusammengehörige Elemente gruppiert werden. Die Gruppen sollten Gruppenüberschriften erhalten.
- Wenn Felder Standardwerte haben, kann dem Anwender Arbeit erspart werden, indem die Felder mit den Standardwerten vorbelegt sind oder Standardwerte voreingestellt oder vorausgewählt sind.
- Felder, deren Zweck sich nicht selbstverständlich erschließt, oder Felder, die als Wert ein bestimmtes Format oder einen bestimmten Wertebereich erhalten, sollten erläutert werden.
- Felder, die für das verarbeitende Script Pflichtfelder sind, sollten dem Anwender als solche kenntlich gemacht werden.

KAnhand eines einfachen Beispielformulars sollen diese Punkte erläutert werden. Der vollständige
Quelltext der HTML-Datei des Beispiels lautet:

Listing 4.10: HTML-Datei mit strukturiertem Formular

Bilder


In einem HTML-4.0- und CSS-fähigen Browser sieht die Beispieldatei etwa folgendermaßen aus:

Bilder

Abbildung 4.74: Strukturiertes Formular

Das Formular selbst wird im Beispiel optisch gekennzeichnet durch die hellgraue Hintergrundeinfärbung (<form ... style="background-color:#DDDDDD; ...">). Für die Gruppierung der einzelnen Bereiche wird ein eigens dafür gedachtes HTML-Element benutzt: das fieldset- lement. Insgesamt werden im Beispiel drei solcher Fieldsets definiert, erkennbar an den Rändern, die sie erzeugen. Mit <fieldset>...</fieldset> wird der gewünschte Bereich des Formulars eingeschlossen. Hinter jedem einleitenden <fieldset>-Tag folgt jedoch noch ein Text, der mit <legend>...</legend> ausgezeichnet ist. Dieser Text wird als Gruppenüberschrift des fieldset- ereichs angezeigt und vom Browser bei der Anzeige links oben in den fieldset-Rahmen positioniert.

Einen Nachteil haben die fieldset-Bereiche allerdings: Sie verhindern, dass eine durchgängige rahmenlose Tabelle notiert werden kann, um Beschriftungen und Formularelemente zueinander auszurichten. Deshalb übernehmen im Beispiel zwei solcher Tabellen diese Aufgabe. Durch geeignete CSS-Angaben werden die Zellen mit den Feldbeschriftungen rechtsbündig und wo nötig am oberen Rand ausgerichtet. Die einzeiligen Eingabefelder erhalten durch die CSS-Eigenschaft width die gleiche Länge, auch wenn im Passwortfeld nur zehn Zeichen eingegeben werden können. Durch die einheitliche Länge wirkt das Formular jedoch ruhiger. Stattdessen wird der Anwender hinter den Eingabefeldern durch Kurzhinweise darüber aufgeklärt, wie lange die Feldeingaben maximal sein dürfen.

Durch das Markup der rahmenlosen Tabelle stehen Feldbeschriftung und Formularfeld nicht unmittelbar beieinander. Bei nicht visueller, also z.B. akustischer Ausgabe der Webseite könnte dies zu Problemen bei der Zuordnung von Beschriftung und Feld führen. HTML bietet hierfür eine Lösung an, die wir im Beispielformular ebenfalls verwendet haben. Der Beschriftungstext wird jeweils mit <label for="...">...</label> ausgezeichnet. Das for-Attribut erhält als Wert einen id-Namen. Im zugehörigen Formularelement wird dieser Name in einem id-Attribut notiert. Dadurch wird ein logischer Zusammenhang zwischen Beschriftung und Formularelement hergestellt.

Für die Felder Benutzername und Passwort gibt es keine sinnvollen Vorbelegungswerte. Die beiden Radiobutton-Gruppen der Optionen Cookies und Benutzername dagegen erhalten mithilfe des Attributs checked je eine Default-Auswahl. Auf diese Weise ist sichergestellt, dass in jedem Fall eine gültige Option beim Absenden des Formulars übertragen wird.
Der Submit-Button zum Absenden des Formulars wird im Beispiel mithilfe des button-Elements realisiert. Grund ist, dass die Beschriftung einen als unterstrichen formatierten Buchstaben enthält (das »s« bei Login senden). Bei einer Wertzuweisung des Beschriftungstextes an das value-Attribut eines <input type="submit">-Konstrukts wäre das nicht möglich. Unterstrichen wird das »s« deshalb, weil im einleitenden <button>-Tag das Attribut accesskey=" s" notiert ist. Das accesskey- Attribut funktioniert in Formularelementen genauso wie bei Hyperlinks. Durch einen Hotkey wie (Alt)+(s) (browserabhängig, siehe auch Tabelle 4.18 auf Seite 193) kann der Anwender das Formular über die Tastatur absenden.

Ebenso wie das accesskey-Attribut kann in Formularelementen analog zu Hyperlinks ein tabindex-Attribut notiert werden. Und genauso wie bei den Links kann durch die als Wert zugewiesene Zahl die Reihenfolge beim Anspringen der Felder über die (ª)-Taste festgelegt werden.

10.4 Optische Verfeinerung von Formularen mit CSS

CSS ist, wie im Beispiel des vorherigen Abschnitts gezeigt, durchaus auch auf Formularelemente anwendbar. Bei Eingabefeldern, aber auch bei Auswahllisten und Schaltflächen lässt sich mit der CSS-Eigenschaft width eine gewünschte Breite festlegen. Bei textarea-Elementen für mehrzeilige Eingaben kann die Höhe wie erwartet durch height bestimmt werden. Möglich ist jedoch noch viel mehr: angefangen von eher ästhetischer Beeinflussung wie rahmenlose Eingabefelder, farbige Feldhintergründe oder Schriftformatierung bei Eingabefeldern bis hin zu sinnigen Möglichkeiten wie der rechtsbündigen Ausrichtung von Eingabefeldern für numerische Werte bleiben kaum Wünsche offen.

Da die bekannten Browser zum Rendern von Formularelementen teilweise auf Betriebssystemressourcen zurückgreifen, sind den Gestaltungsmöglichkeiten auf dieser Ebene jedoch auch Grenzen gesetzt. So kann es passieren, dass die Unterdrückung des Rahmens bei Auswahllisten nicht funktioniert oder eine Checkbox einfach keine andere Hintergrundfarbe annehmen will.

Ein Beispiel soll einige der Möglichkeiten demonstrieren:

Bilder

Abbildung 4.75: Formular und Eingabefelder mit CSS gestaltet

Im abgebildeten Beispiel wurde im zentralen style-Bereich definiert:

form {
background-color:rgb(255,204,153);
padding:10px;
}
input.text {
border:none;
padding:3px;
background-color:rgb(255,255,153);
font-family:Times,serif;
font-size:17px;
font-weight:bold;
}

Das form-Element erhält eine orangefarbene Hintergrundfarbe und einen Innenabstand von 10 Pixel zum Inhalt. Für Eingabefelder, die das Attribut class="text" haben, wird festgelegt, dass der Rahmen unterdrückt wird. Zum Eingabetext soll ein Innenabstand von 3 Pixel eingehalten werden. Das Feld erhält eine gelbe Hintergrundfarbe. Vom Anwender eingegebener Text soll in Times oder einer anderen Serifenschrift mit einer Schriftgröße von 17 Pixel und fett formatiert werden.

11 Allgemeine HTML-Attribute

Einige der HTML-Attribute, die in fast allen Elementen notiert werden dürfen, haben wir bereits kennen gelernt. Besonders attraktiv ist das title-Attribut, weil es einen sichtbaren und leicht nachvollziehbaren Output erzeugt, nämlich Tooltipp-Fenster beim Überfahren eines Elements mit der Maus. Gerade in den zuvor beschriebenen Formularelementen können title-Attribute gute Dienste leisten, indem sie Kurzhilfen zum jeweiligen Eingabefeld ausgeben, sobald der Anwender in das Feld positioniert.

Bilder

Abbildung 4.76: Kurzinfos zu Formularfeldern mit dem title-Attribut

Der Quelltextauszug zum Passwortfeld im abgebildeten Beispiel lautet:

<input type="password" maxlength="10" name="pwd"
id="pwd" style="width:200px"
title="Die Eingabe in diesem Feld wird aus
Sicherheitsgründen verdeckt angezeigt">

Hier noch mal alle Allgemeinattribute auf einen Blick:

- title= ermöglicht es, Elemente unabhängig von ihrem Inhalt mit einem Labeltext auszuzeichnen. Dieser Text wird von den meisten Browsern in Form eines Tooltipp-Fensters beim Überfahren des Elementbereichs mit der Maus eingeblendet.
- id= ermöglicht es, beliebigen Elementen eines HTML-Dokuments einen dokumentweit eindeutigen Namen zu geben. Dieser Name kann in zentralen CSS-Bereichen angesprochen werden, um elementindividuelle Formatierungen zentral zu definieren. Der Name ist aber auch von Bedeutung, wenn mit JavaScript über das standardisierte DOM (Document Object Model) auf ein bestimmtes Element zugegriffen werden soll.
- style= ermöglicht es, Elemente individuell mit CSS-Formaten zu gestalten.
- class= ermöglicht es, beliebige Elemente zu Klassen zusammenzufassen. Alle Elemente, die dieses Attribut enthalten und dabei den gleichen Klassennamen als Wert zugewiesen bekommen, gehören zur entsprechenden Klasse. Für eine solche Klasse können in zentralen CSS-Bereichen klassenspezifische Formate definiert werden.
- lang= ermöglicht es, texttragenden Elementen eine Sprache zuzuordnen. Der Wert sollte ein Sprachenkürzel entsprechend internationalem Standard sein (maßgeblich sind hierbei die Normen ISO 639-1 und ISO 639-2, zu finden auf den Webseiten der Library of Congress unter http://www.loc.gov/standards/iso639-2/).
- dir= ergänzt das lang-Attribut und erlaubt es, die Schreibrichtung zu bestimmen.

Ferner können in den meisten HTML-Elementen auch so genannte Event-Handler notiert werden, wie z.B. onMouseover=, onClick= usw. Diese stellen jedoch eine direkte Verknüpfung zu einer clientseitigen Programmiersprache wie JavaScript her. Deshalb behandeln wir sie auch erst im Buchteil über JavaScript/DOM


Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:53

Gute Tutorial leicht erklärt.

Portrait von williamo
  • 21.08.2009 - 14:48

sehr gute serie ..........

Portrait von Freistoss
  • 20.08.2009 - 12:14

Danke! Reicht mir völlig aus... Alles andere kann man sich selber erarbeiten...

Portrait von skyflight1981
Portrait von leg0lyZe
  • 30.03.2008 - 20:29

nicht schlecht, aber wenig neues

x
×
×