Formularele sunt concepute pentru a trimite date de la utilizator la serverul web. Formularele în HTML pot consta din câmpuri de text și zone de text, casete de selectare și butoane radio și liste derulante. Toate acestea sunt elemente de formă. Fiecare element servește pentru a transmite un anumit sens site-ului.
În esență, un formular HTML este o pagină web pe care vezi zone pentru introducerea informațiilor. După ce completați formularul și faceți clic pe Trimitere, informațiile din formular sunt împachetate și trimise la serverul web pentru procesare de către un script de pe partea serverului (fișier de gestionare). După procesare, o altă pagină web vă este returnată ca răspuns. Următoarea figură demonstrează clar cum funcționează formularul:
Nu este nimic dificil în a crea formulare HTML. Cel mai simplu mod de a vă face o idee despre formulare este să analizați puțin cod HTML și apoi să vedeți cum funcționează. ÎN exemplul următor Sintaxa pentru crearea unui formular HTML simplu este afișată:
Exemplu: formular HTML simplu
- Incearca-l tu insuti "
Prima mea forma:
Nume:
Nume de familie:
Element
Formularele sunt inserate în paginile web folosind elementul . Oferă un container pentru tot conținutul formularului, inclusiv elemente precum câmpurile de text și butoanele, precum și orice alte etichete limbaj HTML. Cu toate acestea, nu poate conține un alt element
.
Pentru a trimite formularul către server, folosiți butonul „Trimite”, același rezultat se va obține dacă apăsați tasta „Enter” în cadrul formularului. Dacă butonul „Trimite” nu este prezent în formular, tasta „Enter” poate fi folosită pentru a trimite.
Majoritatea atributelor elementului afectează prelucrarea formularului, nu designul acestuia. Cele mai comune dintre care sunt acțiuneȘi metodă. Atribut acțiune conține adresa URL la care vor fi trimise informațiile din formular pentru procesare de către server. Atribut metodă este metoda HTTP pe care browserele trebuie să o utilizeze pentru a trimite datele din formular.
Element
Aproape toate câmpurile de formular sunt create folosind elementul (din engleză input - input). Aspect element se modifică în funcție de valoarea atributului său tip:
Iată câteva valori ale atributelor tip:
Introducerea textului și a parolei
Una dintre cele mai tipuri simple Elementele de formular este un câmp de text conceput pentru a introduce text dintr-o singură linie. Acest tip introducerea textului este setată implicit și, prin urmare, este câmpul cu o singură linie care va fi afișat dacă uitați să specificați atributul tip. Pentru a adăuga un câmp de introducere a textului cu o linie la un formular, ar trebui să fie în interiorul elementului înregistrează atributul tip cu valoare text:
Câmpul de introducere a parolei este un tip obișnuit câmp de text. Acceptă aceleași atribute ca și un câmp text cu o singură linie. Atribut Nume setează numele câmpului de introducere a parolei care va fi trimis la server împreună cu parola introdusă de utilizator. Pentru a crea un câmp de parolă, trebuie să setați atributul parolei la tip(parolă (engleză) - parolă):
Un exemplu de creare a unui formular cu un câmp de parolă:
Exemplu: câmpul pentru parolă
- Incearca-l tu insuti "
Autentificarea dvs.:
Parola:
Puteți utiliza atributul împreună cu acest atribut lungime maximă, a cărui valoare determină suma maxima caractere care pot fi introduse această linie. De asemenea, puteți seta lungimea câmpului de introducere folosind atributul mărimea. În mod implicit, majoritatea browserelor limitează lățimea unui câmp de text la 20 de caractere. Pentru a controla lățimea elementelor de formulare noi, în loc de un atribut mărimea, vă recomandăm să utilizați foi de stil în cascadă (CSS).
Atribut valoare specifică valoarea care este afișată implicit în câmpul de text atunci când formularul este încărcat. Introducând o valoare implicită în câmp, puteți explica utilizatorului exact ce date și în ce format doriți să introducă utilizatorul aici. Acesta este ca o mostră, pentru că este mult mai convenabil pentru utilizator să completeze formularul, văzând un exemplu în fața lui.
Comutatoare (radio)
Element tip radio creează comutatoare care utilizează principiul logic „SAU”, permițându-vă să selectați doar una dintre mai multe valori: dacă selectați o poziție, atunci toate celelalte devin inactive. Sintaxa de bază a unui element de comutare este:
Atribut Nume pentru comutatoare este necesar și joacă rol importantîn combinarea mai multor elemente de buton radio într-un grup. Pentru a combina comutatoarele într-un grup, trebuie să setați aceeași valoare atribut NumeȘi sens diferit atribut valoare. Atribut valoare setează valoarea butonului radio selectat pentru a fi trimis către server. Valoarea fiecărui element de buton radio trebuie să fie unică în cadrul grupului, astfel încât serverul să știe ce opțiune de răspuns a ales utilizatorul.
Prezența atributului verificat(din engleză - instalat) la elementul comutator indică care dintre opțiunile propuse ar trebui să fie selectată implicit la încărcarea paginii, dacă este necesar. Acest atribut poate fi setat doar pentru un element buton radio din grup:
- Incearca-l tu insuti "
Câți ani ai?
- sub 18
- de la 18 la 24
- de la 25 la 35
- mai mult de 35
atribut de acțiune.
Principal pentru element este un atribut acțiune, care specifică handlerul de date pentru formular. Un handler de date este un fișier care descrie ce trebuie făcut cu datele din formular. Rezultatul acestei procesări este o nouă pagină HTML care este returnată în browser. Cu alte cuvinte, în atribut acțiune specifică calea URL către un fișier handler de pe server (uneori numită pagină de script) pentru procesarea formularului. Sintaxa este următoarea:
Fișierul de procesare se află pe server mytestserver.comîn dosar folderul de numeși numele scriptului de server care va procesa datele - obrabotchik.php. Toate datele pe care le-ați introdus în formularul de pe pagina web îi vor fi transferate. Extensia .php indică faptul că formularul specificat este procesat de un script scris în PHP. Managerul în sine poate fi scris într-o altă limbă, de exemplu ar putea fi limbajul de scripting Python, Ruby etc.
Este recomandabil să setați întotdeauna valoarea atributului acțiune. Dacă formularul ar trebui să transmită valori către aceeași pagină în care se află, furnizați un șir gol ca valoare a atributului acțiune: action="".
atributul metodei
Atribut metodă specifică modul în care informațiile ar trebui să fie transferate către server. Metoda de trimitere a formularului pe care o alegeți depinde de datele pe care doriți să le trimiteți împreună cu formularul. Volumul acestor date joacă un rol major aici. Cele mai populare sunt două metode de transfer a datelor sursă ale formularului dvs. din browser pe server: OBȚINEȘi POST. Metoda poate fi setată la oricare alegeți, iar dacă nu o specificați, va fi folosită cea implicită OBȚINE. Să luăm în considerare utilizarea fiecăruia dintre ele.
metoda POST
Metodă POST pachetele formează date și le trimite către server fără ca utilizatorul să observe, deoarece datele sunt conținute în corpul mesajului. Browser web, atunci când utilizați metoda POST trimite o cerere către server constând din anteturi speciale urmate de date de formular. Deoarece conținutul acestei solicitări este disponibil numai pentru server, metoda POST utilizate pentru a transfera date confidențiale, cum ar fi parolele, detaliile cardului bancar și alte informații personale ale utilizatorilor. Metodă POST potrivită și pentru trimiterea unor volume mari de informații, deoarece spre deosebire de metodă OBȚINE, nu are restricții privind numărul de caractere transmise.
metoda GET
După cum știți deja, sarcina principală a unui browser este să primească pagini web de la server. Deci, când folosești metoda OBȚINE, browserul dvs. preia pur și simplu pagina web așa cum o face întotdeauna. Metodă OBȚINE de asemenea, include datele formularului, dar le adaugă la sfârșitul adresei URL înainte de a trimite cererea către server. Pentru a înțelege cum funcționează metoda OBȚINE, să-l vedem în acțiune. Deschideți primul exemplu din această lecție (Exemplu: Formular HTML simplu) în Notepad (de exemplu Notepad++) și faceți o mică modificare a codului HTML:
