Checkbox ir neaizstājams elements tīmekļa veidlapās, īpaši kad iziet runa par lietotājiem piedāvājamās izvēles iespējamu aktivizēšanu, piemēram, piekrītot vispārējiem lietošanas noteikumiem vai abonējot jaunumus. Šajā rokasgrāmatā es aplūkoju checkboxes pamatprasmes​​, izskaidroju to darbību un sniedzu soli pa solim norādījumus, kā izmantot checkboxes savās formās.

Checkboxes ne tikai ļauj vienkāršas Jā/Nē izvēles, bet tās arī var noderēt, ja tās tiek izmantotas kopā ar citiem veidlapas kontroles elementiem. Šī rokasgrāmata sniedz tev nepieciešamo zināšanu, lai pareizi implementētu un izmantotu checkboxes.

Svarīgākās atziņas

  • Checkboxes ir ideāli rīki bināro lēmumu pieņemšanai veidlapās.
  • Ja checkbox nav atzīmēts, tas netiks nosūtīts.
  • Neatzīmētas checkbox noklusējuma vērtība tiek uzskatīta par tukšu.
  • Tu vari noklusējuma kārtībā aktivizēt checkboxes, izmantojot atribūtu 'checked'.
  • Checkboxes darbības principu izpratne ir būtiska veidlapu datu pareizai apstrādei.

Soli pa solim instrukcijas

Sol 1: Checkboxes izveide

Sāc, izveidojot savas checkboxes HTML formā. Tev būs nepieciešams atribūts type="checkbox" un katram checkboxam jābūt name atribūtam, lai identificētu tā vērtību, kad forma tiek iesniegta.

Pārbaudes rūtiņas tīmekļa veidlapās: pamatzināšanas

Šajā piemērā mēs izveidojam divas checkboxes: viena, lai piekristu vispārējiem lietošanas noteikumiem, un otra, lai saņemtu jaunumus. Abas checkboxes tiek identificētas ar nosaukumiem "piekrītu LSN" un "saņemu jaunumus".

Sol 2: Formas iestatīšana

Iestatiet savu formu ar GET vai POST metodi. Šajā piemērā mēs izmantojam GET metodi, lai redzētu izvēli URL parametrā.

Izvēles rūtiņas tīmekļa veidlapās: pamatzināšanas

Šeit ir vienkāršs piemērs formas ar checkboxes. Pārliecinies, ka checkboxes ir iekļauti <form>-Tagā, lai dati tiktu pareizi apstrādāti.

Sol 3: Pārbaudiet iesniegtos datus

Iesniedz formu, neaktivizējot nevienu checkbox. Tu pamanīsi, ka URL nekas nav redzams.

Izvēles rūtiņas tīmekļa veidlapās: pamatzināšanas

Sol 4: Vērtību pievienošana checkboxes

Aktivizē pirmo checkbox un iesniedz formu atkārtoti. Tikai aktīvie checkboxi tiks parādīti iesniegtajos datos.

Izvēles rūtiņas tīmekļa formās: pamatzināšanas

Tiks nosūtīta tikai tā checkbox, kas faktiski tika atlasīta. Šajā gadījumā tu redzēsi specifisku nosaukumu un vērtību par aktivizēto checkbox formu dati.

Sol 5: Noklusējuma vērtības definēšana

Lai noklusējuma kārtā aktivizētu checkbox, pievieno atribūtu checked attiecīgajai checkbox.

Izvēles rūtiņas tīmekļa veidlapās: pamati

Izmantojot atribūtu checked, checkbox tiks jau aktivizēta, kad lapa tiek ielādēta. Tas ir noderīgi, ja vēlies, lai noteiktas opcijas būtu izvēlētas noklusējuma kārtā.

Sol 6: Lietotāja ievades apstrāde

Kad lietotājs iesniedz formas ievades datus, pārbaudi checkbox vērtības. Gaidi tikai atzīmēto rūtiņu nosaukumus iesniegtajos datos.

Izvēles rūtiņas tīmekļa veidlapās: Pamatprincipi

Svarīgi ir nodrošināt, ka tavs aizmugure darbmašīna (piemēram, serveris, piemēram, Node.js ar Express) var pienācīgi reaģēt uz tukšiem vai neesošiem laukiem.

Kopsavilkums

Šajā pamācībā tu esi iemācījies pamatus par izvēles rūtiņām tīmekļa veidlapās. Tagad tu zini, kā izveidot izvēles rūtiņas, sapratīsi to darbību un kā nodrošināt, ka dati tiek pareizi nosūtīti. Izvēles rūtiņas nodrošina vienkāršu veidu, kā iegūt lietotāja preferences un tās būtu jāņem vērā katrā tīmekļa veidlapā.

Bieži uzdotie jautājumi

Kāda ir atšķirība starp izvēles rūtiņām un radio pogām?Izvēles rūtiņas ļauj izvēlēties vairākas iespējas, savukārt radio pogām ļauj izvēlēties tikai vienu iespēju no daudzām.

Kāpēc, ja rūtiņa nav atzīmēta, tā neparādās URL parametros?Rūtiņai, kas nav atzīmēta, nav vērtības, un tāpēc tā netiek nosūtīta ar iesūtītajiem veidlapas datiem.

Kā standarta iestatīt rūtiņu uz "atlasīts"?Pievieno atribūtu checked savai HTML rūtiņai.

Vai varu vienlaicīgi aktivizēt vairākas rūtiņas?Jā, lietotāji var vienlaicīgi izvēlēties vairākas rūtiņas veidlapā.