Linnukesed on veebil Formides olulised elemendid, eriti kui tegemist on kasutajatele Opt-in võimaluste pakkumisega, nagu näiteks tingimustega nõustumine või uudiskirjaga liitumine. Selles Juhendis vaatlen linnukeseid põhiaspekte, selgitan nende tööpõhimõtet ja annan sulle samm-sammult juhised, kuidas oma vormides linnukesi kasutada.
Linnukesi saab kasutada mitte ainult lihtsate Jah/Ei valikutena, vaid neid saab efektiivselt kasutada ka koos teiste vormielementidega. See juhend annab sulle vajaliku teadmise, et linnukesi õigesti rakendada ja kasutada.
Olulisemad teadmised
- Linnukesed on ideaalsed binäärotsuste tegemiseks vormides.
- Kui linnuke pole märgitud, siis seda pole edastatud.
- Mitmääratud linnukese vaikimisi väärtust peetakse tühjaks.
- Sa saad linnukesed vaikimisi märgitud, kasutades atribuuti 'checked'.
- Võime mõista linnukeste tööpõhimõtteid on oluline vormandmete õige käsitlemiseks.
Samm-sammult juhend
Samm 1: Linnukeste loomine
Alusta linnuste loomist HTML-is. Iga linnukese jaoks on vaja atribuuti type="checkbox" ja nimeomadust, et vormi esitamisel selle väärtust tuvastada.
Selles näites loome kaks linnukest: üks tingimustega nõustumiseks ja teine uudiskirja vastuvõtmiseks. Mõlemad linnukesed tuvastatakse nimedega „accept TNCs“ ja „receive Newsletter“.
Samm 2: Vormi seadistamine
Seadista oma vorm meetodiga GET või POST. Selles näites kasutame GET meetodit, et näha valikut URL-i parameetris.
Allpool on näide lihtsast vormist koos linnukestega. Veendu, et linnukesed oleksid ümbritsetud <form>-sildiga, et andmeid õigesti töödelda.
Samm 3: Edastatud andmete kontrollimine
Saada vorm ära, märkides ühtegi linnukest. Sa märkad, et URL-is midagi ei kuvata.
Linnukeste eripära on see, et kui neid ei ole märgistatud, siis neid ei edastata. See tähendab, et need ei ilmu URL-i parameetrites, mis jätab vastava kirje GET meetodi korral tühjaks.
Samm 4: Väärtuste lisamine linnukestele
Aktiveeri esimene linnuke ja saada vorm uuesti. Edastatavad andmed kuvavad ainult aktiveeritud linnukesed.
Edastatakse ainult see konkreetne linnuke, mis on tegelikult valitud. Sel juhul näed vormandmetes valitud linnukesele omistatud nime ja väärtust.
Samm 5: Vaikimisi väärtuse määramine
Et määrata linnuke vaikimisi valitud, lisa vastav linnuke atribuudile checked.
Kui kasutad atribuuti checked, siis laadimisel on linnuke juba aktiveeritud. See on kasulik, kui soovid, et teatud valikud oleksid vaikimisi valitud.
Samm 6: Kasutajasisendite töötlemine
Kui kasutaja esitab vormi sisendid, kontrolli linnukeste väärtused. Oota, et saad ainult märgistatud märkeruutude nimed edastatud andmetest.
On oluline tagada, et sinu taustsüsteem (nt Node.js'i ja Expressiga server) saab reageerida tühjadele või puuduvatele väärtustele vastavalt.
Kokkuvõte
Selles juhendis oled õppinud veebivormide märkeruutude põhitõed. Nüüd tead, kuidas luua märkeruute, mõista nende toimimist ja tagada, et andmed edastatakse õigesti. Märkeruudud pakuvad lihtsat viisi kasutaja eelistuste kogumiseks ning neid tuleks arvestada igas veebivormis.
Korduma kippuvad küsimused
Mis vahe on märkeruutudel ja raadionuppudel?Märkeruudud võimaldavad mitut valikut, samal ajal kui raadionupud võimaldavad vaid ühe valiku paljude hulgast.
Miks ei ilmu URL-parameetritesse märkeruut, kui see pole märgitud?Mitmemärgitud märkeruudul puudub väärtus ja seetõttu ei saadeta seda koos edastatavate vormiandmetega.
Kuidas seada märkeruut vaikimisi "valitud" olekusse?Lisa oma HTML-i märkeruudu jaoks atribuut checked.
Kas ma saan mitu märkeruutu korraga aktiveerida?Jah, kasutajad saavad üheaegselt valida mitu märkeruutu ühest vormist.
