HTML / CSS - Praxistutorial 3 - Grundaufbau
1. Die Abschnitte
- Überblick
- Grundaufbau
- Labeln
- Adresse
- Anstellung
- Daten
- Kenntnisse
- Mitteilung
2. Zunächst mal
... beschäftigen wir uns mal mit ein paar prinzipiellen Dingen. Wenn ihr euch denn den Basiscode gezogen habt, so öffnet mal im Ordner
HTML_CSS_Tutorial_3
die Datei formular.htm
mit dem Editor eurer Wahl. Das eigentliche HTML-Basisgerüst steht
schon, da wir es für dieses Tutorial nicht benötigen. Ach ja, die Doctype-Definition ist XHTML 1.0 Transitional. Ich hoffe, ihr erinnert
euch! Ansonsten erst mal ab zur Theorie!
3. Struktureller Aufbau
<form ...>
<form action="formular.htm" method="post"
enctype="multipart/form-data" accept="application/pdf">
</form>
Hier gibt es neben den üblichen Attributen action
und method
noch zwei, die ihr vielleicht nicht kennt. Da hätten
wir zum einen enctype="multipart/form-data"
. Diese Zusatzangabe benötigt man, wenn man einen Dateiupload per Formular einbauen
möchte. Nähere Infos zu dem diesem Thema inklusive der Verarbeitung findet ihr hier. Zum anderen
gibt es dann die Angabe accept="application/pdf"
. Damit legen wir fest, dass nur Dateien vom Typ PDF zugelassen sind. Das
ist zwar nicht unproblematisch, aber dazu findet ihr die entsprechenden Infos in selbigem Link.
Überschrift
Das packt ihr einfach in das <form ...>
-Tag. Mehr braucht man dazu nicht sagen.
<h1>Bewerberinformationen</h1>
<fieldset>
Da Formulare dazu neigen, immer länger und länger zu werden, kann man sie mittels <fieldset>
in logische Abschnitte
unterteilen. Wir werden hier fünf davon benötigen. Also baut die ebenfalls in das <form>
-Tag ein.
<!-- Bitte fünf mal einfügen -->
<fieldset>
</fieldset>
<legend>
Hierbei handelt es sich um die "Überschrift" des jeweiligen Abschnittes. Wenn ihr sie vergesst, so gibt zum Beispiel der HTML-Validator des Firefox eine Warnung aus.
<fieldset>
<legend>Adresse</legend>
</fieldset>
Baut also mal in jedes <fieldset>
ein <legend>
ein. Dabei vergebt ihr die folgenden Texte in der
vorgegebenen Reihenfolge: Adresse, Anstellung, Ihre Daten, Kenntnisse und zum Abschluss Mitteilung.
4. Das Ergebnis
Wenn ihr nun die formular.htm
im Browser aufruft, so fallen euch zwei Dinge auf. Zum Ersten bemerkt ihr sicher, dass jedes
<fieldset>
einen Rahmen hat und sich über die komplette Breite des Browserfensters zieht. Es handelt sich damit also
um das einzige originäre Blockelement innerhalb von Formularen.
Zweitens könnt ihr auch sehen, dass die <legend>
-Elemente leicht nach rechts versetzt mittig zum oberen Rahmen stehen.
Und auch noch einen kleinen Abstand zu selbigem haben.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt