Hauptmenü

Untermenü

HTML - Elemente - Formulare

1. Grundsätzliches

Formulare dienen in erster Linie der Kommunikation zwischen Anwender und Server. Klassische Beispiele sind Kontakt-, Registrier- oder Anmeldeformulare. Dazu kommen Anwendungen, wie zum Beispiel bei Suchmaschinen, Online-Shops oder Redaktionssystemen. Ich werde hier nur auf die einzelnen Elemente eingehen, mit der Verarbeitung werden wir uns bei der PHP-Programmierung beschäftigen.

Elementtypen

Bei Formularen gibt es drei Blockelemente, <form>, <fieldset> und <legend>. Alle anderen gehören zu den Inline-Elementen.

2. <form>

Mit diesem Element wird das Formular eingegrenzt. Alle Formularelemente, die außerhalb des <form>-Tags stehen, werden beim Senden der Inhalte ignoriert. Das Form-Element erwartet zwei Attribute, action und method. Mit action verweist man normalerweise auf ein serverseitiges Script (z.B. Perl, PHP, ASP), das die gesendeten Daten entgegennimmt und verarbeitet. Mit method wird die Art der Übertragung festgelegt. Dabei gibt es zwei Möglichkeiten, GET und POST. Im Moment reicht es völlig aus, zu wissen, dass man POST als Standardmethode wählen sollte.

Optional kann man analog zu den Links mit target auch noch ein Zielfenster eingeben. Wenn man mit JavaScript auf das Formular zugreifen möchte, so kann man mit dem Attribut name dem Formular noch einen Namen geben.


<form action="send.php" method="post" name="meines" target="_blank">
  ... Formularelemente ...
</form>

Zusätzlich besteht noch die Möglichkeit mit accept-charset einen Zeichensatz zu definieren. Allerdings ist dies nur in Ausnahmefällen nötig, wenn man im <head>-Bereich schon einen angegeben hat (was man auch tun sollte).

3. <fieldset>

Längere Formulare neigen zur Unübersichtlichkeit. Daher kann man sie in kleinere Abschnitte unterteilen. Die Betitelung erfolgt mit <legend>.


<fieldset>
  <legend>Adresse</legend>
  ... Formularelemente ...
</fieldset>
<fieldset>
  <legend>Produkte</legend>
  ... Formularelemente ...
</fieldset>

4. Tabulator-Reihenfolge und Tastatur-Kürzel

Moderne Browser erlauben es, die einzelnen Formularelemente mit der Tabulator-Taste anzuspringen. Normalerweise geschieht das in der Reihenfolge des Auftretens. Mit dem Attribut tabindex kann man die Reihenfolge beeinflussen. Es ist auf alle Elemente anwendbar.

Auch kann man mit dem Attribut accesskey so genannte Shortcuts festlegen, mit denen man zu den jeweiligen Formularelementen springen kann. Allerdings ist das je nach Browser unterschiedlich. Normalerweise ist das die "Alt"-Taste, manchmal auch "Strg" oder wie im Opera ein "Shift" plus "Esc".


<input type="text" name="feld_1" accesskey="a" tabindex="1">
<input type="text" name="feld_2" accesskey="b" tabindex="2">

5. Logische Beziehung von Text und Element

Um eine logische Beziehung von Texten zu Formularelementen herstellen zu können, benutzt man das label-Tag. Will man also darauf hinweisen, dass der Text "Firma" zum input-Element namens "company" gehört, geht man so vor:


<label for="company">Firma</label>
<input type="text" id="company" name="company">

Wichtig dabei ist, dass das Formularelement mit einer eindeutigen ID ausgezeichnet wird, da sonst kein Bezug hergestellt werden kann. Damit kann man auch elegant die <span>- und <div>-Orgien in Formularen umgehen.

6. Dateiuploads

Da dies ein etwas kompliziertes Thema ist, empfehle ich euch mein Tutorial. Für die Nicht-PHPler sei gesagt, dass ihr dort auch alle notwendigen Informationen findet.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt