Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 3 - Grundaufbau

1. Die Abschnitte

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