Si të dizajnoni kutitë e kontrollit në CSS.

Ky udhëzues do t'ju prezantojë me Kutitë e kontrollit HTML dhe ju mësojnë se si t'i trajtoni ato në PHP.

Formulari i kutisë së vetme të kontrollit

Le të krijojmë një formë të thjeshtë me një kuti zgjedhjeje.

Keni nevojë për akses në internet?

NË Skripti PHP(skedar checkbox-form.php) është e mundur të lexohet vlera e fushës duke përdorur grupin $_POST. Nëse $_POST["formWheelchair"] është caktuar në PO, atëherë kutia e kontrollit në u zgjodh. Nëse kutia e kontrollit nuk zgjidhet, atëherë ndryshorja $_POST["formWheelchair"] nuk është vendosur.

Këtu është një shembull i përpunimit të formularit në PHP:

Ndryshorja $_POST["formWheelchair"] është vendosur në YES sepse atributi i vlerës është vendosur në etiketa hyrëseështë e barabartë me "PO" .

Atributi i vlerës mund të vendoset në 1 në vend të PO. Mos harroni të përditësoni kodin tuaj PHP sipas vlerave të vendosura.

Grupi i kutisë së kontrollit

Shpesh ka situata kur duhet të futni disa kuti kontrolli në një formë. Sidomos kur përdoruesit duhet t'i jepet e drejta për të zgjedhur nga disa opsione. Kjo është e rëndësishme sepse, për shembull, mund të zgjidhni vetëm një ndërprerës (radio).

Le të krijojmë një formë që i jep përdoruesit disa opsione për të zgjedhur.

Zgjidhni ndërtesat për të vizituar.
Ndërtesa Acorn
Salla kafe
Kompleksi Carnegie
Drake Commons
Elliot House

Ju lutemi vini re se të gjitha kutitë e kontrollit kanë të njëjtin emër (formDoor). Një emër tregon se të gjitha kutitë e kontrollit janë të ndërlidhura. Kllapa katrore tregojnë se të gjitha vlerat do të jenë të disponueshme nga një grup. Kjo do të thotë, $_POST["formDoor"] nuk do të kthejë një varg, si në shembullin e mësipërm, por në vend të kësaj do të kthejë një grup që përmban vlerat e kutive të kontrollit që janë zgjedhur nga përdoruesi.

Për shembull, nëse kontrolloj të gjitha kutitë, $_POST["formDoor"] do të kthejë një grup prej (A,B,C,D,E) . Në shembullin e mëposhtëm marrim dhe shfaqim të gjitha vlerat e grupit.

Funksioni bosh është i dobishëm në rast se përdoruesi nuk ka zgjedhur asgjë. Nëse grupi nuk është bosh, ne numërojmë numrin e kutive të zgjedhura duke përdorur funksionin e numërimit dhe shfaqim të gjitha vlerat duke përdorur një lak për.

Nëse zgjidhet kutia e kontrollit "Acorn Building", grupi do të përmbajë vlerën "A".

Kontrollimi nëse është zgjedhur një kuti kontrolli specifike

Shpesh ju duhet të kontrolloni nëse është zgjedhur një kuti kontrolli specifike. Për këtë ju mund të përdorni funksioni tjetër:

Funksioni IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) (foreach($_POST[$chkname] si $chkval) ( if($chkval == $value) ( ​​​​kthim i vërtetë;

Tani ju vetëm duhet të telefononi funksionin IsChecked(chkboxname,value). Për shembull:

Nëse (IsChecked ("formDoor","A")) ( //bëni ...)

Shënim: Ndryshe nga kontrollet e tjera të hyrjes, vlera e kutive të zgjedhjes përfshihet në të dhënat e dorëzuara vetëm nëse kutia e kontrollit është e zgjedhur aktualisht. Nëse është, atëherë vlera e atributit të vlerës së kutisë së kontrollit raportohet si vlera e hyrjes.

Përdorimi i hyrjeve të kutisë së kontrollit

Ne kemi mbuluar tashmë përdorimin më themelor të kutive të kontrollit më sipër. Le të shohim tani veçoritë dhe teknikat e tjera të zakonshme të lidhura me kutinë e kontrollit që do t'ju nevojiten.

Trajtimi i kutive të shumta të kontrollit

Shembulli që pamë më sipër përmbante vetëm një kuti kontrolli; në situata të botës reale ka të ngjarë të hasni kuti të shumta kontrolli. Nëse ato janë krejtësisht të palidhura, atëherë mund t'i trajtoni të gjitha veç e veç, siç tregohet më sipër. Megjithatë, nëse janë të gjitha të lidhura, gjërat nuk janë aq të thjeshta .

Për shembull, në demonstrimin e mëposhtëm ne përfshijmë kuti të shumta kontrolli për të lejuar përdoruesin të zgjedhë interesat e tij (shih versionin e plotë në seksion).

Zgjidhni interesat tuaja

Kodimi

Muzikë

Në këtë shembull do të shihni se ne i kemi dhënë çdo kutie të kontrollit të njëjtin emër (vini re kllapat në fund të emrit, i cili lejon që vlerat të dërgohen si një grup). Nëse të dyja kutitë e kontrollit janë të kontrolluara dhe n formulari është dorëzuar, do të merrni një varg çiftesh emra/vlerash të dorëzuara si kjo: interes=kodim&interes=muzikë . Kur këto të dhëna arrijnë në anën e serverit, duhet të jeni në gjendje t'i kapni si një grup vlerash të lidhura ​dhe trajtojeni atë në mënyrën e duhur - shihni Trajtoni kutitë e kontrollit të shumëfishta me një variabël të vetëm serveri, për shembull.

Kontrollimi i kutive si parazgjedhje

Për ta bërë kutinë e kontrollit të kontrolluar si parazgjedhje, thjesht i jepni atributin e zgjedhur. Shih shembullin e mëposhtëm:

Zgjidhni interesat tuaja

Kodimi

Muzikë

Sigurimi i një zone më të madhe të goditjes për kutitë tuaja të kontrollit

Në shembujt e mësipërm, mund të keni vënë re se mund të ndryshoni një kuti zgjedhjeje duke klikuar në elementin e lidhur që përfaqëson një titull për një artikull në një ndërfaqe përdoruesi."> element si dhe në vetë kutinë e kontrollit. Kjo është një veçori vërtet e dobishme e Forma HTML etiketat që e bëjnë më të lehtë klikimin e opsionit ti deshiron, veçanërisht në pajisjet me ekran të vogël si telefonat inteligjentë.

Përtej aksesueshmërisë, kjo është një tjetër arsye e mirë për të vendosur siç duhet elementet në format tuaja.

Kutitë e kontrollit të gjendjes së papërcaktuar

Përveç gjendjeve të zgjedhura dhe të pazgjedhura, ekziston një gjendje e tretë në të cilën kutia e kontrollit mund të jetë: i papërcaktuar. Kjo është një gjendje në të cilën "është e pamundur të thuhet nëse artikulli është aktivizuar ose çaktivizuar. Kjo është vendosur duke përdorur elementët."> Vetia e papërcaktuar e objektit HTMLInputElement nëpërmjet JavaScript (nuk mund të vendoset duke përdorur një atribut HTML):

InputInstance.indeterminate = e vërtetë;

Një kuti kontrolli në gjendje të papërcaktuar ka një vijë horizontale në kuti (duket disi si një vijë ndarëse ose shenjë minus) në vend të një kontrolli/shënimi në shumicën e shfletuesve.

Nuk ka shumë raste përdorimi për këtë pronë. Më e zakonshme është kur disponohet një kuti kontrolli që "zotëron" një numër nën-opsionesh (të cilat janë gjithashtu kuti kontrolli). Nëse të gjitha nën-opsionet janë të zgjedhura, kontrollohet edhe kutia e kontrollit të zotërimit, dhe nëse janë të gjitha të pazgjedhura, kutia e kontrollit të zotërimit është e çzgjidhur. Nëse ndonjë ose më shumë nga nënopsionet kanë një gjendje të ndryshme nga të tjerët, kutia e kontrollit të zotërimit është në gjendje të papërcaktuar.

Shembuj

Shembulli i mëposhtëm është një version i zgjeruar i shembullit të "shumë kuti kontrolli" që pamë më sipër - ai ka më shumë opsione standarde, plus një kuti "tjetër" që kur zgjidhet shkakton që një fushë teksti të shfaqet për të futur një vlerë për opsionin "tjetër". Kjo arrihet me një bllok të thjeshtë JavaScript. Shembulli gjithashtu përfshin disa CSS për të përmirësuar stilin.

HTML

Zgjidhni interesat tuaja

Kodimi

Muzikë

Art

Sportive

Gatim

Të tjera

Paraqisni formularin

CSS

html ( font-familja: sans-serif; ) forma ( gjerësia: 600 px; margjina: 0 automatik; ) div ( margin-fund: 10 px; ) grup fushash ( sfondi: cyan; kufiri: 5 px blu e fortë; ) legjenda ( mbushja: 10 px sfond: blu;

JavaScript

var otherCheckbox = dokument.querySelector("input"); var otherText = dokument.querySelector("hyrje"); otherText.style.visibility = "i fshehur"; otherCheckbox.onchange = funksion() ( if(otherCheckbox.checked) ( otherText.style.visibility = "i dukshëm"; otherText.value = ""; ) else ( otherText.style.visibility = "fshehur"; ) );

Specifikimet

Specifikim	Statusi	Koment
Standardi i jetesës HTML Përkufizimi i " "në atë specifikim.	Standardi i jetesës
HTML5 Përkufizimi i " "në atë specifikim.	Rekomandim

Pajtueshmëria e shfletuesit

Tabela e përputhshmërisë në këtë faqe krijohet nga të dhënat e strukturuara. Nëse dëshironi të kontribuoni në të dhënat, ju lutemi shikoni

Opera për AndroidSafari në iOSInternet Samsung shkruani = "kutia e kontrollit"Mbështetje e plotë e Chrome PoEdge Mbështetje e plotë PoMbështetje e plotë e Firefox-it PoIE Mbështetje e plotë PoOpera Mbështetje e plotë PoSafari Mbështetje e plotë PoWebView Android Mbështetje e plotë PoChrome Android Mbështetje e plotë PoEdge Mobile Mbështetje e plotë PoMbështetje e plotë për Firefox Android 4Opera Android Mbështetje e plotë PoSafari iOS Mbështetje e plotë PoSamsung Internet Android ?

Legjenda

Mbështetje e plotë Mbështetje e plotë Përputhshmëria e panjohur Përputhshmëria e panjohur

Shiko gjithashtu

• elementi përdoret për të krijuar kontrolle ndërvepruese për format e bazuara në ueb në mënyrë që të pranohen të dhëna nga përdoruesi; janë të disponueshme një shumëllojshmëri e gjerë e llojeve të të dhënave hyrëse dhe miniaplikacioneve të kontrollit, në varësi të pajisjes dhe agjentit të përdoruesit."> dhe elementet."> Ndërfaqja HTMLInputElement e cila e zbaton atë.
• ), kutia e kontrollit ( ), ose opsion ( ne nje ) elementi që është i kontrolluar ose i kaluar në një gjendje aktive."> :checked dhe :indeterminate përzgjedhësit CSS ju lejojnë të stiloni kutitë e kontrollit bazuar në gjendjen e tyre aktuale

  Falë CSS3, ne mund të arrijmë pothuajse çdo efekt që na nevojitet në ekran. Në këtë mësim do të shohim se si mund të stilojmë kutitë e kontrollit dhe butonat e radios.

  Hyrja: kontrolluar + etiketa: përpara (përmbajtja: "\2022"; ngjyra: #f3f3f3; madhësia e shkronjave: 30 px; rreshtimi i tekstit: në qendër; lartësia e rreshtit: 18 px; )

  Tani kur shtypim butonin e radios, një rreth i vogël i bardhë duhet të shfaqet në rrethin kryesor gri.

  

  Kutitë e kontrollit të stilimit

  Tani le të fillojmë të dizajnojmë kutitë e kontrollit. Së pari, le të fshehim përsëri elementin:

  Hyrja (ekrani: asnjë;)

  Ndërsa pastrojmë ekran standard kutia e kontrollit duke përdorur pseudo-elementin: para, thjesht shtoni një kornizë:

  Etiketa e kutisë së zgjedhjes: përpara (rrezja e kufirit: 3 px; )

  Më pas do të shtojmë një simbol "kontrollo", i cili do të shfaqet kur të klikoni në kutinë e kontrollit. Le ta bëjmë këtë në analogji me një rreth radio. Këtë herë do të na duhet të konvertohemi Simboli HTML? ✓.

  Hyrja: kontrolluar + etiketa: përpara (përmbajtja: "\2713"; hije e tekstit: 1px 1px 1px rgba(0, 0, 0, .2); madhësia e shkronjave: 15 px; ngjyra: #f3f3f3; rreshtimi i tekstit: në qendër lartësia e vijës: 15 px)

  Si rezultat, kjo është ajo që duhet të marrim:

  

  Rezultatet

  Në këtë mësim, ne shikuam një metodë që mund të përdorni për të shfaqur butonat e radios dhe kutitë e kontrollit që ju nevojiten. Meqenëse kemi përdorur CSS3, kjo teknikë do të funksionojë vetëm në shfletuesit që mbështesin këtë teknologji. Për të arritur rezultate të ngjashme në shfletuesit më të vjetër, mund të përdorni të duhurin

  Për të dizajnuar kutitë e kontrollit dhe butonat e radios siç kërkohet nga dizajni, sot nuk është e nevojshme të përdoren zgjidhje JavaScript (si shtojca ime), sepse Për ta bërë këtë, mund të përdorni vetëm CSS, dhe me pajtueshmëri të prapambetur për shfletuesit më të vjetër (d.m.th., pa sakrifikuar përdorshmërinë) që nuk mbështesin rregullat moderne të CSS.

  Me fjalë të tjera, në shfletuesit modern kutitë e kontrollit dhe butonat e radios do të duken bukur, në përputhje me dizajnin e synuar, por në shfletuesit më të vjetër (kjo vlen për Internet Versionet e Explorer 8 dhe më poshtë) do të mbeten me dizajnin “default”, karakteristik për çdo sistem operativ specifik.

  Përveç kësaj, Vlefshmëria HTML5 është ende e mundur elementë të stiluar (që mund të mos jetë rasti kur përdorni shtojcat JavaScript). Në shfletuesit modernë, mbështetja e tij ka qenë prej kohësh normë.

  Karakteristikat e rëndësishme

  Që gjithçka të funksionojë, është e rëndësishme të merrni parasysh sa vijon:

  1. Përveç, në fakt, vetë etiketën e elementit, të cilën duam ta dekorojmë bukur (
  ose ), do t'ju duhet një etiketë , falë të cilit mund të ndërroni një element duke klikuar në tekst, dhe jo vetëm në vetë elementin.
• Etiketë duhet të jetë përpara etiketës (në këtë rast gjendja e elementit të formës ndërrohet duke përdorur atributin for), ose duhet të jetë brenda një etikete (në këtë rast atributi for nuk është i nevojshëm, por do të nevojitet një etiketë mbështjellëse teksti).

Truku është të përdorni pseudo-zgjedhësit :checked dhe :not. Në këtë rast, vetë kutia e kontrollit ose butoni i radios bëhet i padukshëm dhe emulimi i tyre kryhet duke përdorur pseudo-elemente: para dhe: pas për etiketën ose etiketën e mbështjellësit të mësipërm.

Stilimi për shfletuesit modernë

Le të shqyrtojmë të dy opsionet për vendndodhjen e elementit të formës që do të stilohet. Cili është më i përshtatshëm varet nga ju që të vendosni. Thelbi nuk ndryshon nga kjo.

Etiketat e kutisë së kontrollit dhe butonat e radios ndodhen përpara etiketës

Në kodin HTML duket kështu:

Unë ndërroj kutinë e zgjedhjes Dhe unë ndërroj butonin e radios

Edhe një herë dua të tërheq vëmendjen tuaj te etiketa Domosdoshmërisht duhet të gjendet para etiketë . Nëse i ndërroni ato, asgjë nuk do të funksionojë.

Kodi CSS për kutinë e zgjedhjes do të jetë kështu:

Kutia e kontrollit ( pozicioni: absolut; z-indeksi: -1; tejdukshmëria: 0; diferenca: 10 px 0 0 20 px; ) .kutia e kontrollit + etiketa ( pozicioni: relative; mbushja: 0 0 0 60 px; kursori: treguesi; ) .kutia e kontrollit + etiketa :para (përmbajtja: ""; pozicioni: absolut; lart: -4 px; majtas: 0; gjerësia: 50 px; lartësia: 26 px; rreze-kufi: 13 px; sfondi: #CDD1DA; kuti-hije: futur 0 2px 3px rgba( 0,0,0,.2; tranzicioni: .2 pik. -rrezja: 10px sfondi: #FFF 5px rgba(0,0,0,.3). kutia e zgjedhjes: e zgjedhur + etiketa: pas ( majtas: 26 pik. 0,.7);

Kodi CSS për butonin e radios do të jetë kështu:

Radio ( pozicioni: absolut; z-indeksi: -1; opaciteti: 0; diferenca: 10px 0 0 7px; ) .radio + etiketa ( pozicioni: relative; mbushja: 0 0 0 35 px; kursori: treguesi; ) .radio + etiketa :para (përmbajtja: ""; pozicioni: absolute; lart: -3 px; majtas: 0; gjerësia: 22 px; lartësia: 22 px; kufiri: 1 px solid #CDD1DA; rreze-kufi: 50%; sfondi: #FFF; ) . radio + etiketa:pas ( përmbajtja: ""; pozicioni: absolute; sipër: 1px; majtas: 4px; gjerësia: 16px; lartësia: 16px; rreze-kufi: 50%; sfond: #9FD468; hije e kutisë: futur 0 1px 1px rgba(0,0,0,.5). 0 0 0 3px rgba(255,255,0,.7);

Duke përdorur veçoritë e pozicionit, z-indeksit dhe opacitetit për klasat .checkbox dhe .radio, ne fshehim vizualisht elementët origjinalë, ndërsa ato mbeten në të njëjtin vend ku do të jenë elementët e stiluar. Dhe duke përdorur margjinën, ne i zhvendosim ato pak në mënyrë që mesazhi i vlefshmërisë HTML5 të duket harmonik. Në varësi të dizajnit të kutisë së kontrollit dhe butonit të radios, kjo dhëmbëzim mund të rregullohet.

Etiketat e kutisë së kontrollit dhe butonat e radios janë brenda etiketës

Kodi HTML V në këtë rast do të jetë si më poshtë:

Unë ndërroj kutinë e zgjedhjes
Dhe unë ndërroj butonin e radios

Për analogji me opsionin e mëparshëm - etiketë Domosdoshmërisht duhet të gjendet para etiketat me klasën .checkbox__text dhe .radio__text .

Kodi CSS për kutinë e zgjedhjes do të jetë kështu:

Hyrja e kutisë së kontrollit ( pozicioni: absolut; z-indeksi: -1; tejdukshmëria: 0; margjina: 10 px 0 0 20 px; ) .checkbox__text ( pozicioni: relative; mbushja: 0 0 0 60 px; kursori: treguesi; ) .checkbox__text:para ( përmbajtja: "" lartësia absolute: 26px sfondi: 0 2px ,0,.2 .checkbox: ""; absolutisht: -2px gjerësia: 22px; : .2s .hyrja e kutisë së zgjedhjes:checked + .checkbox__text:fore ( sfond: #9FD468; ) .inputja e kutisë së kontrollit :checked + .checkbox__text:after ( majtas: 26px; ) .checkbox input:focus__text: hije: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255,255,0,.7);

Kodi CSS për butonin e radios do të jetë kështu:

Hyrja e radios ( pozicioni: absolute; z-indeksi: -1; opaciteti: 0; diferenca: 10px 0 0 7px; ) .radio__text ( pozicioni: relative; mbushja: 0 0 0 35px; kursori: treguesi; ) .radio__text:para ( përmbajtja: ""; lartësia: 22 px; përmbajtja: ""; majtas: 16 px; kufiri-radius: 50%; :after ( opacity: 1; ) .hyrja e radios:fokus + .radio__tekst:para (box-hije: 0 0 0 3px rgba(255,255,0,.7 )

Stilet këtu janë të njëjta si në metodën e mëparshme, vetëm ato aplikohen për përzgjedhësit e tjerë.

Stilimi për shfletuesit më të vjetër

Kodi CSS për kutinë e zgjedhjes. Në komentet e kodit shtova shpjegime në lidhje me shfletuesit:

/* Së pari, ne përcaktojmë stilet për IE8 dhe versionet më të vjetra, d.m.th. Këtu përmirësojmë pak kutinë standarde të kontrollit. */ .kontrolli ( rreshtimi vertikal: lart; gjerësia: 17 px; lartësia: 17 px; diferenca: 0 3px 0 0; ) /* Kjo është për të gjithë shfletuesit, përveç atyre shumë të vjetër që nuk mbështesin përzgjedhës plus. Ne tregojmë se etiketa është e klikueshme. */ .checkbox + label ( kursori: treguesi; ) /* Më pas vjen dizajni i kutisë së kontrollit në shfletuesit modernë, si dhe IE9 dhe më të lartë. Për shkak të faktit se shfletuesit e vjetër nuk mbështesin përzgjedhësit :not dhe :checked, të gjitha stilet e mëposhtme nuk do të funksionojnë në to. Në këtë rast, checked specifikohet pa dy pika përpara, për disa arsye funksionon në atë mënyrë. */ . kutia e kontrollit: jo(kontrolluar) ( pozicioni: absolut; z-indeksi: -1; tejdukshmëria: 0; margjina: 10 pikselë 0 0 20 px; ) . kutia e kontrollit: jo (e zgjedhur) + etiketa ( pozicioni: relative; mbushja: 0 0 0 60 px; : #CDD1DA kuti-hije: inset 0 2px 3px rgba(0,0,0,.2) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; top: -2px gjerësi: 10px kutia-hije: 0 2px .2s .checkbox:force: ( majtas: 26 pik.

Kodi CSS për butonin e radios:

Radio (drejtimi vertikal: lart; gjerësia: 17 px; lartësia: 17 px; diferenca: 0 3px 0 0; ) .radio + etiketa ( kursori: treguesi; ) .radio:jo (kontrolluar) ( pozicioni: absolute; indeksi z: -1 opacity: 0 diferencë: 10px 0 7px ) .radio:jo (kontrolluar) + etiketë (pozicioni: relative; mbushje: 0 0 0 35px;) .radio:jo (kontrolluar) : ""; pozita: 0 px lartësia: 50% e kontrolluar) + etiketa: ""); lartësia: 16px; sfondi: #9FD468: 0,0,0; + label:after ( opacity: 1; ) .radio:fokus + label:para (box-shadow : 0 0 0 3px rgba(255,255,0,.7);

Shembuj

Kështu bëhet në një mënyrë kaq të thjeshtë. Falë kësaj metode, ju mund të dizajnoni kutitë e kontrollit dhe butonat e radios duke përdorur CSS ju mund ta bëni atë si të doni.

Të gjithë zhvilluesit e faqeve të internetit, aplikacioneve në ueb dhe programeve desktop e dinë se çfarë janë kutitë e kontrollit. Por ata njerëz që janë larg programimit, duke hasur në një fjalë të huaj kaq të pakuptueshme, nuk e kuptojnë se për çfarë po flasin. po flasim për. Në fakt, gjithçka është shumë e thjeshtë. Kutitë e kontrollit janë një nga kontrollet më të thjeshta gjatë krijimit të formularëve.

Shenjë e rregullt e kontrollit

Të gjithë njerëzit kanë hasur simbole të tilla si pikën e kontrollit në jetën e tyre, duke filluar nga shkolla. Gjatë testimit, duhet të shënoni opsionin e duhur me këtë shenjë. Pastaj gjatë plotësimit të pyetësorëve të ndryshëm. Epo, në kohën e tanishme, kur përdoruesit kryejnë shumë veprime përmes Internetit, nuk ka absolutisht askund pa rriqra. Madje regjistrim i thjeshtë në çdo faqe kërkon që ju të shënoni disa pika (hobi, aftësi).

Tani është zhvilluar edhe tregtia në internet. Kur krijon një porosi, përdoruesi shënon artikujt që i interesojnë. Dhe shpesh kur instaloni një lojë kompjuterike ju kërkohet të zgjidhni një shtesë software. Dhe këtu, gjithashtu, ju duhet të bëni një zgjedhje. Pra, kutitë e kontrollit janë të njëjtat shenja kontrolli që përdoren në faqet e internetit.

Në krijimin e faqes në internet



Zhvilluesit e faqeve të internetit e shohin këtë element disi më gjerësisht. Në fund të fundit, krijimi është më i vështirë sesa thjesht të klikosh një herë në një katror dhe të kontrollosh një kuti. Faqet e internetit zhvillohen duke përdorur gjuhën e shënjimit të hipertekstit, e cila në një mjedis profesional quhet vetëm katër shkronja - HTML. Dhe për të krijuar një shenjë kontrolli në të, duhet të shkruani një kod.

Si krijohen kutitë e kontrollit? HTML ka një element të specializuar (etiketë), i cili është një fushë e pajisur me një lloj kutie kontrolli, e cila shkruhet si më poshtë: .

Parimet e funksionimit



Ky element funksionon sipas parimit më të thjeshtë: ose pohim ose mohim. Nëse një fushë kontrollohet, shfletuesi i uebit dërgon një variabël që do të dërgojë emrin e fushës në server për përpunim, por nëse kutia nuk zgjidhet, serveri nuk merr asgjë. Elementi ka një atribut opsional me vlerën e vlerës, por ai është opsional.

Ndonjëherë ndodh që disa kuti në faqe janë tashmë të kontrolluara. Për ta bërë këtë, zhvilluesit i shtojnë etiketës atribut i veçantë, e cila tregon për një kuti kontrolli që tashmë është zgjedhur si parazgjedhje. Ky është atributi i kontrolluar, domethënë "i kontrolluar".

Kutitë e kontrollit janë elementë që nënkuptojnë jo një zgjedhje të vetme nga disa opsione, por shënimin e të gjitha të përshtatshmeve. Për një zhvillues, kjo ka rëndësi sepse nëse një formë përmban shumë kuti kontrolli, emrat e tyre duhet të jenë të ndryshëm nga njëri-tjetri.

Kutitë e kontrollit të varura

Në rastin kur duhet të zgjidhni vetëm një opsion nga një grup, përdoren elementë të tjerë - butonat e radios, jo kutitë e kontrollit. Por ndonjëherë përdoret një lloj si kutitë e kontrollit të varura. HTML së bashku me gjuhën Programimi JavaScript ju lejon të bëni një kuti kontrolli kryesore nga e cila varen të tjerat. Kur klikoni mbi të, disa kuti kontrolli mund të kontrollohen menjëherë. Kjo përdoret rrallë, pasi bie disi në kundërshtim me vetë rregullin e kontrollit të kutive.

Ashtu si të gjitha etiketat në HTML, kutitë e kontrollit janë elementë që kanë karakteristikat e tyre. Cilat janë ato? Atributi për para-kontrollimin e një kutie të kontrollit është përmendur tashmë më lart - i zgjedhur. Meqenëse kutitë e kontrollit duhet të kenë emra të ndryshëm në një formë, ju duhet atribut emri. Ai thjesht identifikon çdo kuti kontrolli individual. Për të vendosur vlerën që do t'i dërgohet serverit, përdorni atributin e vlerës.

Vlen të përmendet se kutitë e kontrollit janë elementet grafike kontrollet që përdoren kryesisht në forma. Dhe ata punojnë në tre mënyra: jo të zgjedhura, të zgjedhura dhe të papërcaktuara.

Përdorni në tabela



Kutitë e kontrollit përdoren jo vetëm në HTML gjatë zhvillimit të faqeve të internetit dhe aplikacioneve në ueb. Softuer të tillë si 1C përdor gjithashtu këtë element. Në fund të fundit, një ndërmarrje ka shumë komponentë të ndryshëm, dhe kur punoni me dokumentacion, e gjithë kjo duhet të theksohet. Për shembull, duke përdorur një kuti kontrolli mund të shënoni një listë stoqet e magazinës ose klientët që duhet të dërgojnë mallra.

Cilat programe të tjera përdorin këtë element? Excel - të gjithë e njohin këtë program spreadsheet nga Microsoft, i cili shpesh është parimi se si funksionon një kuti kontrolli këtu: nëse kutia e kontrollit është e kontrolluar, atëherë elementi kthehet kuptimin e vërtetë, nëse hiqet - false. Për të futur një kuti kontrolli në një dokument, duhet të aktivizoni një skedë të veçantë për zhvilluesin. Kjo bëhet përmes parametrave që janë paksa të ndryshëm në secilin version të Excel.

Si mund t'i gjej cilësimet që më duhen? Gjithmonë ka një certifikatë ose sistemi i kërkimit. Pasi të aktivizohet skeda, mund të futni një element përmes komandës "Insert" të artikullit "Controls". Këtu duhet t'i kushtoni vëmendje faktit që kjo menu përmban gjithashtu kontrolle ActiveX të vendosura nën elementet e nevojshme forma. Aty ka edhe kuti kontrolli. Cili është ndryshimi midis tyre? Per perdorim Kontrollet ActiveX kanë nevojë për gjuhë të integruar Programimi VBA që pak njerëz e dinë. Dhe kutitë e zakonshme të kontrollit mund të lidhen menjëherë me një qelizë specifike në dokument.

Pasi kutitë e kontrollit futen në Excel, ato kontrollohen si parazgjedhje. Klikimi kudo në dokument heq shenjën. Për të ndryshuar zgjedhjen, duhet të klikoni në kutinë e kontrollit me butonin e djathtë të miut, pasi butoni i majtë heq ose kontrollon kutinë e kontrollit.

Duke qëndruar pezull mbi një kuti kontrolli dhe duke mbajtur të shtypur butonin e majtë, mund ta zhvendosni elementin në çdo vend në dokument. Është gjithashtu i përshtatshëm për ta bërë këtë duke përdorur tastet në tastierë. Kur rri pezull mbi qoshet e një elementi, mund ta shtrish atë madhësi më të madhe ose zvogëloni. Cilësimet speciale ju lejojnë të personalizoni kutinë e zgjedhjes duke ndryshuar ngjyrën, sfondin dhe kornizën e saj.

konkluzioni



Pra, siç shihet nga sa më sipër, kutitë e kontrollit nuk janë një element kompleks GUI, por me të cilën përballen të gjithë Jeta e përditshme- një rriqër i zakonshëm. Koncepti është paksa i ndryshëm për një programues dhe një përdorues të zakonshëm, por thelbi është i njëjtë: ky është një element kontrolli që ju lejon të bëni zgjedhje të shumta kur plotësoni një formular. Është e rëndësishme të mos ngatërroni kutitë e kontrollit me butonat e radios, të cilët ju lejojnë të zgjidhni vetëm një artikull nga shumë.