Kā izveidot HTML veidlapu (skaidroti piemēri)

Veidlapas tiek izmantotas, lai savāktu datus no lietotājiem, piemēram, kontaktinformāciju, vai ļautu lietotājiem mijiedarboties ar vietni, piemēram, ievietot komentārus vai veikt meklēšanu. Šajā rakstā mēs uzzināsim, kā izveidot pamata veidlapu, izmantojot HTML.

HTML veidlapas struktūra

Izmantojot tagu, tiek izveidota HTML veidlapa. Šajā tagā var būt dažādi ievades elementi, piemēram, teksta lauki, pogas, izvēles rūtiņas, radio pogas un citi.

ievades elementi ir šeit

Ievades elementi

Teksta lauki

Teksta lauki tiek izveidoti, izmantojot tagu ar atribūtu veids uzlikts tekstu. Piemēram:

Vārds:




Tālrunis

Elements izmanto tālruņa numura ievades laukiem.

Tālrunis:


Datums

Elements izmanto, lai izvēlētos datumu.

Dzimšanas datums:


Parole

Elements izmanto paroles ievades laukiem. Šajā laukā ievadītais teksts tiek parādīts kā punkti, lai paslēptu paroli.

Parole:


Arhīvs

Elements tiek izmantots, lai ļautu lietotājam izvēlēties failu no savas vietējās failu sistēmas.

Augšupielādēt failu:


Atzīmējiet izvēles rūtiņu

Elements izmanto ievades laukiem, kas ļauj lietotājam izvēlēties nevienu opciju, vienu vai vairākas opcijas.

Es piekrītu noteikumiem un nosacījumiem

Radio

Elements izmanto ievades laukiem, kas ļauj lietotājam izvēlēties vienu opciju no opciju kopas.

Dzimums:

Cilvēks

Sievietes

Numurs

Elements izmanto ciparu ievades laukiem.

Summa:


Diapazons

Elements izmanto ievades laukiem, kuros jāietver vērtība no vērtību diapazona.

Apjoms:




Pogas

Pogas tiek izveidotas, izmantojot tagu ar atribūtu veids uzlikts Iesniegt. Nospiežot šo pogu, tiks iesniegti veidlapas dati. Piemēram:

Vārds:




Veidlapas ievades apstrāde

Nospiežot pogu Iesniegt, veidlapas dati tiek nodoti apstrādei. To veic, izmantojot vienu no divām metodēm: GET vai POST, kas tiek norādītas, izmantojot atribūtu metodi Etiķetē .

GET metode

Metode GET iesniedz veidlapas datus kā daļu no URL. Tas ir noderīgi, piemēram, meklēšanai, kur veidlapas dati nav sensitīvi. Tomēr šai metodei ir ierobežojumi attiecībā uz nosūtāmo datu garumu.

ievades elementi ir šeit

POST metode

POST metode iesniedz veidlapas datus atsevišķi no URL. Tas ir drošāks un var apstrādāt daudz lielāku datu apjomu, tāpēc to izmanto, piemēram, saziņai vai pieteikšanās veidlapu iesniegšanai.

ievades elementi ir šeit

Abos gadījumos atribūts darbība tiek izmantots, lai norādītu servera puses skripta URL, kas apstrādās veidlapas datus.

HTML formas piemērs ar visiem elementiem 

Šeit ir veidlapa, kurā izmantoti visi šajā rakstā apskatītie elementi:

Reģistrācijas forma

Vārds:



Uzvārds:



E-pasts:



Tālrunis:



Dzimšanas datums:



Parole:



Augšupielādēt failu:



Es piekrītu noteikumiem un nosacījumiem


Dzimums:

Cilvēks

Sievietes

Summa:



Apjoms:




Šajā veidlapā ir lauki vārdam, uzvārdam, e-pastam, tālrunim, dzimšanas datumam, parolei, lauks augšupielādei a failu, noteikumu un nosacījumu izvēles rūtiņu, radio, lai izvēlētos dzimumu, un numura un diapazona lauki daudzumam un apjomam, attiecīgi.

Poga "Iesniegt" beigās ir tā, kas būs atbildīga par veidlapas iesniegšanu atribūtā norādītajā URL. darbība No etiķetes forma (šajā gadījumā "/submit_form"). Lai šī veidlapa darbotos reālā vietnē, jums ir jābūt konfigurētam serverim, lai saņemtu un apstrādātu informāciju no šīs veidlapas ceļā "/submit_form".