Namų darbas — validacija ir responsyvumas

Namų darbas — išbandyk validaciją, sąžiningą apribojimą ir responsyvų išdėstymą.

1. Priversk naršyklę atsisakyti. Paspausk Send message su tuščia forma. Naršyklė turi sustoti, šokti prie pirmo tuščio lauko ir parodyti savo pačios pranešimą — atkreipk dėmesį, kad jis tavo naršyklės kalba, niekieno neparašytas. Dabar el. pašto lauke įrašyk notanemail ir pateik: kitas pranešimas. Įrašyk devynių simbolių žinutę ir pateik: minlength skundžiasi. Nė vieno iš jų neparašei.
2. Susidurk su sąžiningu kraštu. Teisingai užpildyk kiekvieną lauką ir paspausk Send. Stebėk, kas nutinka: puslapis perkraunamas su tavo atsakymais adreso juostoje kaip užklausos eilute (?name=…&email=…) ir be jokio patvirtinimo. Tai forma pasitvirtina, o tada neturi kur pristatyti — laukiama, nes nėra nei serverio, nei JavaScript. Mokėk vienu sakiniu pasakyti, kas priverstų Send iš tikrųjų veikti.
3. Užrašai ir klaviatūra. Spragtelėk kiekvieno lauko užrašo tekstą — fokusas turi šokti į lauką. Tada pereik visą formą Tab klavišu: name, email, subject, message, Send. Kiekvienas laukas pasiekiamas, kiekvienas rodo fokuso žiedą.
4. Sumažink iki telefono. Nutempk langą siaurą, žemiau 640px. Galerija krenta iki vieno stulpelio, navigacija apsivynioja į slenkamą eilę, o Send mygtukas tampa viso pločio. Virš 640px — darbalaukio išdėstymas; žemiau — telefono; tai daro vienas lūžio taškas.

Bandyk pats: naršyklės įrankiuose ištrink required iš el. pašto lauko ir pateik tuščią formą — ji nebeblokuoja to lauko. Tada pakeisk el. pašto lauko type="email" į type="text", įrašyk abc ir pateik — formos patikra irgi dingo. Grąžink abu. Tas eksperimentas parodo, kiek validacijos tie du maži atributai atliko nemokamai.

Privalomas rezultatas: forma blokuoja blogą įvestį natyviais pranešimais prieš pateikimą; gali pasakyti, kas nutinka teisingai paspaudus Send ir kodėl; užrašai fokusuoja savo laukus; ir išdėstymas švariai persijungia ties 640px.

Atsiskaitymui: ekrano nuotrauka su natyviu validacijos pranešimu ant el. pašto lauko ir vienas sakinys, įvardijantis, ką tikras projektas pridėtų, kad Send pristatytų žinutę.

Toliau. Dabar rankomis, vien iš HTML ir CSS, sudėjai visą puslapį — semantinį, apiformintą, responsyvų, prieinamą, validuojantį. Paskutinė pamoka užduoda akivaizdų klausimą: karkasas kaip Bootstrap didelę šito dalį būtų sukūręs per minutes. Ar tai būtų buvęs teisingas sprendimas? Ką griebimasis karkaso iš tikrųjų perka ir ko jis kainuoja? Jokio kodo — tik nuovoka nuspręsti, dabar, kai žinai, ką karkasas darytų už tave.