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