Adresa firme u html-u. Kreiranje obrazaca u HTML-u

05.04.2019 Internet, Wi-Fi, lokalne mreže

Dobar dan, ljubitelji web razvoja i oni koji žele napraviti svoju web stranicu. Prije toga, sve moje publikacije bile su posvećene glavnim elementima jezika, načinu kreiranja različitih objekata sadržaja, njihovom formatiranju, strukturiranju itd. Nakon što ste savladali prethodne teme, već možete kreirati prilično dobru stranicu. Međutim, bilo bi nepotpuno bez današnje teme: "Kreiranje obrazaca u html-u."

Ovaj dio jezika je veoma važan. Zato ga uzmi na učenje Posebna pažnja, inače web resurs koji ste kreirali neće biti pušten u proizvodnju. Tako ćete, nakon čitanja članka, znati za šta treba koristiti forme, s kojim oznakama se kreiraju, a moći ćete i isprobati konkretnim primjerima na praksi. Hajde da počnemo!

Šta je forma i kako funkcioniše

Forma- ovo je jedan od najvažnijih objekata, koji je dizajniran za razmjenu informacijskih podataka između servera i korisnika.

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

Forma se postavlja pomoću specijalni element html jezik
.

Imajte na umu da dokument sa kodom može sadržavati nekoliko deklaracija oznaka , međutim, serveru se može poslati samo jedan zahtjev za obradu podataka. Zato podaci koje korisnik unosi u polja rezervirana za to i odnose se na različite obrasce ne bi trebali biti zavisni. Također, nije dozvoljeno gniježđenje formi jedna u drugu.

Za one koji su nestrpljivi i željni da na brzinu pogledaju prikaz koda, priložio sam jednostavan primjer korištenja panela 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 šta i kako u tome djeluje mali program, ali garantiram da ćete nakon čitanja cijelog članka moći kreirati aplikacije mnogo puta teže.

Slanje podataka na stranu servera

Da biste poslali ukucane (ili odabrane) informacije u dijaloški okvir, morate koristiti standardni mehanizam - Dugme za slanje.

Kod za ovu metodu izgleda ovako:

Kada pokrenete prikazanu liniju, pojaviće se dugme sa natpisom: "Pošalji".

Drugi način slanja podataka na stranu servera je da pritisnete tipku Enter u okviru za dijalog.

Nakon potvrde slanja navedene informacije, ona se ne šalje odmah serveru. Prvo ga obrađuje pretraživač, što dovodi do oblika "ime = vrijednost".

Parametar atributa je odgovoran za ime tip tag , a za vrijednost - podatke koje je unio korisnik. Zatim se konvertovani niz prosljeđuje rukovaocu, koji se najčešće postavlja u atributu akcija element

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

Za bolje razumijevanje cjelokupne slike funkcionisanja sajta, dodao bih da se na serveru rad sa podacima već obavlja na drugim jezicima. Dakle, serverski jezici su: Python, php, jezici slični C (C#, C, itd.), Java i drugi.

Sada bih želio stati i govoriti više o elementu . Ako objasnite običan jezik, onda potrebna za kreiranje tekstualnih polja, radio dugmadi, raznih dugmadi, skrivenih polja, okvira za potvrdu i drugih objekata.

Oznaka ne mora biti uparena sa , međutim, ako trebate obraditi korisničke zapise ili ih unijeti, na primjer, u bazu podataka, onda ne možete bez kontejnera.

glavni atributi dati element hipertekstualni jezici za označavanje su:

Tekst- kreira tekstualno polje;
Submit– kreira dugme za slanje podataka na server;
Slika- odgovoran za dugme sa slikom;
resetovati– postavlja dugme za brisanje obrasca;
Lozinka– postavlja tekstualno polje posebno za lozinke;
polje za potvrdu– odgovoran za polja sa zastavama;
Radio– odgovoran je za polja sa izborom jednog elementa;
dugme- kreira dugme;
Skriveno– koristi se za skrivena polja;
fajl– postavlja polje odgovorno za slanje datoteka.

Metode prenosa informacija

Postoje 2 načina za prosljeđivanje korisničkih podataka serverskoj strani: Get I pošta. Ove metode izvode istu radnju, ali se značajno razlikuju jedna od druge. Stoga, prije nego što istaknemo bilo koju od njih, hajde da se upoznamo s njihovim karakteristikama.

	pošta	Get
Veličina poslanih dokumenata	Ograničeno na strani servera.	Maksimalno - 4 KB.
Kako prikazati poslane informacije	Dostupno samo kada se gleda preko ekstenzija pretraživača ili drugih posebnih softverskih proizvoda.	Odmah dostupno svima.
Korišćenje obeleživača	Nema opcije za označavanje jer se zahtjevi ne ponavljaju (sve stranice povezuju na istu adresu).	Svaka stranica sa zahtjevom može se označiti i otići na nju nakon nekog vremena.
keširanje	Na osnovu prethodni stav svi zahtjevi na jednoj stranici.	Svaka stranica se može posebno keširati.
svrha	Koristi se za prosljeđivanje velike datoteke(knjige, slike, video zapisi, itd.), poruke, komentari.	Odlično za traženje traženih vrijednosti na web resursu ili za slanje kratkih tekstualnih poruka.

Da biste odredili koji od dva načina prenosa podataka radi sa pretraživačem, u elementu koristite navedeni parametar metoda(na primjer, method="post").

Razmotrimo drugi primjer. Kreirajmo obrazac u koji treba da unesete svoje lične podatke (ime i prezime, datum rođenja) i smislite lozinku. Nakon svega ovo se šalje na server koristeći metodu pošta.

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

Unesite svoje lične podatke!

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

Kreiranje ploče za registraciju

Glavne oznake i atributi su pokriveni. Zato je vrijeme da kreirate punopravni obrazac za registraciju koristeći stil css markup i validaciju ulaznih podataka. Naravno da vidite rad servera nećemo uspjeti s njima, ali dizajn i važne detalje mi ćemo obezbediti.

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 ti da zadržiš dati kod programa u dokumentu sa ekstenzijom .html i utf-8 kodiranjem i otvorite ovo drugo u prozoru pretraživača. Prije nego što se pojavi u svom sjaju panel za registraciju sa poljima za unos imena, prezimena, e-maila i lozinke sa ponavljanjem. Obratite pažnju da kada se stranica pokrene, kursor se odmah postavlja u prvi okvir za tekst. Ova tehnika se postiže kroz atribut autofokus.

Sve interaktivne – polja za unos, polja za potvrdu, radio dugmad, padajuće liste, dugmad – to su web forme i njihovi elementi. U obrascu ostavljate komentar, koristite formu za registraciju, koristite formu za autorizaciju, koristite formular za pretragu, glasate u anketama, postavljate fajlove, pretplatite se - sve to radite koristeći web forme.

Unutrašnja organizacija

U stvari, obrazac se sastoji od dva dijela: vizuelni dizajn i skriptu koja obrađuje unesene podatke. Da biste napisali skriptu, morate znati jedan od programskih jezika. Ovdje ih ne proučavamo, pa ćemo analizirati HTML komponentu - naučiti kako napraviti interfejs forme, pod pretpostavkom da negdje već imamo skriptu koja to obrađuje.

HTML obrazac se kreira pomoću uparena oznaka

, unutar kojeg se nalaze oznake njegovih elemenata.

oznake

Prije nego što pokažemo primjere, prođimo kroz oznake.

. Kreira obrazac. Ako uporedimo obrazac sa tabelom, onda tag obavlja istu ulogu kao i oznaka

. Dolazi sa sljedećim atributima.

akcija. Adresa skripte ili dokumenta koji obrađuje podatke obrasca. URL je specificiran kao vrijednost.
metoda. Metoda za prosljeđivanje podataka rukovaocu. Možete odrediti GET (podrazumevano) ili POST. GET znači prosljeđivanje podataka kao dijela URL-a. Možda ste vidjeli nešto poput ?id=225 u adresama. To je ono što je. Metoda POST radi drugačije, pa su stoga preneseni podaci skriveni od korisnika. Sigurniji je, omogućava vam prijenos više informacija, uključujući fajlove. Ali sve se ovo više odnosi na programiranje nego na HTML označavanje.
accept-charset. Postavlja kodiranje.
autocomplete. Omogućava (uključeno) ili onemogućuje (isključuje) automatsko dovršavanje obrasca, pri čemu vam pretraživač sam traži šta da unesete na osnovu onoga što ste zadnji put upisali. Onemogućavanje funkcije ima smisla za povjerljive obrasce, tako da pretraživač nenamjerno ne prikazuje važne podatke.
ime. Naziv obrasca.

Postoje i drugi atributi, ali se rijetko koriste.

. Zanimljiva oznaka s kojom možete kreirati bilo koji ulazni element, koji je naveden atribut tipa. Strogo govoreći, ovaj tag se može koristiti i van forme, ali tada nećete moći navesti adresu rukovaoca, a element stranice neće biti funkcionalan.

tip. Glavni atribut oznake , koji definira, kao što je već spomenuto, tip ulaznog elementa. Ima toliko vrijednosti, a one su toliko važne da je bilo dovoljno za cijelu tabelu (vidi dolje).

Značenje	Opis

	Potvrdni okviri. Uz njihovu pomoć možete odabrati nekoliko opcija odjednom.
	Dugme za odabir datoteke
	Skriveno polje, nije vidljivo u pretraživaču
	Dugme sa slikom
	Polje za lozinku. Polje običnog teksta, ali uneseni znakovi su skriveni iza zvjezdica (*)
	Prekidači. Gotovo kao okviri za potvrdu, ali uz njihovu pomoć možete odabrati samo jednu od predloženih opcija
	Dugme za vraćanje podataka obrasca na originalne vrijednosti
	Dugme za slanje podataka na server. Obično ih pritisnete da potvrdite unos - Sačuvaj, Primijeni, OK
	Polje za tekst

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

autofokus. Fokus unosa će podrazumevano biti na elementu za koji je naveden ovaj atribut.
provjereno. Postavite zadani okvir za potvrdu ili radio dugme.
uzorak. Pomoću ovog atributa možete natjerati 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). Dok se polje ne popuni ispravno, podaci obrasca neće biti predati na obradu.
čuvar mjesta. Postavlja tekst nagoveštaja.
.
vrijednost. Vrijednost stavke liste koju treba obraditi skripta.
odabrano. Stavka s ovim atributom će biti označena po defaultu, kao da ju je korisnik odabrao.
. Kontejner vam omogućava grupisanje stavki liste .
onemogućeno. Omogućava izbor grupe liste (dok se prikazuje u drugoj boji).
etiketa. Tekst zaglavlja grupe.

Primjer obrasca

Sada kada su sve oznake poznate, napravimo mali formular za autorizaciju, čije podatke obrađuje datoteka script.php, koji se nalazi u folderu sa HTML stranicom.

Kod će biti ovakav.

Forma Ulogovati se:

Lozinka:

Ko si ti?

Zapamti

Pogledajmo neke njegove dijelove.

- kreirati formu koju obrađuje datoteka script.php. Podaci se prenose metodom GET.

- oznaka za prelazak na sljedeći red.

< unos ime=" Ulogovati se" tip=" tekst" veličina="25" maxlength="30" vrijednost="Michael">- kreirajte tekstualno polje pod nazivom login sa širinom od 25 karaktera. Navodimo Mikhail kao zadanu vrijednost tako da korisnik razumije šta i kako unosi.

< unos ime=" pass" tip=" lozinka" veličina="25" maxlength="30" vrijednost=""> - kreirajte polje za unos lozinke (znakovi se zamjenjuju zvjezdicama). Širina polja - 25, maksimalna dužina lozinka - 30 karaktera.

< izaberite>< opcija vrijednost=" c1">Gostopcija>< opcija vrijednost=" c2">Administratoropcija>izaberite> - kreirajte jednostavnu padajuću listu od dvije stavke.

< unos ime=" spasiti" tip=" polje za potvrdu" vrijednost=" da"> Zapamti- dodati zastavicu i napisati tekst objašnjenja.

 < unos tip=" submit" ime=" enter" vrijednost="Prijava">- kreirati dugme, pritiskom na koje započinje proces obrade podataka.

- zatvorite obrazac.

U pretraživaču će web obrazac izgledati kao na slici ispod.

Može se popuniti, ali da bi počeo da radi, potrebno je da napišete kod i da ga sačuvate u fajlu script.php pored HTML stranice.

S obzirom na glavnu HTML oznake ne možemo a da se ne dotaknemo takvih važan element kao forme. Često web stranice zahtijevaju povratne informacije. Na primjer, popunjavanje upitnika na stranici, registracija, autorizacija, komentari itd. U svim ovim slučajevima korisnik popunjava posebne oblasti (polja obrasca) na stranici, nakon čega se podaci šalju na server. Za stvaranje povratne informacije koriste se obrasci. Forma je fragment HTML dokument za korisnički unos.
Na slici je prikazan obrazac za registraciju učenika na web stranici obrazovne ustanove.
Kontejner se koristi za kreiranje obrasca
od atribut akcije, koji specificira stranicu na serveru koja će obraditi podatke dostavljene putem obrasca.
Struktura najjednostavnijeg oblika:

elementi forme...
Svaki obrazac također mora imati dugmad za slanje, dizajniran za slanje podataka nakon popunjavanja obrasca.
Struktura dugmadi:
Dakle, za snimanje gotovo svih elemenata forme koristi se oznaka sa atributom tipa. Za kreiranje dugmeta koje resetuje sve podatke iz obrazaca, koristi se sljedeća struktura:
Za stvaranje tekstualno polje(tekstualno polje) postoji parametar teksta. Za to se koriste sljedeći parametri: ime – naziv polja; veličina - za polje u znakovima; maxlength - maksimalni mogući broj znakova u polju; vrijednost - informacije prikazane u obrascu prema zadanim postavkama
Primjer unosa obrasca sa dva tekstualna polja:

Unesite svoje ime:

Unesite prezime:

Rezultat obrasca je prikazan na slici.
Ako treba da unesete u tekstualno polje veliki broj informacije, na primjer, komentar se koristi u obliku tekstualnog područja (textarea), koji se kreira pomoću oznake sa sljedećim atributima: naziv – naziv područja; cols je broj kolona područja; rows - broj redova; wrap - način umotavanja materijala (uključeno - omotati linije, isključeno - ne omotati linije).Dodajmo polje za tekst u gornji kod:komentar: <textarea name="area" cols=”25” rows=”5” wrap=”on”>
Rezultat koda sa tekstualnim područjem prikazan je na slici.

sljedeći element obrasci su liste koje vam omogućavaju da napravite izbor iz predstavljenog skupa vrijednosti. Oznake vam omogućavaju da kreirate obrazac liste

Da bi element bio istaknut kada se stranica učita, neophodan je u tag-u
Sličan način odabira su elementi obrasca polja za potvrdu i radio-dugme. Razlika između ovih elemenata je u tome što vam potvrdni okvir omogućava da napravite više izbora, a radio dugme samo jedno.
Struktura polja za potvrdu i unosa radio dugmeta:
tekst
Radio dugme:
tekst
U elementima navedenim u strukturi, označeni atribut se po defaultu koristi za isticanje polja za potvrdu i radio dugmeta. Primjer korištenja polja za potvrdu, radio dugmeta, kao i HTML koda prikazan je na slici.
Drugi element forme je dugme, koje je specificirano pomoću atributa tipa oznake. sa vrijednošću gumba:
U navedenom kodu za kreiranje dugmeta nalazi se onclick parametar, koji po pravilu specificira kod u programskom jeziku za izvođenje radnje kada se klikne na ovo dugme:
Za prikaz poruke u posebnom prozoru koristi se javascript naredba, aler. Rezultat primjera prikazan je na slici.
Da biste umetnuli sliku u dugme, koristite kod prikazan u sljedećem primjeru:
Prilikom registracije i ulaska na stranice koristi se polje sa skrivenim testom koje se prikazuje kao zvjezdice. Ovo je element obrasca za lozinku:
Često je registracija na stranici podijeljena na nekoliko stranica, a svaka sljedeća mora sadržavati podatke s prethodne. Element skrivenog obrasca koristi se za skrivanje dostavljenih informacija:
Skriveni element obrasca biće nevidljiv u prozoru pretraživača.
Za učitavanje datoteka na server, obrasci imaju element datoteke. Primjer koda za upload fajlova na server je prikazan ispod:
Dakle, u ovoj temi su razmatrani elementi obrasca za kreiranje različitih HTML stranica, koje, zajedno sa procesorima skripti na računaru ili serveru, omogućavaju razvoj punopravnih web aplikacija.

Često na web stranicama možete pronaći stranice sa HTML formama postavljenim na njima. Web obrasci su zgodan način da dobijete informacije od posjetitelja vaše web stranice. Primjer za to je -, - koji pruža povratne informacije posjetiteljima i programerima web stranica. Obrasci su takođe pogodni za programere sajta kada razvijaju CMS, što vam omogućava da održite glavno svojstvo sajta - relevantnost. Ovaj članak se fokusira na osnove kreiranja HTML obrazaca, njihovu obradu i kako prenijeti podatke iz obrazaca na ekranu u PHP skripte.

1) Kreiranje jednostavnog obrasca

oznake
I
postavite početak i kraj obrasca. Početna oznaka obrasca
sadrži dva atributa: akcija I metoda. Atribut akcije sadrži URL skripte koju treba pozvati za obradu skripte. Atribut metoda govori pretraživaču koju vrstu HTTP zahtjeva da koristi za slanje obrasca; moguće vrijednosti POŠTA I GET.

Komentar

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

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

zadatak: Recimo da želimo da kreiramo padajuću listu sa godinama od 2000. do 2050. godine.
Rješenje: Treba kreirati HTML forma sa SELECT elementom i PHP - skriptom za obradu forme.
Diskusija:

Počnimo kreiranjem dva fajla: form.html I action.php. U fajlu form.htmlće sadržavati html obrazac sa padajućom listom. Štoviše, vrijednosti na listi mogu se navesti na dva načina:

I. Ručni unos podataka:

II. Unos podataka kroz petlju:

Kao što vidite, drugi primjer sa petljom je kompaktniji. Mislim da ne vrijedi davati skriptu za obradu obrasca, jer se obrađuje isto kao i tekstualno polje, tj. vrijednosti liste mogu se preuzeti iz superglobalnog niza $_POST.

Opis:

Kreirajmo HTML obrazac za slanje fajla na server.

Ovaj html obrazac ima element pretraživati, koji otvara dijaloški okvir za odabir datoteke za otpremanje na server. Pritiskom na dugme "Prenesi fajl", datoteka se prosljeđuje skripti za rukovanje.

Zatim morate napisati obrađivač skripte action.php. Prije pisanja rukovatelja, morate odlučiti u koji direktorij ćemo kopirati datoteku:

if(isset($_FILES [ "myfile" ])) // Ako datoteka postoji
{
$catalog = "../image/" ; // Naš imenik
if (is_dir ($catalog)) // Ako postoji takav direktorij
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Temp fajl
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // Ime dokumenta
if(! copy ($myfile , $catalog )) echo "Greška pri kopiranju fajla". $myfile_name // Ako kopiranje datoteke nije uspjelo
}
else mkdir("../image/"); // Ako ne postoji takav direktorij, mi ćemo ga kreirati
}
?>

Komentar

Ako vjerujete da će korisnici učitati bilo koje datoteke na vaš server, morate biti izuzetno oprezni. Napadači mogu ubaciti "loš" kod u sliku ili datoteku i poslati je serveru. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.

Ovaj primjer pokazuje kreiranje direktorija i kopiranje datoteke u taj direktorij na serveru.

Također bih želio pokazati primjer sa elementom polje za potvrdu. Ovaj element se malo razlikuje od ostalih elemenata po tome što ako ne i jedan od elemenata polje za potvrdu'a nije odabrano, tada je superglobalna varijabla $_POSTće vratiti praznu vrijednost:

Plava
Crni
Bijelo

if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ako je odabrana barem 1 stavka
echo "Odaberi vrijednost";
?>