Obrazac za adresu tvrtke u html-u. Izrada obrazaca u HTML-u

05.04.2019 Internet, Wi-Fi, lokalne mreže

Dobar dan, ljubitelji web developmenta i oni koji žele izraditi vlastitu web stranicu. Prije toga, sve moje publikacije bile su posvećene osnovnim elementima jezika, načinima stvaranja različitih objekata sadržaja, njihovom oblikovanju, strukturiranju itd. Nakon što ste savladali prethodne teme, već možete napraviti prilično dobru web stranicu. Međutim, bit će nepotpuno bez današnje teme: "Stvaranje obrazaca u html-u."

Ovaj dio jezika je vrlo važan. Stoga odvojite vrijeme da ga proučite. Posebna pažnja, inače web izvor koji ste stvorili neće biti pušten u proizvodnju. Stoga ćete nakon čitanja članka saznati za što trebate koristiti obrasce, koje oznake se koriste za stvaranje, a moći ćete i isprobati konkretni primjeri na praksi. Započnimo!

Što je obrazac i kako funkcionira?

Oblik– ovo je jedan od najvažnijih objekata, koji je namijenjen za razmjenu informacijskih podataka između poslužitelja i korisnika.

Jednostavno rečeno, ako želite stvoriti internetsku trgovinu s mogućnošću naručivanja proizvoda na web mjestu, zatražiti registraciju na web resursu i raditi s računima ili pružiti kupcima povratne informacije od menadžera tvrtke, onda ne možete bez obrazaca.

Obrazac je naveden pomoću poseban element html jezik
.

Imajte na umu da dokument koda može sadržavati nekoliko deklaracija oznaka , međutim, samo jedan zahtjev može se poslati poslužitelju za obradu podataka. Zato podaci koje korisnik upisuje u za to predviđena polja, a odnose se na različite obrasce, ne bi smjeli biti ovisni. Također, nije dopušteno ugniježditi forme jedne u druge.

Za one koji su nestrpljivi i željni da brzo pogledaju prikaz koda, priložio sam jednostavan primjer korištenja ploče s tekstualnim poljem za lozinku s gumbom:

1 2 3 4 5 6 7 8 9 10 11 12

Primjer

Možda sada nije baš jasno što i kako u tome djeluje mali program, međutim, jamčim da ćete nakon čitanja cijelog ovog članka moći stvarati aplikacije koje su mnogo složenije.

Slanje podataka na stranu poslužitelja

Kako biste poslali upisane (ili odabrane) informacije u dijaloškom okviru, morate koristiti standardni mehanizam - Gumb Pošalji.

Kod za takvu metodu izgleda ovako:

Kada pokrenete prikazanu liniju, pojavit će se gumb s natpisom: "Pošalji".

Drugi način za slanje podataka na stranu poslužitelja je da pritisnete tipku Enter unutar dijaloškog okvira.

Nakon potvrde slanja navedene informacije ne stižu odmah na poslužitelj. Prvo ga obrađuje preglednik, što rezultira u obliku "ime=vrijednost".

Za ime je odgovoran parametar atributa tip označiti , a za vrijednost - podaci koje je korisnik unio. Zatim se konvertirani niz prosljeđuje rukovatelju, koji je najčešće naveden u atributu akcijski element

Sam parametar akcije nije potreban, au nekim slučajevima uopće nije potreban. Na primjer, ako je stranica web stranice napisana s koristeći php ili js, tada se obrada odvija na Trenutna stranica i nisu potrebni linkovi.

Za bolje razumijevanje cjelokupne slike funkcioniranja stranice, dodao bih da se na poslužitelju podaci obrađuju drugim jezicima. Tako se jezicima na strani poslužitelja smatraju: Python, php, C-jezici (C#, C, itd.), Java i drugi.

Sada bih želio stati i razgovarati više o elementu . Ako objasnite jednostavnim jezikom, To potreban za stvaranje tekstualnih polja, radio gumba, raznih gumba, skrivenih polja, potvrdnih okvira i drugih objekata.

Oznaka se ne mora upariti sa , međutim, ako trebate obraditi korisničke zapise ili ih unijeti, na primjer, u bazu podataka, tada ne možete bez spremnika.

Glavni atributi ovog elementa jezik za označavanje hiperteksta su:

Tekst– stvara tekstualno polje;
podnijeti– kreira gumb za slanje podataka na poslužitelj;
Slika– odgovoran je za gumb sa slikom;
Resetiraj– postavlja gumb za brisanje forme;
Lozinka– postavlja tekstualno polje posebno za lozinke;
Potvrdni okvir– odgovoran za polja s potvrdnim okvirima;
Radio– odgovoran za polja s izborom jednog elementa;
Dugme– stvara gumb;
Skriven– koristi se za skrivena polja;
Datoteka– postavlja polje odgovorno za slanje datoteka.

Metode prijenosa informacija

Postoje 2 načina prijenosa korisničkih podataka na stranu poslužitelja: Dobiti I Post. Ove metode izvode istu radnju, ali se značajno razlikuju jedna od druge. Stoga, prije nego što spomenemo bilo koji od njih, upoznajmo se s njihovim značajkama.

	Post	Dobiti
Veličina prenesenih dokumenata	Ograničeno na stranu poslužitelja.	Maksimalno – 4 KB.
Kako se prikazuju poslane informacije	Dostupno samo kada se gleda putem proširenja preglednika ili drugih posebnih softverskih proizvoda.	Odmah dostupno svima.
Korištenje knjižnih oznaka	Ne postoji način dodavanja u oznake jer se zahtjevi ne ponavljaju (sve stranice vode na jednu adresu).	Bilo koja stranica sa zahtjevom može se spremiti kao oznake i vratiti joj se kasnije.
Predmemoriranje	Na temelju prethodni odlomak svi zahtjevi na jednoj stranici.	Svaka se stranica može zasebno pohraniti u predmemoriju.
Svrha	Koristi se za prosljeđivanje velike datoteke(knjige, slike, videa, itd.), poruke, komentari.	Izvrsno za traženje traženih vrijednosti na web resursu ili za slanje kratkih tekstualnih poruka.

Kako bi se naznačilo koju od dvije metode prijenosa podataka preglednik treba koristiti, u elementu koristite navedeni parametar metoda(Na primjer, metoda="post").

Pogledajmo drugi primjer. Kreirajmo obrazac u koji trebate unijeti svoje osobne podatke (ime i prezime, datum rođenja) i kreirati lozinku. Nakon toga sve to šaljemo na poslužitelj pomoću metode Post.

<a href="https://bumotors.ru/hr/get-ili-post-chto-vybrat-ispolzovanie-metodov-get-i-post.html">POST metoda</a>

Unesite svoje osobne podatke!

Na primjer, za unos datuma postoje prekidači za broj svakog parametra (dan, mjesec i godina), kao i padajuća ploča sa samim kalendarom radi praktičnosti.

Stvaranje registracijske ploče

Obrađene su osnovne oznake i atributi. Zato je vrijeme da stvorite potpuni obrazac za registraciju koristeći stil css označavanje i provjera unesenih podataka. Naravno pogledajte rad poslužitelja s njima nećemo uspjeti, ali dizajn i važni detalji mi ćemo osigurati.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Registracija

Savjetujem vam da štedite ovaj kod programe u dokumentu s ekstenzijom .html i utf-8 kodiranjem te ga otvorite u prozoru preglednika. Vidjet ćete registracijsku ploču u punom sjaju s poljima za unos imena, prezimena, e-maila i ponovljene lozinke. Primijetite da kada pokrenete stranicu, pokazivač se odmah postavlja u prvo tekstualno polje. Ova tehnika se postiže kroz atribut autofokus.

Sva interaktivnost - polja za unos, potvrdni okviri, radio gumbi, padajuće liste, gumbi - su web obrasci i njihovi elementi. Ostavite komentar u obrascu, registrirate se putem obrasca, prijavite se putem obrasca, koristite obrazac za pretraživanje, glasate u anketama, postavljate datoteke, pretplatite se - sve to radite putem web obrazaca.

Unutarnja organizacija

Obrazac se zapravo sastoji od dva dijela: vizualni dizajn te skriptu koja obrađuje unesene podatke. Za pisanje skripte potrebno je poznavanje jednog od programskih jezika. Ovdje ih ne proučavamo, pa ćemo analizirati HTML komponentu - naučiti kako stvoriti sučelje obrasca, pod pretpostavkom da negdje već imamo skriptu koja ga obrađuje.

HTML obrazac se kreira korištenjem par oznaka

, unutar kojeg se nalaze oznake njegovih elemenata.

Oznake

Prije pokazivanja primjera, prođimo kroz oznake.

. Stvara obrazac. Ako usporedite obrazac sa tablicom, onda oznaka služi istu ulogu kao i oznaka

. Sljedeći atributi su mu priloženi.

akcijski. Adresa skripte ili dokumenta koji obrađuje podatke obrasca. Vrijednost je URL.
metoda. Metoda prijenosa podataka rukovatelju. Možete odrediti GET (zadano) ili POST. GET uključuje prosljeđivanje podataka kao dijela URL-a. Možda ste vidjeli nešto poput?id=225 u adresama. To je to. POST metoda radi drugačije, pa su preneseni podaci skriveni od korisnika. Sigurniji je, omogućuje vam prijenos više informacija, uključujući datoteke. Ali sve se ovo više odnosi na programiranje nego na HTML označavanje.
prihvati skup znakova. Postavlja kodiranje.
automatsko dovršavanje. Omogućuje (uključuje) ili onemogućuje (isključuje) automatsko popunjavanje obrazaca, gdje vam sam preglednik govori što da unesete na temelju onoga što ste zadnji put upisali. Ima smisla onemogućiti funkciju za povjerljive obrasce, kako preglednik ne bi slučajno otkrio važne podatke.
Ime. Naziv obrasca.

Postoje i drugi atributi, ali se koriste izuzetno rijetko.

. Zanimljiva oznaka s kojom možete kreirati bilo koji ulazni element, koji je naveden atribut tipa. Strogo govoreći, ova se oznaka može koristiti izvan obrasca, ali tada nećete moći navesti adresu rukovatelja, a element stranice neće biti funkcionalan.

tip. Glavni atribut oznake , koji određuje, kao što je već spomenuto, tip ulaznog elementa. Ima toliko značenja, a toliko su važna da ih je bilo dovoljno za cijeli stol (vidi dolje).

Značenje	Opis

	Zastave. Uz njihovu pomoć možete odabrati nekoliko opcija odjednom
	Gumb za odabir datoteke
	Skriveno polje, nije vidljivo u pregledniku
	Dugme sa slikom
	Polje za unos lozinke. Obično tekstualno polje, ali znakovi koje unesete skriveni su iza zvjezdica (*)
	Prekidači. Gotovo potvrdni okviri, ali uz njihovu pomoć možete odabrati samo jednu od predloženih opcija
	Gumb za vraćanje podataka obrasca na izvorne vrijednosti
	Gumb za slanje podataka na poslužitelj. Obično ih pritisnete za potvrdu unosa - Spremi, primijeni, OK
	Polje za tekst

Mnoge nove vrijednosti su se pojavile u HTML5, ali su, nažalost, do sada samo djelomično podržane (lipanj 2016.).

autofokus. Fokus unosa bit će postavljen prema zadanim postavkama na element za koji je naveden ovaj atribut.
provjereno. Postavite zadani potvrdni okvir ili radio gumb.
uzorak. Pomoću ovog atributa možete prisiliti korisnika da unese podatke u određenom formatu. Na primjer, unesite samo jedan broj od 0 do 9 ili samo slova latinica(trebalo bi biti poznato). Sve dok polje nije ispravno popunjeno, podaci obrasca neće biti predani u obradu.
rezerviranog mjesta. Postavlja tekst opisa alata.
.
vrijednost. Vrijednost stavke popisa koju će skripta obraditi.
odabran. Stavka s ovim atributom bit će označena prema zadanim postavkama, kao da ju je korisnik odabrao.
. Spremnik vam omogućuje grupiranje stavki popisa .
onemogućeno. Čini grupu popisa nemogućom za odabir (ali je prikazuje u drugoj boji).
označiti. Tekst naslova grupe.

Primjer obrasca

Sada kada su sve oznake poznate, kreirajmo mali obrazac za autorizaciju, čije podatke obrađuje datoteka skripta.php, koji se nalazi u mapi s HTML stranicom.

Kod će biti ovakav.

Oblik Prijaviti se:

Lozinka:

Tko si ti?

Zapamtiti

Pogledajmo neke njegove dijelove.

- stvoriti obrazac koji obrađuje datoteka script.php. Podaci se prenose metodom GET.

- oznaka prijelaza u sljedeći redak.

< ulazni Ime=" prijaviti se" tip=" tekst" veličina="25" maksimalna dužina="30" vrijednost="Mihail">- kreirajte tekstualno polje s imenom prijava, širine 25 znakova. Navodimo Mikhail kao zadanu vrijednost kako bi korisnik mogao razumjeti što i kako unijeti.

< ulazni Ime=" proći" tip=" lozinka" veličina="25" maksimalna dužina="30" vrijednost=""> - kreirati polje za unos lozinke (simboli se zamjenjuju zvjezdicama). Širina polja - 25, maksimalna duljina lozinka - 30 znakova.

< Izaberi>< opcija vrijednost=" c1">Gostopcija>< opcija vrijednost=" c2">Administratoropcija>Izaberi> - stvoriti jednostavan padajući popis od dvije stavke.

< ulazni Ime=" uštedjeti" tip=" potvrdni okvir" vrijednost=" Da">Zapamtite- dodajte potvrdni okvir i napišite tekst objašnjenja.

 < ulazni tip=" podnijeti" Ime=" Unesi" vrijednost="Prijava">- kreirati gumb čijim klikom započinje proces obrade podataka.

- zatvorite obrazac.

U pregledniku će web obrazac izgledati kao na slici ispod.

Možete ga ispuniti, ali da bi počeo raditi morate napisati kod i spremiti ga u datoteku skripta.php pored HTML stranice.

S obzirom na osnovno HTML oznake ne možemo a da se ne dotaknemo ovoga važan element poput oblika. Na web stranicama često su potrebne povratne informacije. Na primjer, ispunjavanje obrasca na web mjestu, registracija, autorizacija, komentari itd. U svim tim slučajevima korisnik ispunjava posebna područja (polja obrasca) na stranici, nakon čega se podaci šalju na poslužitelj. Za stvaranje Povratne informacije koriste se oblici. Forma je fragment HTML dokument namijenjeni korisničkom unosu.
Slika prikazuje obrazac za upis studenata na web stranici obrazovne ustanove.
Za izradu obrasca koristi se spremnik
S atribut akcije, koji određuje stranicu na poslužitelju koja će obraditi podatke poslane putem obrasca.
Struktura u svom najjednostavnijem obliku:

elementi forme...
Svaki obrazac također mora imati gumbi za slanje, namijenjen slanju podataka nakon ispunjavanja obrasca.
Struktura gumba:
Dakle, za snimanje gotovo svih elemenata obrasca koristi se oznaka s atributom tipa. Za izradu gumba koji poništava sve podatke iz obrazaca, koristi se sljedeća struktura:
Za stvaranje polje za tekst(textfield) postoji tekstualni parametar. Koriste se sljedeći parametri: name – naziv polja; veličina – za polje u simbolima; maxlength – najveći mogući broj znakova u polju; vrijednost – informacija prikazana u obrascu prema zadanim postavkama
Primjer unosa obrasca s dva tekstualna polja:

Unesite svoje ime:

Unesite prezime:

Rezultat obrasca prikazan je na slici.
Ako trebate unijeti u tekstualno polje veliki broj informacije, na primjer, komentar koristi oblik tekstualnog područja koje se stvara pomoću oznake sa sljedećim atributima: naziv – naziv područja; cols – broj stupaca područja; redovi – broj redova; wrap – način prelamanja linija (on – prelomi linije, off – ne prelamaj linije).Gornjem kodu dodajmo polje tekstualnog područja:Komentar: <textarea name="area" cols=”25” rows=”5” wrap=”on”>
Rezultat rada koda s područjem teksta prikazan je na slici.

Sljedeći element obrasci su popisi koji vam omogućuju da napravite izbor iz predstavljenog skupa vrijednosti. Oznake vam omogućuju stvaranje obrasca popisa

Da bi element bio istaknut kada se stranica učita, on je neophodan u tagu
Slična metoda odabira su elementi obrasca potvrdnog okvira i radiobuttona. Razlika između ovih elemenata je u tome što potvrdni okvir omogućuje više odabira, dok radio gumb omogućuje samo jedan odabir.
Struktura potvrdnog okvira i unosa radio gumba:
tekst
Radio gumb:
tekst
U elementima navedenim u strukturi, checked atribut se prema zadanim postavkama koristi za označavanje potvrdnog okvira i radio gumba. Primjer korištenja potvrdnog okvira, radio gumba i HTML koda prikazan je na slici.
Drugi element obrasca je gumb, specificiran pomoću atributa oznake tipa s gumbom vrijednosti:
U navedenom kodu za kreiranje gumba postoji parametar onclick, koji obično specificira kod u programskom jeziku za izvođenje određene akcije kada se klikne na ovaj gumb:
Za prikaz poruke u posebnom prozoru koristite JavaScript naredbu – aler. Rezultat primjera prikazan je na slici.
Za umetanje slike u gumb upotrijebite kod prikazan u sljedećem primjeru:
Prilikom registracije i prijave na web stranice koristi se polje sa skrivenim testom, prikazanim zvjezdicama. Ovo je element obrasca lozinke:
Registracija na stranici često je podijeljena na nekoliko stranica i svaka sljedeća mora sadržavati podatke iz prethodne. Kako bi se sakrile prenesene informacije, koristi se skriveni element obrasca:
Skriveni element obrasca bit će nevidljiv u prozoru preglednika.
Za učitavanje datoteka na poslužitelj, obrasci imaju element datoteke. Primjer koda za učitavanje datoteka na poslužitelj prikazan je u nastavku:
Dakle, u ovoj smo temi pogledali elemente obrasca za stvaranje različitih HTML stranica, koji vam, zajedno s rukovateljima skriptama na računalu ili poslužitelju, omogućuju razvoj potpunih web aplikacija.

Često na web stranicama možete pronaći stranice na kojima su postavljeni HTML obrasci. Web obrasci su prikladan način za primanje informacija od posjetitelja vaše stranice. Primjer toga je -, - koji daje povratne informacije posjetiteljima stranice i programerima. Obrasci su također prikladni za programere web stranica kada razvijaju CMS, što im omogućuje da zadrže glavno svojstvo web mjesta - relevantnost. Ovaj članak posvećen je osnovama izrade HTML obrazaca, njihovoj obradi i načinima prijenosa podataka sa zaslonskih obrazaca u PHP skripte.

1) Napravite jednostavan obrazac

Oznake
I
definirati početak i kraj obrasca. Početna oznaka obrasca
sadrži dva atributa: akcijski I metoda. Atribut akcije sadrži URL skripte koji se mora pozvati za obradu skripte. Atribut metoda govori pregledniku koju vrstu HTTP zahtjeva treba koristiti za slanje obrasca; moguće vrijednosti POST I DOBITI.

Komentar

Glavna razlika između metoda POST i GET je način na koji se informacije prenose. U GET metodi, parametri se prosljeđuju kroz adresnu traku, tj. uglavnom u zaglavlju HTTP zahtjeva, dok se u POST metodi parametri prenose kroz tijelo HTTP zahtjeva i ni na koji se način ne odražavaju u adresnoj traci.

$tekst = nl2br($_POST["mojtekst"]);
?>

Zadatak: Pretpostavimo da trebate stvoriti padajući popis s godinama od 2000. do 2050.
Riješenje: Potreba za stvaranjem HTML obrazac s elementom SELECT i PHP – skriptom za obradu forme.
Rasprava:

Prvo, kreirajmo dvije datoteke: obrazac.html I akcija.php. U datoteci obrazac.html sadržavat će html obrazac s padajućim popisom. Štoviše, vrijednosti na popisu mogu se odrediti na dva načina:

I. Ručni unos podataka:

II. Unos podataka kroz petlju:

Kao što vidite, drugi primjer s petljom je kompaktniji. Mislim da nema potrebe davati skriptu rukovatelja za ovaj obrazac, jer se obrađuje potpuno isto kao tekstualno polje, tj. vrijednosti popisa mogu se dohvatiti iz superglobalnog niza $_POST.

Opis:

Kreirajmo HTML obrazac za slanje datoteke na poslužitelj.

Ovaj html obrazac sadrži element pretraživati, koji otvara dijaloški okvir za odabir datoteke za učitavanje na poslužitelj. Kada pritisnete tipku "Prijenos datoteke", datoteka se prosljeđuje skripti rukovatelja.

Zatim trebate napisati skriptu rukovatelja akcija.php. Prije nego što napišemo rukovatelj, moramo odlučiti u koji direktorij ćemo kopirati datoteku:

if(isset($_FILES [ "myfile" ])) // Ako datoteka postoji
{
$katalog = "../slika/" ; // Naš katalog
ako (je_dir($katalog)) // Ako takav direktorij postoji
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Privremena datoteka
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Naziv datoteke
if(! kopiraj ($myfile, $catalog)) echo "Pogreška pri kopiranju datoteke". $myfile_name // Ako kopiranje datoteke nije uspjelo
}
else mkdir ("../slika/" ); // Ako ne postoji takav direktorij, kreirat ćemo ga
}
?>

Komentar

Ako vjerujete korisnicima da uploaduju bilo koje datoteke na vaš poslužitelj, morate biti izuzetno oprezni. Napadači mogu ugraditi "loš" kod u sliku ili datoteku i poslati ga na poslužitelj. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.

Ovaj primjer demonstrira stvaranje direktorija i kopiranje datoteke u taj direktorij na poslužitelj.

Također bih želio pokazati primjer s elementom potvrdni okvir. Ovaj element se neznatno razlikuje od ostalih elemenata ako ne i po jednom od elemenata potvrdni okvir’a nije odabrano, tada superglobalna varijabla $_POST vratit će praznu vrijednost:

Plava
Crno
Bijela

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ako je odabran barem 1 element
inače jeka "Odaberi vrijednost";
?>