Kaip sukurti HTML formą (paaiškinami pavyzdžiai)

Formos naudojamos duomenims iš vartotojų rinkti, pvz., kontaktinei informacijai, arba leisti vartotojams bendrauti su svetaine, pavyzdžiui, skelbti komentarus ar atlikti paieškas. Šiame straipsnyje sužinosime, kaip sukurti pagrindinę formą naudojant HTML.

HTML formos struktūra

HTML forma sukuriama naudojant žymą. Šioje žymoje galite turėti daugybę skirtingų įvesties elementų, pvz., teksto laukų, mygtukų, žymimųjų laukelių, radijo mygtukų ir kt.

įvesties elementai patenka čia

Įvesties elementai

Teksto laukai

Teksto laukai sukuriami naudojant žymą su atributu tipo paguldytas tekstą. Pavyzdžiui:

Vardas:




Telefonas

Elementas naudojami telefono numerio įvesties laukams.

Telefonas:


Data

Elementas naudojamas datai pasirinkti.

Gimimo data:


Slaptažodis

Elementas naudojamas slaptažodžio įvesties laukams. Šiame lauke įvestas tekstas rodomas taškais, kad paslėptų slaptažodį.

Slaptažodis:


Archyvas

Elementas naudojamas, kad vartotojas galėtų pasirinkti failą iš savo vietinės failų sistemos.

Įkelti failą:


Žymimasis langelis

Elementas naudojamas įvesties laukams, kurie leidžia vartotojui pasirinkti nė vienos, vienos ar kelių parinkčių.

Sutinku su taisyklėmis ir sąlygomis

Radijas

Elementas naudojamas įvesties laukams, leidžiantiems vartotojui pasirinkti vieną iš parinkčių rinkinio.

Lytis:

Vyras

Moterys

Skaičius

Elementas naudojamas skaitmeniniams įvesties laukams.

Suma:


diapazonas

Elementas naudojamas įvesties laukams, kuriuose turi būti reikšmė iš verčių diapazono.

Apimtis:




Mygtukai

Mygtukai kuriami naudojant žymą su atributu tipo paguldytas Pateikti. Paspaudus šį mygtuką, bus pateikti formos duomenys. Pavyzdžiui:

Vardas:




Formos įvesties tvarkymas

Paspaudus mygtuką pateikti, formos duomenys pateikiami apdoroti. Tai atliekama vienu iš dviejų būdų: GET arba POST, kurie nurodomi naudojant atributą metodas Etiketėje .

GET metodas

GET metodas pateikia formos duomenis kaip URL dalį. Tai naudinga atliekant tokius dalykus kaip paieška, kai formos duomenys nėra jautrūs. Tačiau šis metodas turi apribojimų, susijusių su duomenų, kuriuos galima siųsti, ilgiu.

įvesties elementai patenka čia

POST metodas

POST metodas pateikia formos duomenis atskirai nuo URL. Tai yra saugesnė ir gali apdoroti daug didesnį duomenų kiekį, todėl jis naudojamas tokiems dalykams kaip kontaktų ar prisijungimo formų pateikimas.

įvesties elementai patenka čia

Abiem atvejais atributas veiksmas naudojamas serverio scenarijaus, kuris apdoros formos duomenis, URL nurodyti.

HTML formos pavyzdys su visais elementais 

Čia yra forma, kurioje naudojami visi šiame straipsnyje apžvelgti elementai:

Registracijos forma

Vardas:



Pavardė:



El. paštas:



Telefonas:



Gimimo data:



Slaptažodis:



Įkelti failą:



Sutinku su taisyklėmis ir sąlygomis


Lytis:

Vyras

Moterys

Suma:



Apimtis:




Šioje formoje yra vardo, pavardės, el. pašto, telefono, gimimo datos, slaptažodžio ir įkėlimo laukai failą, terminų ir sąlygų žymimąjį laukelį, radijo imtuvus lyčiai pasirinkti, skaičiaus ir diapazono laukus, skirtus kiekiui ir tūriui, atitinkamai.

Pabaigoje esantis mygtukas „Pateikti“ yra tas, kuris būtų atsakingas už formos pateikimą atribute nurodytu URL veiksmas Iš etiketės figūra (šiuo atveju "/submit_form"). Kad ši forma veiktų tikroje svetainėje, reikia, kad serveris būtų sukonfigūruotas gauti ir apdoroti informaciją iš šios formos kelyje „/submit_form“.