Kako ustvariti obrazec HTML (razloženi primeri)

Obrazci se uporabljajo za zbiranje podatkov od uporabnikov, kot so kontaktni podatki, ali za omogočanje uporabnikom interakcije s spletnim mestom, kot je objavljanje komentarjev ali izvajanje iskanja. V tem članku se bomo naučili, kako ustvariti osnovni obrazec z uporabo HTML.

Struktura obrazca HTML

Obrazec HTML se ustvari z uporabo oznake. Znotraj te oznake imate lahko vrsto različnih vnosnih elementov, kot so besedilna polja, gumbi, potrditvena polja, izbirni gumbi in drugo.

vhodni elementi gredo sem

Vhodni elementi

Besedilna polja

Besedilna polja so ustvarjena z uporabo oznake z atributom vrsta položen na besedilo. Na primer:

ime:




Telefon

Element uporablja se za polja za vnos telefonske številke.

telefon:


Datum

Element za izbiro datuma.

Rojstni datum:


Geslo

Element uporablja se za polja za vnos gesla. Besedilo, vneseno v to polje, je prikazano kot pike, da skrijete geslo.

geslo:


Arhiv

Element se uporablja, da uporabniku omogoči izbiro datoteke iz lokalnega datotečnega sistema.

Naloži datoteko:


Potrditveno polje

Element uporablja se za vnosna polja, ki uporabniku omogočajo, da izbere nobeno, eno ali več možnosti.

Sprejemam določila in pogoje

Radio

Element uporablja se za vnosna polja, ki uporabniku omogočajo izbiro ene možnosti iz nabora možnosti.

spol:

Človek

ženske

številka

Element uporablja se za številska vnosna polja.

znesek:


Razpon

Element uporablja se za vnosna polja, ki morajo vsebovati vrednost iz obsega vrednosti.

obseg:




Gumbi

Gumbi so ustvarjeni s pomočjo oznake z atributom vrsta položen na predložiti. Ko pritisnete ta gumb, bodo predloženi podatki obrazca. Na primer:

ime:




Upravljanje z vnosom obrazca

Ko pritisnete gumb za pošiljanje, se podatki obrazca pošljejo v obdelavo. To se izvede z eno od dveh metod: GET ali POST, ki ju podate z atributom metoda V nalepki .

Metoda GET

Metoda GET predloži podatke obrazca kot del URL-ja. Uporaben je za stvari, kot so iskanja, kjer podatki obrazca niso občutljivi. Vendar ima ta metoda omejitve glede dolžine podatkov, ki jih je mogoče poslati.

vhodni elementi gredo sem

metoda POST

Metoda POST predloži podatke obrazca ločeno od URL-ja. To je bolj varno in lahko obravnava veliko večjo količino podatkov, zato se uporablja za stvari, kot so oddaje kontaktnih ali prijavnih obrazcev.

vhodni elementi gredo sem

V obeh primerih atribut ukrepanje se uporablja za podajanje URL-ja skripta na strani strežnika, ki bo obdelal podatke obrazca.

Primer obrazca HTML z vsemi elementi 

Tukaj je obrazec, ki uporablja vse elemente, ki smo jih pregledali v tem članku:

Obrazec za registracijo

ime:



Priimek:



E-naslov:



telefon:



Rojstni datum:



geslo:



Naloži datoteko:



Sprejemam določila in pogoje


spol:

Človek

ženske

znesek:



obseg:




Ta obrazec ima polja za ime, priimek, e-pošto, telefon, datum rojstva, geslo, polje za nalaganje datoteka, potrditveno polje za določila in pogoje, radijski sprejemniki za izbiro spola ter polja za število in obseg za količino in glasnost, oz.

Gumb "Pošlji" na koncu je tisti, ki bi bil zadolžen za oddajo obrazca na URL, naveden v atributu ukrepanje Od etikete oblika (v tem primeru "/submit_form"). Da bi ta obrazec deloval na pravem spletnem mestu, bi morali imeti strežnik konfiguriran za prejemanje in obdelavo informacij iz tega obrazca na poti "/submit_form".