Šiame pamokymo vadove išmoksi, kaip sukurti savo pirmąjį paprastą HTML formą. Formos yra svarbus svetainių komponentas, leidžiantis vartotojams įvesti informaciją ir siųsti ją į serverį. Šiame palaipsniui veiksmų vadove susipažinsi su pagrindine HTML formos struktūra ir suprasi, kaip skirtingi elementai bendradarbiauja siųsti duomenis.
Svarbiausios išvados
- HTML forma apibrėžiama naudojant <form> žymė.
- Atributai action ir method nusako, kur duomenys siunčiami ir kokia naudojama metodika.
- Formos laukai paprastai apibrėžiami naudojant <input>, <label> ir <button>.
- Duomenys gali būti siunčiami į serverį naudojant GET arba POST metodus.
Veiksmų vadovas
1. Sukurkite pagrindinę HTML struktūrą
Pirmiausia jums reikia paprasto HTML dokumento kaip pagrindo. Įsitikinkite, kad turite pagrindinę HTML dokumento struktūrą:
2. Pridekite Form žymę
Kitas žingsnis yra formos apibrėžimas. Įtraukite <form> žymę ir nurodykite atributus action ir method. Čia yra paprastas pavyzdys, kuriame action nurodo URL, į kurį duomenys bus siunčiami, o method nustatomas į GET, kad duomenys būtų siunčiami per URL.
3. Sukurkite žymą ir įvesties lauką
Formoje norite sukurti etiketuotą įvesties lauką. Tuo tikslu naudokite <label> žymą etiketėms ir <input> žymą paties įvedimo laukui. Įsitikinkite, kad etiketės for atributas sutampa su įvesties lauko id atributu.
4. Pridekite Pateikti mygtuką
Norėdami siųsti formos duomenis, jums reikės mygtuko. Tai įgyvendinama naudojant <button> žymą, kuri turėtų būti su tipu submit, kad forma būtų siunčiama spustelėjus mygtuką.
5. Formos testavimas
Surinkus formą, laikas ją išbandyti naršyklėje. Įvesties lauke įveskite pavyzdį ir spustelėkite Pateikti mygtuką. Turėtumėte matyti, kad siunčiant formą, įvesti duomenys siunčiami per URL, nurodytą action.
6. Patobulinimai įvesties atributuose
Kad pamatytumėte, kaip keičiasi įvesties laukai, galite pritaikyti įvesties žymės atributus. Pavyzdžiui, pakeiskite pavadinimo atributą, kad būtų galima diferencijuoti perduodamus duomenis. Pavyzdžiui, pakeiskite įvesties lauko pavadinimą iš name į first name.
7. Duomenų perdavimas ir Užklausos tipas
Prieš testuodamas, svarbu žinoti, kad metodas GET siunčia duomenis URL, o POST siunčia duomenis HTTP užklausos kūne. Galite pakeisti užklausos tipą keisdami method atributą <form> žymėje.
8. Simuliuokite serverio atsaką
Testuodami savo formą, tikriausiai neturėsite realaus serverio. Norėdami simuliuoti kitą HTML puslapį, į kurį vartotojai būtų nukreipti po formos pateikimo, galite pritaikyti action URL į kitą HTML puslapį, pvz., padėkojimo puslapį.
9. Klaidų taisymas ir Skaitymas
Jei formos pateikimo metu pasitaiko klaidų, patikrinkite naršyklės tinklo įrankius. Ten galite pamatyti, ar forma sėkmingai išsiųsta ir kokios duomenys yra siunčiami. Taip pat atkreipkite dėmesį į galimus 404 klaidos pranešimus, rodančius, kad nurodytas URL nebuvo rastas.
10. Baigimas ir Perspektyvos
Dabar jūs turite pagrindinį supratimą, kaip kurti HTML formularius. Galite plečiant šią techniką, kurti sudėtingesnius formus, kuriuose yra įvairių įvesties tipų ir validacijų. Kitame vadove išmoksite, kaip reaguoti į formos įvestis naudojant JavaScript ir atlikti asinchroninius duomenų perdavimus.
Santrauka
Šiame vadove susipažinote su pirmojo HTML formos struktūra ir veikimu. Dabar žinote, kaip kurti įvesties laukus, žymes ir mygtukus bei kaip siunčiami duomenys per URL arba POST užklausos kūne.
Dažnai užduodami klausimai
Kas yra skirtumas tarp GET ir POST?GET perdaro duomenis per URL, o POST siunčia duomenis užklausos kūne.
Ką man reikia nurodyti veiksmo atributuose?Veiksmo atributu nurodote URL, į kurį turi būti išsiųsti formos duomenys.
Kaip užtikrinti, kad mano forma veiktų?Patikrinkite formą naršyklėje ir peržiūrėkite tinklo įrankius siųstų duomenų atžvilgiu.
Kaip sukurti keletą įvesties laukų formoje?Pridėkite papildomus žymeklius po pirmojo žymeklio ir įsitikinkite, kad kiekvienam suteiksite unikalų name atributą.
Kas vyksta po formos pateikimo?Jei siunčiamas GET užklausa, puslapis atnaujinamas ir duomenys atsiranda URL. Atlikus POST užklausą, reakcija priklauso nuo to paties serverio.
