Šajā rokasgrāmatā tu iemācīsies, kā izveidot savu pirmo vienkāršo veidlapu HTML. Veidlapas ir būtisks tīmekļa lietojumprogrammu sastāvdaļa, kas ļauj lietotājiem ievadīt informāciju un nosūtīt to serverim. Šajā pakāpeniskajā ceļvedī tu iepazīsi pamata HTML veidlapas struktūru un sapratīsi, kā dažādi elementi sadarbojas, lai pārraidītu datus.
Svarīgākie secinājumi
- HTML veidlapu definē ar <form>-tagu.
- Atribūti action un method nosaka, uz kurieni dati tiks nosūtīti un kura metode tiks izmantota.
- Veidlapas lauki parasti tiek definēti ar <input>, <label> un <button>.
- Datus var nosūtīt vai nu izmantojot GET vai POST.
Pakāpeniska ceļvede
1. Izveidot HTML pamatu
Pirmkārt, tev būs nepieciešams vienkāršs HTML dokumenta pamats. Pārliecinies, ka tev ir pamata HTML dokumenta struktūra:
2. Pievienot Form-Tagu
Nākamais solis ir definēt veidlapu. Pievieno -Tagu un nepieciešamie atribūti action un method. Šeit ir vienkāršs piemērs, kur action norāda URL, uz kuru dati tiks nosūtīti, un method ir iestatīts uz GET, lai dati tiktu pārraidīti caur URL.
3. Izveidot labeli un ievades lauku
Veidlapā tu vēlies izveidot apzīmētu ievades lauku. To tu vari izdarīt, izmantojot -Tagu apzīmējumam un -Tagu faktiskajam ievades laukumam. Pārliecinies, ka labela for atribūts atbilst ievades lauka id.
4. Pievienot Submit pogu
Lai nosūtītu veidlapas datus, tev būs nepieciešams poga. To izveido, izmantojot -Tagu un tai jābūt ar tipu submit, lai veidlapa tiek iesniegta, noklikšķinot uz tā.
5. Veidlapas pārbaude
Pēc veidlapas izveides laiks izmēģināt to pārlūkprogrammā. Ievadi piemēru ievades laukā un noklikšķini uz iesniegšanas pogas. Tev vajadzētu redzēt, ka, iesniedzot veidlapu, ievadītās dati tiek nosūtīti caur URL uz norādīto darbību.
6. Ievades atribūtu modifikācija
Lai redzētu, kā izmainās ievades lauki, vari pielāgot -Taga atribūtus. Piemēram, maini name atribūtu, lai atšķirtu pārraidītos datus. Piemēram, maini ievades lauka nosaukumu no name uz first name.
7. Datu pārsūtīšana un pieprasījuma tips
Pirms turpina veikt testus, ir svarīgi zināt, ka GET metode dati tiek nosūtīti URL, bet POST metode dati tiek nosūtīti HTTP pieprasījuma iekšējā informācijas daļā. Vari mainīt pieprasījuma tipu, pielāgojot method atribūtu -Tagā.
8. Simulē servera reakciju
Nosūtot savu veidlapu, iespējams, tev nav pieejams reāls serveris testēšanai. Vari pielāgot action-URL, lai simulētu citu HTML lapu, uz kuru lietotāji tiks novirzīti pēc veidlapas iesniegšanas. Izveido jaunu HTML failu, kas, piemēram, satur paldies lapu.
9. Kļūdu novēršana un atkļūdošana
Ja veidlapas iesniegšanas laikā rodas kļūdas, pārbaudi pārlūka tīkla rīkus. Tur redzēsi, vai veidlapa ir veiksmīgi nosūtīta un kādi dati ir nosūtīti. Ņem vērā arī iespējamas 404 kļūdas, kas norāda uz to, ka mērķa URL nav atrasts.
10. Nobeigums un turpmākie pasākumi
Tagad tev ir pamatzināšanas HTML formas izveidē. Tu vari paplašināt šo tehniku, lai izveidotu sarežģītākas formas ar dažādiem ievades veidiem un validācijām. Nākamajā pamācībā tu uzzināsi, kā reaģēt uz formas ievadu ar JavaScript un veikt asinhronas datu pārsūtīšanas.
Kopsavilkums
Šajā pamācībā tu esi iepazinies ar savas pirmās HTML formas struktūru un darbību. Tagad zini, kā veidot ievades laukus, kartiņas un pogas, un kā nosūtītie dati tiek pārsūtīti caur URL vai POST pieprasījuma ķermeni.
Biežāk uzdotie jautājumi
Kāda ir atšķirība starp GET un POST?GET pārsūta datus caur URL, bet POST nosūta datus pieprasījuma ķermenī.
Ko man jānorāda darbības atribūtā?Darbības atribūtā norādi URL, uz kuru jānosūta formas dati.
Kā nodrošināt, ka mana forma darbojas?Pārbaudi formu pārlūkprogrammā un izmanto tīkla rīkus, lai pārbaudītu nosūtītos datus.
Kā izveidot vairākus ievades laukus vienā formā?Aiz pirmās -taga pievieno citus -tagus un katram piešķir unikālu nosaukuma atribūtu.
Kas notiek pēc formas iesniegšanas?Ja tiek nosūtīts GET pieprasījums, lapa atjaunojas un dati parādās URL. POST pieprasījuma gadījumā atbildi nodrošina tas pats serveris.
