Sukurkite savo pirmąjį HTML formą

Š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.