Kako stvoriti obrazac u HTML -u

Kako stvoriti obrazac u HTML -u

Prikupljanje podataka od korisnika web stranice može se obaviti na nekoliko različitih načina. Obrasci na web stranicama mogu imati jednostavnu funkciju, kao što je pretplata korisnika na bilten, ili složeniju namjenu kao što je prijava za posao.





Međutim, jedna stvar koja je zajednička svim ovim jednostavnim i složenim oblicima je HTML i točnije HTML označiti.



Korištenje oznake obrasca

The tag je HTML element koji se koristi kao spremnik za zatvaranje drugih elemenata koji se mogu smatrati građevnim blokovima za obrasce. Neki od ovih temeljnih elemenata uključuju oznaka, oznaka i označiti.





The oznaka ima važan atribut koji pridonosi njenoj funkcionalnosti. Taj se atribut naziva radnja i koristi se za identifikaciju datoteke u koju će se proslijediti podaci uneseni u obrazac.

Korištenje primjera oznake





Gornji primjer pokazuje kako koristiti oznaku obrasca u svojim projektima. Jedno od glavnih rješenja za preuzimanje je da ako otvorite oznaku obrasca, ne zaboravite je zatvoriti. To će stvoriti strukturu obrasca i osigurati ispravnu obradu podataka unetih u obrazac.



Korištenje oznake

The tag se koristi za opis podataka u svakom polju za unos u obliku. Ova oznaka ima za atribut, koji se koristi za poboljšanje funkcionalnosti obrasca.

Povezano: Najbolji besplatni mrežni HTML uređivači za testiranje vašeg koda



Ako id koji je dodijeljen odgovarajućem polju za unos odgovara za vrijednost u oznaku, tada će se polje za unos automatski istaknuti kada kliknete na oznaku.

Korištenje primjera oznake


First Name:

U gornjem primjeru možete vidjeti da je za atributu se dodjeljuje vrijednost fname . Stoga, ako kreirate polje za unos sa fname id, ovo polje bit će istaknuto svaki put kada kliknete na Prvi Ime označiti.



Korištenje oznake

U svom najosnovnijem obliku, oznaka može se vidjeti kao okvir za tekst. The oznaka bilježi podatke od korisnika, a jedna od važnijih značajki je tip atribut. The tip Atribut označava vrstu podataka koje ovaj okvir za tekst može prikupiti.

Povezano: Kako stvoriti naslagani obrazac u CSS -u

Postoji nekoliko različitih vrijednosti koje možete dodijeliti tip atribut, no neki od popularnijih su sljedeći.

  • Tekst
  • Broj
  • E -pošta
  • Slika
  • Datum
  • Potvrdni okvir
  • Radio
  • Lozinka

Upotreba oznake Primjer


First Name:

The oznaka u gornjem kodu ima tri različita atributa od kojih svaki ima jedinstvenu funkciju. The tip atributu je dodijeljena tekstualna vrijednost što znači da će okvir za tekst prihvatiti samo znakove.

The iskaznica Atribut jedinstveni je identifikator za tekstualni okvir i važan je jer omogućuje pristup ovom elementu iz CSS datoteke. The Ime atribut je također jedinstveni identifikator; međutim, atribut name koristi se za interakciju s elementom sa poslužiteljske strane razvoja.

The iskaznica i Ime atributima se obično dodjeljuje ista vrijednost kao što jedan omogućuje pristup elementu sa strane klijenta, a drugi sa strane poslužitelja.

Korištenje elementa potvrdnog okvira

Element potvrdnog okvira vrlo je jedinstven u usporedbi s ostalim elementima koje možete koristiti s označiti. Omogućuje korisniku odabir jedne ili više opcija s popisa povezanih izbora. Potvrdni okviri lako se prepoznaju jer su predstavljeni sićušnim kvadratnim okvirima koji sadrže kvačicu kada su odabrani.

Primjer elementa potvrdnog okvira


Programming Languages:
Java
JavaScript
Python

U gornjem primjeru svaki od elemenata potvrdnog okvira ima atribut vrijednosti, a to je važno jer pomaže razlikovati svaku opciju potvrdnog okvira iz zbirke. Stoga, ako korisnik odabere 'Java' iz gore navedenih opcija, podaci će to odražavati.

Korištenje oznake i radijskih elemenata

The oznaka i radio elementi slični su u smislu da dopuštaju korisniku samo odabir jedne vrijednosti odjednom; stoga se može reći da imaju istu funkciju. Međutim, vrlo se razlikuju po izgledu.

Radio element je po izgledu bliži elementu potvrdnog okvira, međutim s radio elementom imate krugove umjesto kvadrata.

The tag proizvodi ono što je u biti padajući okvir koji korisniku omogućuje odabir jedne vrijednosti.

Primjer oznake i radijskog elementa


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Korištenje elementa datuma

Element datuma proizvodi mali tekstualni okvir koji generira kalendar kada se klikne. Korištenje datum kao vrsta unosa u vašim obrascima štiti korisnika od potencijalnog unosa netočnog datuma, što potencijalno može dovesti do prikupljanja pogrešnih podataka.

Koristeći primjer elementa datuma


Korištenje elementa e -pošte i lozinke

Kad programer dodijeli vrijednosti e -pošte ili zaporke atributu tipa datoteke oznaku, svaki proizvodi identičan okvir za tekst. Međutim, kada počnete koristiti ove kutije, razlike postaju očite.

Element e -pošte nadzire podatke unete u okvir za tekst i osigurava da svaki podnesak zadovoljava standardne zahtjeve za adresu e -pošte; što znači imati lokalni dio, iza kojeg slijedi simbol @ i koji završava domenom.

Primjer elementa e -pošte


U gornjem primjeru upoznali ste se s novim atributom koji se zove rezerviranog mjesta , i ovaj atribut uzima tekstualnu vrijednost koja je prikazana u tekstualnom okviru u izblijedjeloj sivoj boji. Ovaj se tekst koristi za označavanje podataka koje treba staviti u okvir za tekst, kao što je prikazano u gornjem primjeru.

Element lozinke pretvara znakove u zvjezdice dok se unose u tekstni okvir. Stoga, ako su zaslon vašeg računala vidljivi drugim ljudima, oni neće vidjeti lozinku koju ste unijeli.

Primjer elementa lozinke


Korištenje oznake gumba

U obliku obično postoje dvije različite vrste gumba. Prvi je gumb za slanje koji podatke unesene u obrazac dostavlja vrijednosti dodijeljenoj atributu radnje (koji se nalazi u < obrazac> označiti).

Primjer gumba za slanje

Submit

Druga vrsta gumba koja se obično koristi u obrascu je gumb za poništavanje koji briše podatke u obliku tako da korisnik može unijeti svježe podatke. The oznaka ima a tip atribut, koji se koristi za označavanje funkcije gumba. U gornjem primjeru tip atribut dodjeljuje vrijednost podnijeti , dakle, gumb koji ima tip vrijednost resetirati koristi se za poništavanje obrasca.

Primjer gumba za poništavanje

Reset

Izrada obrasca

Da biste stvorili jednostavan obrazac u HTML -u, morate sve gore navedene elemente priložiti u označiti.

Izrada primjera obrasca






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Gornji kôd će proizvesti sljedeći oblik:

ripati cd u mp3 s nazivima pjesama

Sada možete stvoriti jednostavan obrazac u HTML -u

Ovaj članak pruža vam sve alate za stvaranje funkcionalnog HTML obrasca. Identificira različite HTML oznake koje se koriste pri izradi obrasca i istražuje različite atribute koji se mogu koristiti s tim oznakama.

Međutim, većina oblika koje vidite na web stranicama ima jednu dodatnu komponentu; CSS, koji se koristi za oživljavanje forme i njezinu estetsku ugodnost.

Udio Udio Cvrkut E -pošta Važna lista svojstava osnovnih svojstava CSS3

Ovladajte esencijalnom CSS sintaksom pomoću našeg lista s podacima o svojstvima CSS3.

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML
  • Web razvoj
  • Vodiči za kodiranje
O autoru Kadeisha Kean(Objavljen 21 članak)

Kadeisha Kean je programer softvera i pisac tehničke/tehnologije. Ona ima izrazitu sposobnost pojednostavljivanja nekih od najsloženijih tehnoloških koncepata; proizvodnju materijala koji može lako razumjeti svaki početnik u tehnologiji. Oduševljena je pisanjem, razvojem zanimljivog softvera i putovanjem po svijetu (kroz dokumentarne filmove).

Više od Kadeishe Kean

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu