Tässä kuvakaappauksessa aiomme rakentaa kommenttilomakkeen HTML / CSS: ssä. Kommenttilomakkeen merkinnät asuvat teeman kommentit.php-tiedostossa. Etsimme elementtiä sen löytämiseksi.
Laadimme kukin kolmesta syötteestä (nimi, sähköpostiosoite, URL-osoite) käyttämällä käytössä olevaa ruudukkojärjestelmää. Poika, olemme saaneet siitä hyvää hyötyä?
Meillä on jo CSS-tiedosto yksinomaan kommentteihin liittyville asioille, joten siellä me työskentelemme. Ensimmäinen asia, jonka kirjoitamme, on tehdä pienen ruudukon syötteet 100% leveiksi, jotta ne sopivat sarakkeeseen. Divs tekisi tämän luonnollisesti, mutta tulot käyttäytyvät enemmän kuin inline-block eivätkä täytä automaattisesti vanhempiensa konttien leveyttä. Hämmentämme myös päätekstialuetta, joten se on 100% leveä ja ei niin pitkä kuin se oli. Päätämme olla häiritsemättä tekstialueen koon muuttamista. Se ei todellakaan riko mitään.
Sitten saamme Vastaa-linkin toimivan. JavaScript toimii jo hienosti, koska emme sekoittaneet sen lomakkeen tunnusta, johon JavaScript luottaa. Meidän on kuitenkin tehtävä joukko parannuksia, kuten antamalla lomakkeelle harmaa tausta, jotta sen muotoilu toimii.
Vietämme loppuajan muutamalla joitain asioita mediakyselyillä, jotta lomake näyttää OK pieniltä näytöiltä.