Kuidas luua HTML-vormi (selgitatud näited)

Vorme kasutatakse kasutajatelt andmete (nt kontaktteabe) kogumiseks või kasutajatel veebisaidiga suhtlemiseks, näiteks kommentaaride postitamiseks või otsingute tegemiseks. Selles artiklis õpime, kuidas luua HTML-i abil põhivormi.

HTML-vormi struktuur

Märgendi abil luuakse HTML-vorm. Selle sildi sees võib olla palju erinevaid sisestuselemente, nagu tekstiväljad, nupud, märkeruudud, raadionupud ja palju muud.

sisendelemendid lähevad siia

Sisendelemendid

Tekstiväljad

Tekstiväljad luuakse märgendi abil atribuudiga tüüp maha pandud tekst. Näiteks:

Nimi:




Telefon

Element kasutatakse telefoninumbri sisestusväljade jaoks.

Telefon:


Kuupäev

Element kasutatakse kuupäeva valimiseks.

Sünnikuupäev:


Parool

Element kasutatakse parooli sisestusväljade jaoks. Sellele väljale sisestatud tekst kuvatakse parooli peitmiseks punktidena.

Parool:


Arhiiv

Element kasutatakse selleks, et kasutaja saaks valida faili oma kohalikust failisüsteemist.

Faili üles laadima:


Märkeruut

Element kasutatakse sisestusväljade jaoks, mis võimaldavad kasutajal valida mitte ühtegi, ühte või mitut valikut.

Nõustun tingimustega

Raadio

Element kasutatakse sisestusväljade jaoks, mis võimaldavad kasutajal valida valikute hulgast ühe valiku.

Sugu:

Mees

Naised

Number

Element kasutatakse numbriliste sisestusväljade jaoks.

Summa:


Vahemik

Element kasutatakse sisendväljade jaoks, mis peavad sisaldama väärtust väärtusvahemikust.

Maht:




Nupud

Nupud luuakse sildi abil atribuudiga tüüp maha pandud Esita. Selle nupu vajutamisel edastatakse vormi andmed. Näiteks:

Nimi:




Vormi sisendi käsitlemine

Esitamisnupu vajutamisel esitatakse vormi andmed töötlemiseks. Seda tehakse ühe kahest meetodist: GET või POST, mis määratakse atribuudi abil meetod Sildis .

GET meetod

Meetod GET esitab vormi andmed URL-i osana. See on kasulik näiteks otsingute puhul, mille puhul vormiandmed ei ole tundlikud. Sellel meetodil on aga piirangud saadetavate andmete pikkuse osas.

sisendelemendid lähevad siia

POST meetod

POST-meetod esitab vormi andmed URL-ist eraldi. See on turvalisem ja suudab käsitleda palju suuremat andmemahtu, seega kasutatakse seda näiteks kontakti- või sisselogimisvormide esitamiseks.

sisendelemendid lähevad siia

Mõlemal juhul atribuut tegevust kasutatakse vormiandmeid töötleva serveripoolse skripti URL-i määramiseks.

HTML-vormi näide kõigi elementidega 

Siin on vorm, mis kasutab kõiki selles artiklis vaadatud elemente:

Registreerimisvorm

Nimi:



Perekonnanimi:



E-post:



Telefon:



Sünnikuupäev:



Parool:



Faili üles laadima:



Nõustun tingimustega


Sugu:

Mees

Naised

Summa:



Maht:




Sellel vormil on väljad eesnime, perekonnanime, e-posti aadressi, telefoni, sünnikuupäeva, parooli ja üleslaadimise välja jaoks fail, märkeruut nõuete ja tingimuste jaoks, raadiod soo valimiseks ning numbri- ja vahemiku väljad koguse ja helitugevuse jaoks, vastavalt.

Nupp "Esita" lõpus on see, mis vastutab vormi esitamise eest atribuudis määratud URL-ile tegevust Sildist kuju (antud juhul "/submit_vorm"). Et see vorm päris veebisaidil töötaks, peab teil olema server, mis on konfigureeritud sellelt vormilt teavet vastu võtma ja töötlema teel „/submit_form”.