I denne screencast vil vi komme ind i opbygningen af kommentarformularen i HTML / CSS. Markeringen af kommentarformularen lever i comments.php-filen i vores tema. Vi ser efter elementet for at finde det.
Vi lægger hver af de tre input (navn, e-mail, url) ud ved hjælp af det gittersystem, vi har på plads. Dreng, vi har fået god brug af det?
Vi har allerede en CSS-fil udelukkende til kommentarrelaterede ting, så det er her, vi arbejder. Den første ting, vi skriver, er at gøre input i vores lille gitter 100% bredt, så de passer inden for kolonnen. Divs ville gøre dette naturligt, men input opfører sig mere som inline-block og udfylder ikke automatisk deres overordnede containerbredde. Vi fikler også lidt med hovedtekstområdet, hvilket gør det 100% bredt og ikke så højt som det var. Vi beslutter ikke at rode med tekstområdets størrelse. Det bryder ikke rigtig noget.
Så får vi svarlinket til at fungere. JavaScript fungerer allerede fint, fordi vi ikke rodede med ID'et for den form, som JavaScript er afhængig af. Vi har dog brug for at lave en masse tweaks, som at give formularen en grå baggrund, så designet af det fungerer.
Vi bruger resten af tiden på at tilpasse nogle ting med medieforespørgsler, så formularen ser OK ud på små skærme.