Responsyvumas ir formos

Dvi temos užbaigia takelį: kaip pritaikyti visą puslapį telefonui ir kaip duoti lankytojui būdą kažką parašyti atgal. Abi ateina su sąžiningu apribojimu, kurį verta suprasti dar prieš kuriant.

Responsyvus dizainas ir media užklausos

Vieną responsyvumo dalį jau turi — galerijos auto-fill tinklelis persidėlioja pats, be jokių taisyklių, prikabintų prie kokio nors pločio. Bet likusi puslapio dalis — ne: telefone navigacija vis dar dėvi savo darbalaukio tarpus. Reguliavimams pagal plotį naudoji media užklausą — CSS bloką, kuris taikomas tik tada, kai sąlyga apie ekraną yra teisinga:

@media (max-width: 640px) {
  .navbar { flex-wrap: wrap; }
  .grid { grid-template-columns: 1fr; }
}

Viskas viduje taikoma tik esant 640px pločiui ir mažiau. Tas max-width yra raktas į tai, kuria kryptimi CSS sudėtas:

• Darbalaukis-pirma (desktop-first) — bazinės taisyklės aprašo platų išdėstymą, o max-width užklausos jį apkarpo mažesniems ekranams. Šis stiliaus failas parašytas būtent taip.
• Mobilusis-pirma (mobile-first) — bazinės taisyklės aprašo telefono išdėstymą, o min-width užklausos prideda prie jo ekranui didėjant. Daug komandų tai renkasi: bazė lieka lengva silpniausiems įrenginiams, o kiekvienas didesnis ekranas tik prideda. Verta žinoti kaip kitą požiūrį — bet čia seki tą stiliaus failą, kurį turi, o jis yra darbalaukis-pirma.

Media užklausa neatlieka sunkiojo galerijos darbo — auto-fill jį jau padarė. Ji derina kraštus: priverčia švarų vieną stulpelį telefone (vietoj ankšto dviejų), leidžia navigacijai apsivynioti, sumažina puslapio tarpus. Tai sveikas pasidalijimas — responsyvu pagal nutylėjimą ten, kur gali, o media užklausos — konkrečioms vietoms, kurioms reikia postūmio.

Formos: pirmiausia užrašai

Formos laukas be užrašo (label) — spėjimas. Kiekvienas įvedimo laukas gauna <label>, susietą su juo sutampančiais for ir id:

<label for="contact-email">Email</label>
<input type="email" id="contact-email" name="email">

Tas ryšys atlieka du tikrus darbus: spragtelėjus užrašą fokusuojamas laukas (didesnis taikinys, patogiau liesti), o ekrano skaitytuvas praneša lauką pagal jo užrašą, o ne „redaguojamas tekstas, tuščia". placeholder nėra užrašas — jis dingsta vos tik pradedi rašyti, o pilkas vietaženklio tekstas dažniausiai neatitinka kontrasto. Naudok abu: užrašą, kuris lieka, ir vietaženklį, kuris pataria.

Įvedimo tipai atidirba savo vietą

type — ne dekoracija. type="email" telefone duoda @-klavišo klaviatūrą ir leidžia naršyklei patikrinti, ar reikšmė atrodo kaip el. paštas. <select> yra tinkamas valdiklis vienam iš fiksuoto rinkinio. <textarea> — ilgam tekstui. Tinkamo elemento pasirinkimas reiškia, kad naršyklė atlieka darbą, kurį kitaip rašytum ranka.

Natyvi validacija — dalis, kuri visiškai veikia

Pridėk required prie lauko, ir naršyklė nepateiks tuščio — ji sustoja, fokusuoja lauką ir parodo savo pačios pranešimą, naudotojo kalba, be jokio tavo kodo:

<input type="email" id="contact-email" name="email" required>
<textarea id="contact-message" minlength="20" required></textarea>

required, type="email", minlength="20" — naršyklė užtikrina visus tris prieš ką nors išsiunčiant. Tai ir yra šio žingsnio esmė: didelė formų validacijos dalis įtaisyta pačiame HTML, ir griebtis JavaScript, dar jos nepanaudojus, yra tuščias darbas.

Sąžiningas apribojimas: kas nutinka po Send

Štai dalis, kurios statinis puslapis negali, ir su ja verta susidurti tiesiai, o ne nustebti. Natyvi validacija veikia prieš pateikimą. Kas nutinka po — iš tikrųjų kažką padaryti su žinute — reikia vietos, kur ją siųsti, o tai reiškia serverį arba JavaScript. Statinis puslapis neturi nė vieno.

Tad kai teisingai užpildai formą ir paspaudi Send message, naršyklė daro savo paprastą numatytą veiksmą: perkrauna puslapį, prikabinusi tavo laukus prie URL kaip užklausos eilutę (?name=…&email=…), ir neparodo jokio patvirtinimo. Tai laukiama, ne tavo įvelta klaida — forma pasitvirtino, tada neturėjo kur pristatyti. Iš tikrųjų ją išsiųsti — būtent tai prideda du vėlesni takeliai: serverio dalies takelis priima ir išsaugo ją backend'e; kliento dalies takelis perima pateikimą su JavaScript ir kviečia API. Čia sudedi formą ir jos validaciją teisingai ir sustoji ties sąžiningu kraštu to, ką gali vien HTML ir CSS.