Uzorak obrasca html. Obrasci u HTML-u

Opis

Tag

Dozvoljeno unutar kontejnera

Sintaksa

Atributi

Postavlja kodiranje u kojem server može primati i obrađivati ​​podatke.

Obavezno.

Rice. 1. Prikaz elemenata obrasca u prozoru pretraživača

HTML obrazac je dio dokumenta koji omogućava korisniku da unese informacije od interesa, koje se naknadno mogu prihvatiti i obraditi na strani servera. Drugim riječima, obrasci se koriste za prikupljanje informacija koje unose korisnici.

Da biste odredili kojem elementu forme pripada trenutna oznaka, morate koristiti for atribut oznake . Vrijednost atributa for mora odgovarati vrijednosti globalnog atributa elementa obrasca na koji će se oznaka primijeniti. Atribut for se ne može koristiti ako je element će biti unutar elementa .

Pogledajmo primjer upotrebe:

U ovom primjeru mi:

• Unutra prvo oblici:
  • Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Imajte na umu da je za radio dugmad unutar istog obrasca mora biti navedeno isto ime, naznačili smo različite vrijednosti. Za prvo checked , što specificira da element treba biti prethodno odabran kada se stranica učita (u u ovom slučaju radio dugme sa vrednošću da ). Osim toga, specificirali smo globalne atribute za radio dugmad, koji definiraju jedinstveni identifikator za element.
  • Postavljena dva elementa , koji definiraju tekstualne oznake za naša tekstualna polja. Imajte na umu da smo koristili atribut for da odredimo kojem elementu forme pripada trenutna oznaka. Vrijednost atributa for odgovara vrijednosti globalnog atributa radio dugmeta koji nam je potreban.
• Unutra drugo oblici:
  • Objavljeno dva radio dugmad ( ) za odabir jedne od ograničenog broja opcija. Za drugo Za radio dugmad smo naveli atribut checked, koji označava da element treba biti prethodno odabran kada se stranica učita (u ovom slučaju radio dugme sa vrijednošću br). Osim toga, specificirali smo jedinstvene vrijednosti za radio dugmad unutar obrasca i ista imena.
  • Postavljena dva elementa , postavili smo naše radio dugmad unutar njih. Za razliku od prethodne metode, nema potrebe da se specificiraju globalni atributi (identifikator elementa) za radio dugmad i koristite for atribut za tekstualne oznake da biste ih upućivali (napravili vezivanje).

U pretraživaču obje opcije (metode) za korištenje tekstualnih oznaka izgledaju identično:

Tooltip za polja za unos

Pogledajmo primjer upotrebe:

U ovom primjeru smo specificirali za element sa tekstom tipa (tekstualno polje u jednom redu) i lozinkom tipa (polje lozinke), tekstualni nagoveštaj za korisnika (atribut čuvara mesta) koji opisuje očekivanu vrednost za unos.

Rezultat našeg primjera:

Pitanja i zadaci na temu

Prije nego pređete na sljedeću temu, završite vježbu:

• Koristeći stečeno znanje, kreirajte sljedeći obrazac za narudžbu:

Upozorenje: u poljima u kojima se očekuje odabir trebalo bi biti moguće birati klikom na tekst, a ne samo na sam element.

Nakon što završite vježbu, provjerite kod stranice tako što ćete otvoriti primjer u zasebnom prozoru kako biste bili sigurni da ste sve uradili ispravno.

HTML oznake koje definiraju HTML forme na web lokaciji

Izrađujemo web stranice i pojedinačne stranice na internetu za komunikaciju sa posetiocima.

HTML forme koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i glasanje, omogućavaju vam slanje poruka, kupovinu i tako dalje. HTML Obrazac je kreiran za jednu svrhu: prikupljanje i naknadno prenošenje informacija za obradu softverskom skriptom ili putem e-pošte.

Primjer HTML forme | Prijavite se na stranicu

Oznake, atributi i vrijednosti

• - odrediti oblik.
• name="" - definira naziv obrasca.
• method="" - definira način slanja podataka iz obrasca. Vrijednosti: "get" (podrazumevano) i "post" . Često se koristi metoda "post", jer omogućava prijenos velikih količina podataka.
• action="" - definira url na koji se podaci šalju na obradu. U našem slučaju - enter_data.php ..
• - definirati elemente forme kao što su dugmad, prekidači, tekstualna polja za unos podataka.
• type="text" - definira tekstualno polje za unos podataka.
• type="password" - definira polje za unos lozinke, sa tekstom prikazanim u obliku zvjezdica ili kružića.
• type="checkbox" - definira radio dugme.
• type="hidden" - definira skriveni element forme - koristi se za prijenos dodatne informacije na server.
• size="25" - dužina tekstualnog polja u znakovima.
• maxlength="30" - maksimalni dozvoljeni broj unesenih znakova.
• value="" - definira vrijednost koja će biti poslana na obradu ako se odnosi na radio dugmad ili prekidače. Vrijednost ovog atributa kao dio tekstualnog polja ili gumba bit će prikazana kao, na primjer, Vasya ili Login u gornjem primjeru.

Primjer HTML forme | Komentari na stranici

Oznake, atributi i vrijednosti

• action="http://site/comments.php" - definiše url na koji će se slati podaci iz obrasca.
• id="" - definira ime i identifikator elementa obrasca.
• name="" - definira ime elementa obrasca.
• - definirati tekstualno polje kao dio obrasca.
• cols="" - određuje broj kolona u tekstualnom polju obrasca.
• rows="" - definira broj redova tekstualnog polja obrasca.

Ako između stavite tekst, on će biti prikazan unutar polja kao primjer koji se može lako ukloniti.

Primjer HTML forme | Padajuća lista

Oznake, atributi i vrijednosti

• - definirati listu sa pozicijama za odabir.
• size="" - određuje broj vidljivih pozicija liste. Ako je vrijednost 1, imamo posla sa padajućom listom.
• - odrediti pozicije (stavke) liste.
• value="" - sadrži vrijednost koju će obrazac poslati na navedeni URL na obradu.
• selected="selected" - ističe stavku liste kao primjer.

Primjer HTML forme | Lista sa trakom za pomeranje

Povećanjem vrijednosti atributa size="" dobijamo listu sa trakom za pomicanje:

Za ovu opciju koristite oznaku multiple="multiple" koja omogućava odabir više pozicija. Njegov nedostatak omogućava vam da odaberete samo jednu stavku.

Pogledajte dodatno:

Obrasci su dizajnirani za slanje podataka od korisnika na web server. Obrasci u HTML-u mogu se sastojati od tekstualnih polja i tekstualnih oblasti, okvira za potvrdu i radio dugmadi i padajućih lista. Sve su to elementi forme. Svaki element služi za prenošenje nekog značenja sajtu.
U svojoj srži, HTML obrazac je web stranica na kojoj vidite područja za unos vaših informacija. Nakon što popunite obrazac i kliknete na Pošalji, informacije iz obrasca se pakuju i šalju na web server na obradu pomoću skripte na strani servera (fajl rukovaoca). Nakon obrade, druga web stranica vam se vraća kao odgovor. Sljedeća slika jasno pokazuje kako obrazac funkcionira:

Nema ništa teško u kreiranju HTML obrazaca. Najlakši način da dobijete ideju o obrascima je da raščlanite malo HTML koda, a zatim vidite kako funkcionira. Sljedeći primjer pokazuje sintaksu za kreiranje jednostavnog HTML obrasca:

Primjer: Jednostavan HTML obrazac

• Probajte sami »

Moj prvi obrazac:
ime:
prezime:

Element

Obrasci se ubacuju u web stranice pomoću elementa . Obezbeđuje kontejner za sav sadržaj obrasca, uključujući elemente kao što su tekstualna polja i dugmad, kao i sve druge HTML oznake. Međutim, ne može sadržavati drugi element .
Za slanje obrasca na server koristite dugme „Pošalji“, isti rezultat će se dobiti ako pritisnete taster „Enter“ unutar obrasca. Ako dugme "Pošalji" nije prisutno na obrascu, taster "Enter" se može koristiti za slanje.
Većina atributa elemenata utiču na obradu obrasca, a ne na njegov dizajn. Najčešći od njih su akcija I metoda. Atribut akcija sadrži URL na koji će informacije u obrascu biti poslane na obradu od strane servera. Atribut metoda je HTTP metoda koju pretraživači moraju koristiti za slanje podataka obrasca.

Element

Skoro sva polja obrasca kreiraju se pomoću elementa (od engleskog input - ulaz). Izgled element mijenjaju ovisno o vrijednosti njegovog atributa tip:

Evo nekih vrijednosti atributa tip:

Unos teksta i lozinke

Jedan od najjednostavnijih tipova elemenata obrasca je tekstualno polje, dizajnirano za unos teksta u jednom redu. Ovaj tip unos teksta je podešen prema zadanim postavkama i stoga će se prikazati polje u jednom redu ako zaboravite navesti atribut tip. Da biste u obrazac dodali jednolinijsko polje za unos teksta, trebate unutar elementa registrirati atribut tip sa tekstualnom vrijednošću:

Polje za unos lozinke je tip običnog tekstualnog polja. Podržava iste atribute kao tekstualno polje u jednom redu. Atribut ime postavlja naziv polja za unos lozinke koje će biti poslato na server zajedno sa lozinkom koju je unio korisnik. Da biste kreirali polje za lozinku, morate postaviti atribut lozinke na tip(lozinka (engleski) - lozinka):

Primjer kreiranja obrasca s poljem za lozinku:

Primjer: Polje Lozinka

• Probajte sami »

Vaša prijava:

Lozinka:

Vaša prijava:

Lozinka:

Atribut možete koristiti zajedno s ovim atributom maxlenght, čija vrijednost određuje maksimalan broj znakova koji se može unijeti u dati niz. Također možete postaviti dužinu polja za unos pomoću atributa veličina. Podrazumevano, većina pretraživača ograničava širinu tekstualnog polja na 20 znakova. Za kontrolu širine elemenata novih formi, umjesto atributa veličina, preporučujemo korištenje kaskadnih stilskih tablica (CSS).
Atribut vrijednost specificira vrijednost koja se po defaultu prikazuje u tekstualnom polju kada se obrazac učita. Unošenjem zadane vrijednosti u polje možete objasniti korisniku koje tačno podatke i u kojem formatu želite da korisnik ovdje unese. Ovo je kao uzorak, jer je korisniku mnogo zgodnije da popuni obrazac, videći primjer ispred sebe.

Prekidači (radio)

Element tip radio kreira prekidače koji koriste logički princip "ILI", omogućavajući vam da odaberete samo jednu od nekoliko vrijednosti: ako odaberete jednu poziciju, onda sve ostale postaju neaktivne. Osnovna sintaksa preklopnog elementa je:

Atribut ime za prekidače je neophodan i igra važnu ulogu u kombinovanju nekoliko elemenata prekidača u grupu. Da biste kombinirali radio dugmad u grupu, morate postaviti istu vrijednost atributa ime i različite vrijednosti atributa vrijednost. Atribut vrijednost postavlja vrijednost odabranog radio dugmeta za slanje na server. Vrijednost svakog elementa radio dugmeta mora biti jedinstvena unutar grupe tako da server zna koju opciju odgovora je korisnik izabrao.
Prisustvo atributa provjereno(s engleskog - instaliran) na elementu prekidača označava koju od predloženih opcija treba odabrati prema zadanim postavkama prilikom učitavanja stranice, ako je potrebno. Ovaj atribut se može postaviti samo za jedan radio gumb iz grupe:

• Probajte sami »

koliko imaš godina?

1. ispod 18 godina
2. od 18 do 24h
3. od 25 do 35
4. više od 35

Atribut akcije.

Glavni za element

Datoteka za obradu nalazi se na serveru mytestserver.com u folderu imenik i naziv serverske skripte koja će obraditi podatke - obrabotchik.php. Svi podaci koje ste unijeli u obrazac na web stranici bit će prenijeti na njega. Ekstenzija .php označava da je navedeni obrazac obrađen skriptom napisanom u PHP-u. Sam rukovatelj može biti napisan na drugom jeziku, na primjer to može biti skriptni jezik Python, Ruby, itd.
Preporučljivo je uvijek postaviti vrijednost atributa akcija. Ako obrazac treba proslijediti vrijednosti na istu stranicu na kojoj se nalazi, navedite prazan niz kao vrijednost atributa akcije: action="".

atribut metode

Atribut metoda specificira kako informacije treba da se prenesu na server. Način podnošenja obrasca koji odaberete zavisi od podataka koje želite da pošaljete uz obrazac. Obim ovih podataka ovdje igra glavnu ulogu. Najpopularnije su dvije metode prijenosa izvornih podataka obrasca iz pretraživača na server: GET I POST. Metoda se može postaviti na bilo koju koju odaberete, a ako je ne navedete, koristit će se zadana vrijednost GET. Razmotrimo upotrebu svakog od njih.

POST metoda

Metoda POST paketi formiraju podatke i šalju ih na server a da korisnik to ne primijeti, budući da su podaci sadržani u tijelu poruke. Web pretraživač, kada koristite metodu POSTšalje zahtjev serveru koji se sastoji od posebnih zaglavlja praćenih podacima obrasca. Pošto je sadržaj ovog zahtjeva dostupan samo serveru, metoda POST koristi se za prijenos povjerljivih podataka kao što su lozinke, podaci o bankovnoj kartici i drugi lični podaci korisnika. Metoda POST pogodan i za slanje velikih količina informacija, jer za razliku od ove metode GET, nema ograničenja u pogledu broja prenesenih znakova.

GET metoda

Kao što već znate, glavni zadatak pretraživača je da prima web stranice sa servera. Dakle, kada koristite metodu GET, vaš pretraživač jednostavno preuzima web stranicu kao i uvijek. Metoda GET također omota podatke obrasca, ali ih dodaje na kraj URL-a prije slanja zahtjeva serveru. Da biste razumjeli kako metoda funkcionira GET, da vidimo na djelu. Otvorite prvi primjer iz ove lekcije (Primjer: Jednostavan HTML obrazac) u Notepad-u (na primjer Notepad++) i napravite malu promjenu u HTML kodu: