V tem vodniku se boste naučili, kako ustvariti svoj prvi preprost obrazec v HTML-u. Obrazci so bistveni del spletnih aplikacij in uporabnikom omogočajo, da vnašajo informacije in jih pošiljajo strežniku. V tem vodniku korak za korakom boste spoznali osnovno strukturo HTML obrazca in razumeli, kako različni elementi sodelujejo pri prenosu podatkov.
Najpomembnejši ugotovitvi
- HTML obrazec je določen s pomočjo oznake <form>.
- Atributa dejanje in metoda določata, kam se pošiljajo podatki in katera metoda se uporablja.
- Poleg obrazca so običajno določeni z oznakami <input>, <label> in <button>.
- Podatki se lahko pošljejo na strežnik preko GET ali POST.
Korak-po-korak vodnik
1. Ustvarjanje osnovne HTML strukture
Najprej potrebujete preprost HTML dokument kot osnovo. Prepričajte se, da imate osnovno strukturo HTML dokumenta:
2. Dodajanje oznake obrazca
Naslednji korak je določitev obrazca. Dodate oznako -Tag in potrebujete atribute dejanje in metoda. Tu je preprost primer, kjer akcija določa URL, kamor se podatki pošljejo, in metoda je nastavljena na GET za prenos podatkov preko URL-ja.
3. Ustvarjanje oznake in polja za vnos
V obrazcu želite ustvariti označeno polje za vnos. Za to uporabite oznako -Tag za označevanje in -Tag za dejansko polje za vnos. Poskrbite, da se atribut za ujemajo s ID polja za vnos.
4. Dodajanje gumba za pošiljanje
Za pošiljanje podatkov obrazca potrebujete gumb. Ta je realiziran z oznako -Tag in naj ima tip oddaja, da se obrazec po kliku pošlje.
5. Testiranje obrazca
Ko obrazec ustvarite, je čas, da ga preizkusite v brskalniku. V polje za vnos vnesite primer in kliknite gumb za oddajo. Morali bi videti, da se ob pošiljanju obrazca vnešeni podatki pošiljajo preko URL-ja na določeno dejanje.
6. Spreminjanje atributov za vnos
Da vidite, kako se spremenijo polja za vnos, lahko prilagodite atribute oznake -Tag. Na primer, spremenite ime atributa, da razlikujete prenesene podatke. Primer bi bil, da ime polja za vnos spremenite iz imena v ime prvo.
7. Prenos in vrsta zahteve
Pred nadaljnjimi testi je pomembno vedeti, da metoda GET pošilja podatke v URL, medtem ko POST pošilja podatke v telesu HTTP zahteve. Vrsto zahteve lahko spremenite tako, da prilagodite atribut metoda v oznaki -Tag.
8. Simulacija odziva strežnika
Ker pri testiranju obrazca verjetno nimate pravega strežnika na voljo, lahko prilagodite URL dejavnosti, da simulirate drugo HTML stran, na katero bodo uporabniki preusmerjeni po oddaji obrazca. Ustvarite novo HTML datoteko, ki vsebuje na primer stran zahvale.
9. Odpravljanje napak in odpravljanje težav
Če pride do napak pri pošiljanju obrazca, preverite omrežne orodja brskalnika. Tam boste videli, ali je obrazec uspešno poslan in katere podatke pošiljate. Bodite pozorni tudi na morebitne napake 404, ki kažejo, da ciljni URL ni bil najden.
10. Zaključek in vpogled
Zdaj imaš osnovno razumevanje ustvarjanja HTML obrazcev. To tehniko lahko razširiš za ustvarjanje bolj kompleksnih obrazcev, ki vključujejo različne vrste vnosa in validacije. V naslednjem vadnici se boš naučil, kako se odzvati na vhodne podatke obrazca in izvesti asinhrone prenose podatkov.
Povzetek
V tej vadnici si spoznal strukturo in delovanje svojega prvega HTML obrazca. Zdaj veš, kako ustvariti vhodna polja, oznake in gumbe ter kako se poslane podatke prenese prek URL-ja ali telesa pošiljanega POST zahtevka.
Pogosto zastavljena vprašanja
Kakšna je razlika med GET in POST zahtevo?GET prenaša podatke prek URL-ja, medtem ko POST pošlje podatke v telesu zahtevka.
Kaj naj navedem v atributu "action"?V atributu "action" navedi URL, na katerega naj se pošljejo podatki obrazca.
Kako lahko preverim, ali deluje moj obrazec?Preizkusi obrazec v brskalniku in preveri omrežne orodja za poslane podatke.
Kako lahko ustvarim več vhodnih polj v obrazcu?Dodaj več oznak pod prvo oznako in poskrbi, da vsakemu dodeliš edinstven "name" atribut.
Kaj se zgodi po pošiljanju obrazca?Če se pošlje GET zahteva, se stran osveži in podatki se pojavijo v URL-ju. Pri POST zahtevi je odziv odvisen od istega strežnika.
