#114: Aufbau des Kommentarformulars

In diesem Screencast werden wir das Kommentarformular in HTML/CSS erstellen. Die Markup für das Kommentarformular befindet sich in der Datei comments.php in unserem Theme. Wir suchen nach dem `

`-Element, um es zu finden.

Wir gestalten jeden der drei Eingabefelder (Name, E-Mail, URL) mit unserem bestehenden Grid-System. Mann, haben wir das gut genutzt, oder?

Wir haben bereits eine CSS-Datei, die ausschließlich für Kommentar-bezogene Dinge gedacht ist, also werden wir dort arbeiten. Das Erste, was wir schreiben, ist, die Eingabefelder in unserem kleinen Grid zu 100 % Breite zu machen, damit sie in die Spalte passen. Divs würden das natürlich tun, aber Eingabefelder verhalten sich eher wie Inline-Block und füllen nicht automatisch die Breite ihres Elternelements aus. Wir haben auch das Haupt-Textfeld ein wenig bearbeitet, indem wir es 100 % breit und nicht so hoch gemacht haben, wie es war. Wir entscheiden uns, die Größenänderungsfunktion des Textfelds nicht anzufassen. Es kaputtet wirklich nichts.

Dann bringen wir den Antwort-Link zum Laufen. Der JavaScript-Code funktioniert bereits einwandfrei, da wir die ID für das Formular, auf das der JavaScript-Code angewiesen ist, nicht geändert haben. Wir müssen jedoch eine Reihe von Anpassungen vornehmen, wie z. B. dem Formular einen grauen Hintergrund zu geben, damit das Design funktioniert.

Wir verbringen den Rest der Zeit damit, einige Dinge mit Media Queries anzupassen, damit das Formular auf kleinen Bildschirmen gut aussieht.