Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 3 - Überblick

1. Die Abschnitte

2. Browser

Das folgende Tutorial wurde mit den folgenden Browsern getestet. Auch wenn es in diesem Fall ziemlich egal ist, mit welchem ihr arbeitet.

3. Einführung

Immer wieder muss ich in meinem Lieblingsforum mit ansehen, wie wenig viele Anfänger von Formularen und deren Aufbau wissen. Deshalb arbeiten sie vor lauter Verzweiflung entweder noch mit Layouttabellen aus der Steinzeit oder mit einem geradezu unglaublichen Wust von <div>- und <span>-Elementen. Und darum wollen wir uns mal eines so basteln, wie es sich gehört.

4. Vorgehensweise

Zuerst bauen wir das Formular mit nacktem HTML auf. Dabei werde ich euch mit den entsprechenden Feinheiten vertraut machen. Gut, das Ergebnis sieht erst mal aus wie Sau, aber das soll uns zu diesem Zeitpunkt nicht kümmern. Erst wenn wir damit fertig sind, werden wir unser Formular im nächsten Tutorial per CSS gestalten.

Ein Hinweis

Hier geht es wirklich nur um nacktes HTML. Also nichts mit PHP oder JavaScript. Daher werde ich auch auf Attribute wie value, checked oder selected weitestgehend verzichten.

Wichtig!

Der Aufbau des Formulars enthält einige gravierende Inkonsistenzen. Soll heißen, dass die Vorgehensweise nicht(!) optimal ist. Ich mache das aber ganz bewusst. Zum einem, um euch verschieden Möglichkeiten zu zeigen und zum anderen, um euch im anschließenden Tutorial auf die Probleme hinzuweisen. Also nicht sofort rumnörgeln, erst bis zum Ende lesen!!!

5. Der Quellcode

Da vorformatierter Quellcode mittel <pre> nicht automatisch umbricht, musste ich das manuell machen. Als Maßstab habe ich eine Auflösung von 1024x768 genommen. Der Code wirkt daher ziemlich gestaucht, ihr solltet den einen oder anderen Teil per Hand euren Wünschen entsprechend umformatieren.

6. Das Thema und die Elemente

Wir bauen uns ein relativ einfaches Bewerbungsformular für die offene Stelle eines Webentwicklers. Dabei werde ich auf die gängigsten Formularelemente eingehen, die man im tagtäglichen Gebrauch nutzt. Also wirklich nichts Wildes.

7. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Es gibt diesmal nur eine einzige Datei, da wir, wie ich schon sagte, diesmal ohne CSS arbeiten werden.

8. Ein Hinweis

Wichtig!

Früher gab es hierzu mal einen Hinweis auf den HTML Validator. Aber mittlerweile existiert dazu ein eigenes Tutorial. Darum habe ich den Eintrag auch hier entfernt. Die Infos zum Thema "Fehlersuche" findet ihr unter obigem Link. Und bitte schaut euch das vorher(!) an. Ist muy importante!

weiter zum nächsten Abschnitt