Crearea formularelor HTML

Formulare HTML sunt controale care sunt utilizate pentru a colecta informații de la vizitatorii site-ului web.

Formularele web constau dintr-un set de câmpuri de text, butoane, liste și alte comenzi care sunt activate printr-un clic de mouse. Formularele transmit din punct de vedere tehnic datele de la utilizator la serverul de la distanță.

Limbajele de programare web sunt folosite pentru a primi și procesa date de formular, cum ar fi PHP, Perl.

Înainte de apariția HTML5, formularele web erau o colecție de mai multe elemente , terminand cu un buton . A fost nevoie de mult efort pentru a modela formularele în diferite browsere. În plus, formularele necesitau utilizarea JavaScript pentru a valida datele introduse și, de asemenea, au fost lipsite de anumite tipuri de câmpuri de intrare pentru specificarea informațiilor de zi cu zi, cum ar fi datele, adresele. E-mailși URL-uri.

Formulare HTML5 a rezolvat majoritatea acestor probleme comune datorită prezenței de noi atribute, oferind capacitatea de schimbare aspect elemente de formă datorită CSS3.

Orez. 1. Formulare Web îmbunătățite cu HTML5

Crearea unui formular HTML5

1. Articol

Baza oricărei forme este elementul .... Nu oferă intrare deoarece este un container, ținând împreună toate controalele formularului − câmpuri. Atributele acestui element conțin informații care sunt comune tuturor câmpurilor de formular, astfel încât câmpurile care sunt combinate logic trebuie incluse într-un singur formular.

Tabelul 1. Atributele etichetei
Atribut Sens/descriere
accept-charset Valoarea atributului este un spațiu separat lista de codificări de caractere, care va fi folosit pentru a trimite formularul, de exemplu, .
acțiune Atribut obligatoriu, care specifică adresa URL a handler-ului de formular de pe serverul la care sunt trimise datele. Este un fișier (de exemplu, action.php) care descrie ce trebuie făcut cu datele din formular. Dacă nu este specificată valoarea atributului, atunci după reîncărcarea paginii, elementele formularului vor prelua valorile implicite.
Dacă toată munca va fi efectuată pe partea clientului prin scripturi JavaScript, atunci atributul de acțiune poate fi setat la # .
De asemenea, vă puteți asigura că formularul completat de vizitator ajunge la e-mailul dumneavoastră. Pentru a face acest lucru, trebuie să faceți următoarea intrare:
completare automată

enctype Folosit pentru a indica MIMA-tipul de date trimise cu formularul, de exemplu, enctype="multipart/form-data" . Specificat numai dacă method="post" .
application/x-www-form-urlencoded este tipul de conținut implicit, ceea ce indică faptul că datele trimise sunt o listă de variabile de formular codificate în URL. Caracterele de spațiu (ASCII 32) vor fi codificate ca + și caracterele speciale, cum ar fi ! va fi codificat în formă hexazecimală ca %21.
multipart/form-data - folosit pentru a trimite formulare care conțin fișiere, date non-ASCII și date binare, constă din mai multe părți, fiecare dintre acestea reprezentând conținutul unui element de formular separat.
text/plain - indică faptul că textul simplu (non-html) este transmis.
metodă Specifică modul în care sunt trimise datele din formular.
Metoda get trimite date către server prin bara de adrese a browserului. Când se formează o solicitare către server, toate variabilele și valorile lor formează o secvență precum www.anysite.ru/form.php?var1=1&var2=2. Numele și valorile variabilelor sunt adăugate la adresa serverului după semn? și sunt separate prin & . Toate Simboluri speciale iar alte litere decât latine sunt codificate în formatul %nn , spațiul este înlocuit cu + . Această metodă ar trebui utilizată dacă nu transferați cantități mari de informații. Dacă se presupune că un fișier va fi trimis împreună cu formularul, această metodă nu va funcționa.
Metoda postului este folosită pentru a trimite cantități mari de date, precum și informații confidențiale și parole. Datele trimise folosind această metodă nu sunt vizibile în antetul URL-ului deoarece sunt conținute în corpul mesajului.
Nume seturi numele formularului, care va fi folosit pentru a accesa elemente de formular prin intermediul scripturilor, de exemplu, name="opros" .
nuvalidate Dezactivează validarea în butonul de trimitere a formularului. Atributul este folosit fără valoare
ţintă Specifică fereastra către care vor fi trimise informațiile:
_blank - fereastră nouă
_self este același cadru
_parent - cadru părinte (dacă există, dacă nu, atunci la cel curent)
_fereastra de sus nivel superior cu privire la acest cadru. Dacă apelul nu este dintr-un cadru copil, atunci în același cadru.

2. Gruparea elementelor de formular

Element

...
este conceput pentru a grupa elemente legate între ele, împărțind astfel forma în fragmente logice.

Fiecărui grup de elemente i se poate da un nume folosind elementul , care vine imediat după etichetă

. Numele grupului apare în partea stângă în chenarul de sus
. De exemplu, dacă elementul
informațiile de contact sunt stocate:

Informații de contact


Orez. 2. Gruparea elementelor de formular cu

Tabelul 2. Atributele etichetei
Atribut Sens/descriere
dezactivat Dacă atributul este prezent, atunci grupul articole aferente se formează în interiorul unui recipient
, dezactivat pentru completare și editare. Folosit pentru a restricționa accesul la anumite câmpuri de formular care conțin date introduse anterior. Atributul este utilizat fără a specifica o valoare −
.
formă
in acelasi document. Indică una sau mai multe forme cărora le aparține acest grup de elemente. Pe acest moment atributul nu este acceptat de niciun browser.
Nume Definește Nume, care va fi folosit pentru a se referi la elemente din JavaScript sau pentru a se referi la datele din formular după ce formularul a fost completat și trimis. Este analog cu atributul id.

3. Creați câmpuri de formular

Element creează majoritatea câmpurilor de formular. Atributele unui element diferă în funcție de tipul de câmp pentru care elementul este folosit.

Folosind stilurile CSS, puteți modifica dimensiunea fontului, tipul fontului, culoarea și alte proprietăți ale textului, precum și să adăugați chenare, culoarea de fundal și imagine de fundal. Lățimea câmpului este stabilită de proprietatea width.

Tabelul 3. Atributele etichetei
Atribut Sens/descriere
Accept Specifică tipul de fișier care poate fi trimis către server. Specificat doar pentru . Valori posibile:
file_extension - permite încărcarea fișierelor cu extensia specificată, de exemplu, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* - permite descărcarea fișierelor audio
video/* - permite descărcarea fișierelor video
imagine/* - permite încărcarea imaginilor
media_type - indică tipul media al fișierelor încărcate.
alt Definește text alternativ pentru imagini, indicat doar pentru .
completare automată Responsabil pentru reținerea valorilor introduse în câmpul de text și înlocuirea lor automată pentru introducerea ulterioară:
pornit - înseamnă că câmpul nu este protejat, iar valoarea acestuia poate fi salvată și preluată,
off - dezactivează completarea automată pentru câmpurile formularului.
autofocus Vă permite să vă asigurați că în formularul în curs de încărcare, unul sau altul câmp de intrare are deja focalizarea (a fost selectat), fiind gata pentru introducerea unei valori.
verificat Atributul verifică dacă caseta de selectare este bifată în mod implicit la încărcarea paginii pentru câmpurile de tip type="checkbox" și type="radio" .
dezactivat
formă Valoarea atributului trebuie să fie egală cu atributul id al elementului in acelasi document. Specifică unul sau mai multe formulare cărora le aparține acest câmp de formular.
formare Specifică adresa URL a fișierului care va prelucra datele introduse în câmpurile la trimiterea formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Atributul suprascrie valoarea atributului de acțiune al formularului în sine.
formenctype Determină modul în care datele câmpului formularului vor fi codificate atunci când sunt trimise către server. Supliniază valoarea atributului enctype al formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Opțiuni:
application/-x-www-form-urlencoded este valoarea implicită. Toate caracterele sunt codificate înainte de trimitere (spațiile sunt înlocuite cu un caracter +, caracterele speciale sunt convertite în valori ASCII HEX)
multipart/form-data - caracterele nu sunt codificate
text/plain - spațiile sunt înlocuite cu un caracter +, iar caracterele speciale nu sunt codificate.
formmetod Atributul specifică metoda pe care browserul o va folosi pentru a trimite datele formularului către server. Setați numai pentru câmpurile de tip type="submit" și type="image" . Supliniază valoarea atributului metodei formularului. Opțiuni:
get este valoarea implicită. Datele din formular (perechea nume/valoare) sunt adăugate la adresa URL și trimise la server: URL?name=value&name=value
datele post - formular sunt trimise ca o cerere http.
formnovalidate Specifică faptul că datele câmpului formularului nu trebuie validate atunci când formularul este trimis. Supliniază valoarea atributului novalidate al formularului. Poate fi folosit fără a specifica o valoare de atribut.
formtarget Specifică unde să se afișeze răspunsul primit după trimiterea formularului. Setați numai pentru câmpurile de tip type="submit" și type="image" . Supliniază valoarea atributului țintă al formularului.


_parent - Încarcă răspunsul în cadrul părinte
_top - încarcă răspunsul pe ecran complet
framename - Încarcă răspunsul într-un cadru cu numele specificat.
înălţime Valoarea atributului conține numărul de pixeli fără a specifica o unitate. Setează înălțimea unui câmp de formular, cum ar fi type="image" , de ex. . Este recomandat să setați atât înălțimea cât și lățimea câmpului în același timp.
listă Este o referire la un element , conține id-ul său. Permite utilizatorului să aibă mai multe opțiuni din care să aleagă atunci când începe să tasteze o valoare în câmpul corespunzător.
max Vă permite să limitați intrarea permisă de date numerice la valoarea maximă, valoarea atributului poate conține un număr întreg sau fracționar. Se recomandă ca acest atribut să fie utilizat împreună cu atributul min. Funcționează cu următoarele tipuri de câmpuri: număr , interval , dată , datetime , datetime-local , luna , ora și săptămână .
lungime maxima Atributul specifică numărul maxim de caractere introduse în câmp. Valoarea implicită este de 524288 de caractere.
min Vă permite să limitați intrarea numerică permisă la o valoare minimă.
multiplu Permite utilizatorului să introducă mai multe valori ale atributelor separate prin virgulă. Se aplică fișierelor și adreselor de e-mail. Specificat fără o valoare de atribut.
Nume Specifică numele care va fi folosit pentru a accesa elementul , de exemplu, în tabele stiluri css. Este analog cu atributul id.
model Vă permite să definiți utilizarea expresie uzuala sintaxa datelor care ar trebui permise într-un anumit câmp. De exemplu, pattern="(3)-(3)" - parantezele pătrate stabilesc intervalul de caractere valide, în acest caz - orice literă mică, numărul dintre paranteze indică faptul că doriți trei litere mici urmate de o liniuță urmată de trei cifre cuprinse între 0 și 9.
substituent Conține textul care este afișat în câmpul de introducere până când este completat (cel mai adesea este un indiciu).
numai citire Nu permite utilizatorului să modifice valorile elementelor de formular, în timp ce selectarea și copierea textului este disponibilă. Specificat fără o valoare de atribut.
necesar Afișează un mesaj care afirmă că câmpul este obligatoriu. Dacă utilizatorul încearcă să trimită formularul fără a introduce valoarea necesară în acest câmp, pe ecran va fi afișat un mesaj de avertizare. Specificat fără o valoare de atribut.
mărimea Specifică lățimea vizibilă a câmpului în caractere. Valoarea implicită este 20. Funcționează cu următoarele tipuri de câmp: text , search , tel , url , email , and password .
src Specifică adresa URL a unei imagini de utilizat ca butonul de trimitere pentru datele din formular. Specificat doar pentru domeniu .
Etapa Folosit pentru elementele care acceptă introducerea numerică, indică cantitatea de creștere sau scădere a valorilor în timpul ajustării intervalului (pas).
tip buton - creează un buton.
casetă de selectare - transformă un câmp de introducere într-o casetă de selectare care poate fi bifată sau șters, de ex.
eu am o mașină
culoare - generează alegeri de culoare în browserele acceptate, permițând utilizatorilor să selecteze valorile de culoare în format hexazecimal.
data - vă permite să introduceți o dată în formatul zz.ll.aaaa.
Zi de nastere:
datetime-local - vă permite să introduceți o dată și o oră separate printr-o litera engleză majusculă T folosind modelul dd.mm.yyyy hh:mm.
Ziua și ora de naștere:
e-mail - Browserele care acceptă acest atribut se vor aștepta ca utilizatorul să introducă date care se potrivesc cu sintaxa adreselor de e-mail.
E-mail:
fișier - vă permite să încărcați fișiere de pe computerul utilizatorului.
Selectați un fișier:
ascuns - Ascunde controlul care nu este afișat de browser și împiedică utilizatorul să modifice valorile implicite.
imagine - creează un buton, permițându-vă să inserați o imagine în loc de text pe buton.
luna - Permite utilizatorului să introducă numărul anului și al lunii folosind modelul aaaa-mm.
număr - destinat introducerii valorilor întregi. Atributele sale min , max și step setează valorile superioare, inferioare și, respectiv, între valori. Aceste atribute sunt presupuse pentru toate elementele care au indicatori numerici. Valorile lor implicite depind de tipul elementului.
Specificați cantitatea (de la 1 la 5):
parola - creează câmpuri de text în formular, în timp ce caracterele introduse de utilizator sunt înlocuite cu asteriscuri, marcatori sau altele, instalat de browser icoane.
Introdu parola:
radio - creează un buton radio - un control sub forma unui cerc mic care poate fi activat sau dezactivat.
Vegetarian:
interval - vă va permite să creați un element de interfață, cum ar fi un glisor, min / max - vă va permite să setați intervalul de selecție
resetare - creează un buton care șterge câmpurile formularului din introducerea utilizatorului.
căutare - denotă un câmp de căutare, în mod implicit câmpul de intrare are o formă dreptunghiulară.
Căutare:
trimite - creează un buton standard care este activat printr-un clic de mouse. Butonul colectează informații din formular și le trimite spre procesare.
text - Creează câmpuri de text într-un formular prin afișarea unui câmp de text cu o singură linie pentru introducerea textului.
timp - vă permite să introduceți ora într-un format de 24 de ore folosind modelul hh:mm. În browserele compatibile, apare ca un control numeric de intrare cu o valoare ajustabilă de mouse și acceptă doar marcaje temporale.
Specificați ora:
url - câmpul este destinat specificarii adreselor URL.
Pagina principală:
săptămână - Instrumentul indicator corespunzător permite utilizatorului să selecteze o săptămână din an, după care va oferi introducerea datelor în format nn-aaa. În funcție de an, numărul de săptămâni poate fi 52 sau 53.
Specificați săptămâna:
valoare Specifică textul afișat pe un buton, casetă sau text asociat. Nu este specificat pentru câmpurile de tip fișier.
lăţime Valoarea atributului conține numărul de pixeli. Vă permite să setați lățimea câmpurilor de formular.

4. Câmpuri de introducere a textului

Element folosit în loc de element atunci când trebuie să creați câmpuri de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiuni orizontale, rânduri - dimensiuni verticale. Înălțimea câmpului poate fi setată cu proprietatea înălțime. Toate dimensiunile sunt calculate pe baza mărimii unui caracter dintr-un font monospațiu.

Tabelul 4. Atributele etichetei

7. Butoane

Element creează butoane pe care se poate face clic. Spre deosebire de butoanele create ( , , , ), în interiorul elementului .

Butoanele permit utilizatorilor să trimită date într-un formular, să ștergă conținutul unui formular sau să întreprindă alte acțiuni. Puteți crea chenare, puteți schimba fundalul și puteți alinia textul pe buton.

Tabelul 9. Atributele etichetei
Atribut Sens/descriere
autofocus Setează focalizarea pe buton atunci când pagina se încarcă.
dezactivat Dezactivează butonul, făcându-l de neclic.
formă Indică una sau mai multe formulare cărora le aparține acest buton. Valoarea atributului este identificatorul formularului corespunzător.
formare Valoarea atributului conține adresa URL a handler-ului de date din formular trimis atunci când se face clic pe butonul. Doar pentru un buton precum type="submit" . Supliniază valoarea atributului de acțiune specificat pentru element .
formenctype Setează tipul de codificare al datelor din formular înainte de a le trimite la server când faceți clic pe butoane precum type="submit" . Supliniază valoarea atributului enctype specificat pentru element . Valori posibile:
application/x-www-form-urlencoded este valoarea implicită. Toate caracterele vor fi codificate înainte de trimitere.
multipart/form-data - caracterele nu sunt codificate. Este folosit când fișierele sunt încărcate folosind un formular.
text/plain - caracterele nu sunt codificate, iar spațiile sunt înlocuite cu un caracter +.
formmetod Atributul specifică metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pentru element . Specificat numai pentru butoane precum type="submit" . Valori posibile:
get - datele din formular (perechea nume/valoare) sunt adăugate la url și trimise la server. Aceasta metoda are limite privind dimensiunea datelor trimise și nu este potrivit pentru trimiterea de parole și informații confidențiale.
post - datele din formular sunt adăugate ca cerere http. Metoda este mai fiabilă și mai sigură decât get și nu are limită de dimensiune.
formnovalidate Atributul specifică faptul că datele formularului nu trebuie validate la trimitere. Specificat numai pentru butoane precum type="submit" .
formtarget Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Specificat numai pentru butoane precum type="submit" . Supliniază valoarea atributului țintă specificat pentru element .
_blank - Încarcă răspunsul într-o fereastră/filă nouă
_self - încarcă răspunsul în aceeași fereastră (implicit)
_parent - încarcă răspunsul în cadrul părinte
_top - încarcă răspunsul pe ecran complet
framename - Încarcă răspunsul într-un cadru cu numele specificat.
Nume Setează numele butonului, valoarea atributului este text. Folosit pentru a se referi la datele formularului după ce acesta a fost trimis sau pentru a se referi la butoanele date în JavaScript.
tip Specifică tipul butonului. Valori posibile:
buton - buton pe care se poate face clic
resetare - buton de resetare, returnează valoarea inițială
trimite este un buton pentru trimiterea datelor din formular.
valoare Setează valoarea implicită trimisă atunci când se face clic pe butonul.

8. Casete de selectare și butoane radio în formulare

Casetele de selectare din formulare sunt setate folosind constructul , iar comutatorul - folosind .

Casetele de selectare, spre deosebire de butoanele radio, pot avea mai multe casete de selectare într-un singur formular. Dacă atributul bifat este specificat pentru casetele de selectare, atunci când pagina se încarcă, câmpurile de formular corespunzătoare vor avea deja casetele de selectare bifate.

Element

Formularele se găsesc pe internet pe aproape fiecare site. De exemplu, atunci când introduceți login-ul și parola pe site, datele sunt completate prin formulare și trimise la server. De asemenea, diverse anchete sunt un exemplu de formular.

Sintaxa etichetei

...

Etichetă

are un atribut de acțiune foarte important, căruia i se atribuie adresa (URL-ul) script-ului căruia îi sunt transmise pentru procesare informațiile primite din formular. Nu vom aprofunda în detalii despre ceea ce se întâmplă după ce datele sunt trimise, deoarece aceste probleme sunt deja rezolvate nu prin html, ci prin metodele GET și POST în PHP.

Exemplul 1. Un formular html cu butoane

Acestea vor fi butoanele:
butonul unu
Butonul doi
Butonul trei






După apăsarea butonului OK, pagina se va reîmprospăta pur și simplu, deoarece. nu am scris parametrul de acțiune

Se transformă pe pagină în următoarele:

Acestea vor fi butoanele:
butonul unu
Butonul doi
Butonul trei
Și acesta va fi un câmp de text. De exemplu, aici puteți introduce autentificare

Și va fi un câmp de text mare. De exemplu, aici puteți introduce informații despre dvs

După toate cele de mai sus, va apărea un buton OK.

După apăsarea butonului OK, pagina se va reîmprospăta pur și simplu, deoarece. nu am scris parametrul de acțiune

Explicatii de exemplu

  • action="" - indică faptul că prelucrarea datelor va avea loc pe aceeași pagină.
  • - atributul type="radio" spune să afișați textul după acest cod ca un buton de selectare. Numele și valoarea atributului din această etichetă joacă un rol mic pentru noi acum, deoarece nu învățăm php acum (vezi lecțiile php).
  • - atributul type="text" indică faptul că va fi un câmp text. Există, de asemenea, două atribute importante aici: nume (pentru php) și valoare (valoare implicită).
  • - atributul type="textarea" indică faptul că va fi un câmp de text mare. Singura diferență față de cazul precedent este că vă permite să înregistrați o cantitate mare de text.
  • - atributul type="submit" indică faptul că acesta este un buton. Atributul value conține ceea ce va fi scris pe buton.

Puteți citi mai multe despre toate aceste elemente în lecția 15: elemente de etichetare

, unde sunt luate în considerare butoanele radio, listele, casetele de selectare, câmpurile de text, butoanele.

Acum să ne uităm la toate atributele etichetei în detaliu. .

Etichetați atributele și proprietățile

1. Atribut accept-charset="Charset"- definește codificarea în care serverul poate accepta și procesa datele din formular. Poate lua diferite valori, de exemplu, CP1251, UTF-8 etc.

2. Atribut action="URL" - adresa script-ului care prelucrează datele transmise din formular. Dacă lăsați această valoare goală, atunci datele vor fi procesate în același document în care se află formularul.

3. Atribut autocomplete="on/off" - setează sau dezactivează completarea automată a formularului. Poate lua două valori:

  • pornit - activați completarea automată;
  • off - dezactivați completarea automată;

4. Atribut enctype="parameter" - specifică metoda de codificare a datelor. Poate lua următoarele valori:

  • application/x-www-form-urlencoded- în loc de spații puse +, caracterele precum literele rusești sunt codificate de ele valori hexazecimale
  • multipart/form-data - datele nu sunt codificate
  • text/securitate - spațiile sunt înlocuite cu un semn +, literele și alte caractere nu sunt codificate.

5. Atribute method="POST/GET" - setează metoda de trimitere. Poate lua două valori:

  • GET - transferă date către bara de adresa(există o limită a volumului de date trimise)
  • POST - trimite date către server într-o solicitare de browser (poate trimite o cantitate mare de date, deoarece nu există limită de volum)

6. Atribut name="name" - setează numele formularului. Cel mai frecvent utilizat atunci când există mai multe forme, astfel încât un anumit formular poate fi accesat printr-un script.

7. Atribut novalidate - anulează validarea încorporată a datelor din formular pentru introducerea corectă.

8. Atribut target="parameter" - numele ferestrei sau cadrului în care handlerul va încărca rezultatul returnat. Poate lua următoarele valori:

  • _blank - Încarcă pagina într-o nouă fereastră de browser
  • _self - încarcă pagina în fereastra curentă
  • _parent - încarcă pagina în cadrul părinte
  • _top - anulează toate cadrele și încarcă pagina într-o fereastră completă a browserului

Dragă cititor, acum ați aflat mult mai multe despre etichetă html formă. Acum vă sfătuiesc să treceți la următoarea lecție.

Bună ziua iubitorilor de dezvoltare web și celor care doresc să-și facă propriul site. Înainte de asta, toate publicațiile mele au fost dedicate elementelor principale ale limbajului, modului de a crea diverse obiecte de conținut, formatării, structurării acestora etc. După ce stăpâniți subiectele anterioare, puteți crea deja un site destul de bun. Cu toate acestea, ar fi incomplet fără subiectul de astăzi: „Crearea de formulare în html”.

Această secțiune a limbii este foarte importantă. Prin urmare, acordați o atenție deosebită studierii acestuia, altfel resursa web pe care ați creat-o nu va fi lansată în producție. Astfel, după ce ai citit articolul, vei ști de ce trebuie să folosești formulare, cu ce etichete sunt create și vei putea, de asemenea, să încerci exemple concrete în practică. Să începem!

Ce este forma și cum funcționează

Forma- acesta este unul dintre cele mai importante obiecte, care este conceput pentru a face schimb de date de informații între server și utilizator.

Mai simplu spus, dacă doriți să creați un magazin online cu posibilitatea de a comanda produse pe site, să solicitați înregistrarea pe resursa web și să lucrați cu conturile sau să oferiți clienților părere cu managerii de companie, atunci nu te poți lipsi de formulare.

Formularul este setat folosind un element special al limbajului html .

Rețineți că un document cu cod poate conține mai multe declarații de etichetă , cu toate acestea, o singură cerere poate fi trimisă către server pentru prelucrarea datelor. De aceea, informațiile pe care utilizatorul le introduce în câmpurile rezervate pentru aceasta și se referă la diferite formulare nu ar trebui să fie dependente. De asemenea, nu este permisă cuibărirea formelor una în alta.

Pentru cei care sunt nerăbdători și dornici să arunce o privire rapidă la vizualizarea codului, am atașat un exemplu simplu de utilizare a unui panou cu un câmp de text pentru parolă cu un buton:

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

Exemplu

S-ar putea să nu fie foarte clar acum ce și cum interacționează în acest mic program, dar vă garantez că, după citirea întregului articol, veți putea crea aplicații de multe ori mai dificile.

Trimiterea datelor pe partea serverului

Pentru a trimite informațiile tastate (sau selectate) în caseta de dialog, trebuie să utilizați mecanismul standard - Buton de trimitere.

Codul pentru această metodă arată astfel:

Când rulați linia prezentată, va fi afișat un buton cu inscripția: „Trimite”.

O altă modalitate de a trimite date către server este să apăsați tasta Enter din caseta de dialog.

După confirmarea trimiterii informațiilor specificate, acestea nu sunt trimise imediat la server. În primul rând, este procesat de browser, ducând la forma „nume = valoare”.

Parametrul atribut este responsabil pentru nume tip etichetă , iar pentru valoare - datele introduse de utilizator. Apoi, șirul convertit este transmis handler-ului, care este cel mai adesea setat în atribut acțiune element

.

Parametrul de acțiune în sine nu este necesar și, în unele cazuri, nu este deloc necesar. De exemplu, dacă o pagină de site este scrisă folosind php sau js, atunci procesarea are loc pe pagina curentă și nu sunt necesare link-uri.

Pentru o mai bună înțelegere a imaginii de ansamblu a funcționării site-ului, aș dori să adaug că pe server, lucrul cu date este deja efectuat în alte limbi. Astfel, limbajele serverului sunt: ​​Python, php, limbaje asemănătoare C (C#, C etc.), Java și altele.

Acum aș vrea să mă opresc și să vorbesc mai mult despre element . Dacă explicați limbaj simplu, apoi necesare pentru a crea câmpuri de text, butoane radio, diverse butoane, câmpuri ascunse, casete de selectare și alte obiecte.

Eticheta nu trebuie să fie asociată , cu toate acestea, dacă trebuie să procesați înregistrările utilizatorilor sau să le introduceți, de exemplu, într-o bază de date, atunci nu vă puteți lipsi de un container.

Principalele atribute ale acestui element de limbaj de marcare hipertext sunt:

  • Text- creează un câmp de text;
  • Trimite– creează un buton pentru trimiterea datelor către server;
  • Imagine- responsabil pentru butonul cu poza;
  • resetare– setează butonul pentru ștergerea formularului;
  • Parola– setează un câmp de text special pentru parole;
  • Caseta de bifat– responsabil de câmpurile cu steaguri;
  • Radio– este responsabil pentru câmpurile cu alegerea unui element;
  • buton- creează un buton;
  • Ascuns– folosit pentru câmpuri ascunse;
  • fişier– setează câmpul responsabil pentru trimiterea fișierelor.

Metode de transfer de informații

Există 2 moduri de a transmite datele utilizatorului către server: obțineși Post. Aceste metode efectuează aceeași acțiune, dar diferă semnificativ unele de altele. Prin urmare, înainte de a sublinia vreuna dintre ele, să ne familiarizăm cu caracteristicile lor.

Post obține
Dimensiunea documentelor transmise Limitat la partea serverului. Maxim - 4 KB.
Cum să afișați informațiile trimise Disponibil numai atunci când este vizualizat prin extensii de browser sau alte produse software speciale. Imediat disponibil pentru toată lumea.
Utilizarea marcajelor Nu există opțiune de marcare, deoarece solicitările nu sunt repetate (toate paginile leagă la aceeași adresă). Orice pagină cu o solicitare poate fi marcată și accesați-o după un timp.
stocarea în cache Pe baza paragrafului anterior, toate cererile sunt pe o singură pagină. Fiecare pagină poate fi memorată în cache separat.
scop Folosit pentru redirecționare fișiere mari(cărți, imagini, videoclipuri etc.), mesaje, comentarii. Excelent pentru a căuta valorile solicitate pe o resursă web sau pentru a trimite mesaje text scurte.

Pentru a specifica care dintre cele două metode de transfer de date să funcționeze cu browserul, în element utilizați parametrul furnizat metodă(De exemplu, method="post").

Să luăm în considerare al doilea exemplu. Să creăm un formular în care trebuie să introduceți datele personale (numele și prenumele, data nașterii) și să veniți cu o parolă. După ce toate acestea sunt trimise la server folosind metoda Post.

Metoda POST

Introduceți datele dvs. personale!

De exemplu, pentru a introduce o dată, există comutatoare pentru numărul fiecăruia dintre parametri (zi, lună și an), precum și un panou derulant cu calendarul în sine, pentru confort.

Crearea unui panou de înregistrare

Etichetele și atributele principale au fost acoperite. Acesta este motivul pentru care este timpul să creați un formular de înregistrare cu drepturi depline, folosind marcarea în stil CSS și validarea datelor de intrare. Desigur, nu vom putea vedea cum serverul funcționează cu ei, dar vom asigura designul și detaliile importante.

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 Înregistrare
inregistrare pe site

Nume:

Nume de familie:

E-mail:

Parola:

Repetați parola:

Înregistrare

inregistrare pe site

Pentru o lucrare corectă ulterioară în serviciul nostru, vă rugăm să introduceți datele adevărate!

Nume:

Nume de familie:

E-mail:

Parola:

Repetați parola:

Vă sfătuiesc să salvați acest cod de program într-un document cu extensia .html și codificare utf-8 și să îl deschideți pe acesta din urmă într-o fereastră de browser. Înainte să apară în toată gloria lui panoul pentru înregistrare cu câmpuri pentru introducerea numelui, prenumelui, e-mailului și parolei cu repetare. Observați că atunci când pagina începe, cursorul este imediat poziționat în primul câmp de text. Această tehnică se realizează prin atribut autofocus.

Începeți să completați câmpurile, lăsând unul neschimbat și faceți clic pe butonul „Înregistrare”. După cum ați observat deja, formularul nu va fi trimis deoarece fiecare element are < intrare> atribut specificat necesar. Setează câmpurile marcate ca câmpuri obligatorii.

Un alt punct interesant este indicarea tipului tip="e-mail", care a apărut în . Când utilizați acest tip de câmp, informațiile introduse sunt verificate automat pentru corectitudine. În caz de erori, formularul nu este trimis la server.

Aici se termină postarea. În el, am încercat să adun maximum de cunoștințe importante și relevante cu privire la formulare. Sper ca ti-a fost de folos! V-aș fi foarte recunoscător dacă v-ați alătura rândurilor abonaților mei și le-ați spune prietenilor despre blog.

Pa! Pa!

Cu stimă, Roman Chueshov

Citit: de 333 de ori

Adesea, pe site-urile Web puteți găsi pagini cu formulare HTML plasate pe ele. Formularele web sunt o modalitate convenabilă de a obține informații de la vizitatorii site-ului dvs. Un exemplu în acest sens este -, - care oferă feedback vizitatorilor și dezvoltatorilor site-ului. Formularele sunt, de asemenea, convenabile pentru dezvoltatorii de site-uri atunci când dezvoltă un CMS, ceea ce vă permite să mențineți proprietatea principală a site-ului - relevanța. Acest articol se concentrează pe elementele de bază ale creării formularelor HTML, procesarea acestora și modul de transmitere a datelor de la formularele de pe ecran la scripturile PHP.

1) Crearea unui formular simplu

Etichete

și
setați începutul și sfârșitul formularului. Eticheta de început a formularului
contine doua atribute: acțiuneși metodă. Atributul de acțiune conține adresa URL a scriptului care ar trebui apelat pentru a procesa scriptul. Atribut metodă spune browserului ce fel de cerere HTTP să folosească pentru a trimite formularul; valori posibile POSTși OBȚINE.

cometariu

Principala diferență dintre metodele POST și GET este modul în care sunt transferate informațiile. În metoda GET, parametrii sunt trecuți prin bara de adrese, adică. de fapt, în antetul HTTP al cererii, în timp ce în metoda POST, parametrii sunt trecuți prin corpul cererii HTTP și nu se reflectă în niciun fel sub forma barei de adrese.

$text = nl2br($_POST[„textul meu”]);
?>

Sarcină: Să presupunem că vrem să creăm o listă derulantă cu ani de la 2000 la 2050.
Decizie: Trebuie să creați Formulare HTML cu elementul SELECT și PHP - scriptul pentru procesarea formularului.

Discuţie:

Să începem prin a crea două fișiere: form.htmlși acțiune.php. În dosar form.html va conține un formular html cu o listă derulantă. În plus, valorile din listă pot fi specificate în două moduri:

I. Introducerea manuală a datelor:

II. Introducerea datelor printr-o buclă:

După cum puteți vedea, al doilea exemplu cu o buclă este mai compact. Nu cred că merită să dai script-ului de gestionare a formularelor, pentru că este procesat la fel ca un câmp de text, adică. valorile listei pot fi preluate dintr-o matrice superglobală $_POST.

Descriere:

Să creăm un formular HTML pentru a trimite un fișier către server.




Acest formular html are un element naviga, care deschide o casetă de dialog pentru selectarea unui fișier de încărcat pe server. Prin apăsarea butonului „Transferați fișierul”, fișierul este transmis scriptului de gestionare.

Apoi trebuie să scrieți un handler de script acțiune.php. Înainte de a scrie handler-ul, trebuie să decideți în ce director vom copia fișierul:

if(isset($_FILES [ "fișierul meu" ])) // Dacă fișierul există
{
$catalog = "../imagine/" ; // Directorul nostru
if (este_dir ($catalog )) // Dacă există un astfel de director
{
$myfile = $_FILES [ "fișierul meu" ][ "nume_tmp" ]; // Fișier temp
$myfile_name = $_FILES [ "fișierul meu" ][ "nume" ]; // Nume de fișier
if(! copy ($myfile , $catalog )) echo „Eroare la copierea fișierului”. $myfile_name // Dacă copierea fișierului a eșuat
}
else mkdir("../imagine/"); // Dacă nu există un astfel de director, îl vom crea
}
?>

cometariu

Dacă aveți încredere în utilizatorii să încarce orice fișiere pe serverul dvs., trebuie să fiți extrem de atenți. Atacatorii pot injecta cod „rău” într-o imagine sau fișier și îl pot trimite la server. În astfel de cazuri, trebuie să controlați strâns descărcarea fișierelor.

Acest exemplu demonstrează crearea unui director și copierea unui fișier în acel director de pe server.

De asemenea, aș dori să demonstrez un exemplu cu un element Caseta de bifat. Acest element este ușor diferit de alte elemente, dacă nu unul dintre elemente Caseta de bifat'a nu este selectat, atunci o variabilă superglobală $_POST va returna o valoare goala:


Albastru
Negru
alb

if (!empty($_POST [ "culoarea mea" ])) echo $_POST [ "culoarea mea" ]; // Dacă este selectat cel puțin 1 articol
ecou „Selectați valoarea”;
?>

Etichetă FORMĂ creează un formular pe o pagină web. Formularul este destinat schimbului de date între utilizator și server. Sfera de aplicare a formularelor nu se limitează la trimiterea de date către server; folosind script-uri client, puteți accesa orice element al formularului, îl puteți modifica și aplica la discreția dvs.

Un document poate conține orice număr de formulare, dar un singur formular poate fi trimis la server la un moment dat. Din acest motiv, datele din formular trebuie să fie independente unele de altele.

Când un formular este trimis la server, controlul datelor este transferat către programul CGI specificat de parametrul de acțiune al etichetei FORM. În prealabil, browserul pregătește informații sub forma unei perechi „nume=valoare”, unde numele este determinat de parametrul nume al etichetei INPUT, iar valoarea este introdusă de utilizator sau setată în câmpul de formular implicit. Dacă metoda GET este folosită pentru a trimite date, atunci bara de adrese poate lua următoarea formă.

http://www..cgi? nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Parametrii sunt listați după semnul întrebării după adresa programului CGI și sunt despărțiți de un ampersand (&). Caracterele non-latine sunt convertite în reprezentarea lor hexazecimală (în forma %HH, unde HH este codul hexazecimal pentru valoarea caracterului ASCII), iar spațiul este înlocuit cu un plus (+).

Sintaxă


...

Etichetă de închidere
Necesar.

Opțiuni
acțiunea este adresa programului sau documentului CGI care prelucrează datele din formular.
enctype - tip MIME al informațiilor din formular.
metoda - metoda protocolului HTTP.
nume - numele formularului.
țintă - numele ferestrei sau cadrului în care handlerul va încărca rezultatul returnat.

Exemplul 1: Utilizarea etichetei FORM



Ce crezi că înseamnă abrevierea „OS”?

Ofițeri

Sistem de operare

Muște mari în dungi


Descrierea parametrilor etichetei FORM

parametrul ACȚIUNE

Descriere
Specifică handlerul că datele formularului sunt accesate atunci când sunt trimise la server. Handler-ul poate fi un program CGI sau un document HTML care include scripturi pe partea serverului (de exemplu, Parser). După ce handlerul și-a efectuat acțiunile asupra datelor din formular, returnează un nou document HTML.

Dacă nu există niciun parametru de acțiune, pagina curentă este reîncărcată, returnând toate elementele de formular la valorile implicite.

Sintaxă

...

Argumente
Valoarea acceptă calea completă sau relativă către fișierul server (URL).

Valoare implicită
Nu.

Exemplul 2: Adăugarea unui handler de formulare




...


Puteți specifica o adresă de e-mail ca handler, începând cu cuvântul cheie mailto. Când formularul este trimis, acesta va rula program de mail setat implicit. Din motive de securitate, browserul este setat să nu trimită informațiile introduse în formular discret prin poștă. Pentru interpretarea corectă a datelor, utilizați parametrul enctype="text/plain" din eticheta FORM.

Exemplul 3: Utilizarea unei adrese de e-mail




...


parametrul ENCTYPE

Descriere
Setează tipul MIME pentru datele trimise cu formularul. În mod normal, setarea valorii parametrului enctype nu este necesară, datele sunt destul de bine înțelese din partea serverului. Cu toate acestea, dacă utilizați un câmp pentru a trimite un fișier (INPUT type=file), trebuie să specificați parametrul enctype ca multipart/form-data.

Sintaxă

...

Argumente
Numele tipului MIME în orice caz. Este permisă setarea mai multor valori simultan, separându-le cu virgule.

Valoare implicită
application/x-www-form-urlencoded

Exemplul 4: Modificarea tipului de date



...


parametrul METODE

Descriere
Metoda informează serverul despre scopul solicitării. Există două metode principale: GET și POST. Există și alte metode, dar sunt încă puțin utilizate.

Sintaxă

...

Argumente
Valoarea parametrului metodei nu face distincție între majuscule și minuscule și trebuie specificată fără ghilimele. Există două metode - GET și POST.

OBȚINE
Această metodă este una dintre cele mai comune și este concepută pentru a obține informațiile necesare și a transfera date în bara de adrese. În acest caz, perechile nume=valoare sunt atașate adresei după semnul întrebării și sunt separate printr-un ampersand (simbol &). Comoditatea utilizării metodei GET constă în faptul că adresa cu toți parametrii poate fi utilizată în mod repetat, salvând-o, de exemplu, în „Favorite” ale browserului și, de asemenea, modificând valorile parametrilor chiar în bara de adrese.

POST
Metoda POST trimite date către server într-o solicitare de browser. Acest lucru vă permite să trimiteți mai multe date decât este disponibil pentru metoda GET, deoarece are o limită de 4 KB. Cantități mari de date sunt folosite în forumuri, servicii poștale, completarea bazei de date etc.

Valoare implicită
OBȚINE

Exemplul 5: Metoda de trimitere a formularului




...


parametrul NAME

Descriere
Specifică un nume de formular unic. De obicei, numele formularului este folosit pentru a accesa elementele sale prin scripturi.

Sintaxă

...

Argumente
Numele este un set de caractere, inclusiv numere și litere. JavaScript este sensibil la majuscule și minuscule, așa că atunci când vă referiți la un formular după nume prin intermediul scripturilor, utilizați aceeași ortografie ca și parametrul nume.

Valoare implicită
Nu.

Exemplul 6: Utilizarea unui nume de formular







Имя:



Параметр TARGET

Описание
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

Синтаксис

...

Аргументы
В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. В качестве зарезервированных имен используются следующие.

Blank - загружает страницу в новое окно браузера.
_self - загружает страницу в текущее окно.
_parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию
_self

Пример 7. Открытие новой страницы




...


Continut Asemanator:

  1. Cum să puneți emoticoanele în starea VK
  2. Descărcați programul SPB TV pe computer
  3. Trecerea jocului 5 diferențe online la colegii de clasă
  4. 5 diferente online fata in rochie rosie