In deze screencast gaan we in op het bouwen van het commentaarformulier in HTML / CSS. De opmaak voor het reactieformulier leeft in het comments.php-bestand in ons thema. We zoeken het element om het te vinden.
We maken elk van de drie ingangen (naam, e-mail, url) op met behulp van het rastersysteem dat we hebben. Jongen, daar hebben we goed gebruik van gemaakt, hè?
We hebben al een CSS-bestand exclusief voor commentaargerelateerde zaken, dus daar gaan we aan werken. Het eerste dat we schrijven is om de invoer in ons kleine raster 100% breed te maken, zodat ze in de kolom passen. Div's zouden dit op natuurlijke wijze doen, maar invoer gedragen zich meer als inline-block en vullen niet automatisch de breedte van hun bovenliggende containers. We friemelen ook een beetje met het hoofdtekstgebied waardoor het 100% breed is en niet zo hoog als het was. We besluiten niet te knoeien met het formaat van het tekstgedeelte. Het breekt niet echt iets.
Dan krijgen we de Reply-link aan het werk. Het JavaScript werkt al prima, omdat we niet hebben geknoeid met de ID voor het formulier waarop het JavaScript vertrouwt. We moeten echter een aantal aanpassingen maken, zoals het formulier een grijze achtergrond geven zodat het ontwerp ervan werkt.
We besteden de rest van de tijd aan het aanpassen van sommige dingen met mediaquery's, zodat het formulier er goed uitziet op kleine schermen.