Un formular web sau formular HTML (în ) de pe o pagină web permite unui utilizator să introducă date care sunt trimise unui server pentru prelucrare. Formularele pot semăna cu formularele pe hârtie sau cu formularele dintr-o bază de date, deoarece utilizatorii web completează formularele folosind casete de selectare, butoane radio sau câmpuri de text. De exemplu, formularele pot fi utilizate pentru introducerea datelor de livrare sau ale unui card de credit în vederea comandării unui produs ori pentru obținerea rezultatelor de la un motor de căutare.
Descriere
Formularele sunt cuprinse în elementul HTML <form>. Acest element HTML specifică punctul terminal de comunicație către care trebuie trimise datele introduse în formular și metoda de trimitere a datelor prin HTTP, GET sau POST.
Elemente Formularele pot fi alcătuite din elemente standard ale interfeței grafice cu utilizatorul: <button> — un buton care poate fi asociat unei acțiuni, precum trimiterea formularului, resetarea acestuia sau executarea unei funcții JavaScript. <input> — un element pentru introducerea datelor de către utilizator. Elementul diferă în funcție de valoarea atributului său type. <textarea> — asemănător unui câmp de introducere <text>, cu diferența că <textarea> permite afișarea și introducerea mai multor rânduri de date. <select> — o listă derulantă care afișează o listă de elemente dintre care utilizatorul poate alege.
Elementul input poate avea următoarele tipuri: text — o casetă de text simplă care permite introducerea unui singur rând de text. email — un tip de <text> care necesită introducerea unei adrese de e-mail supuse unei validări parțiale. number — un tip de <text> care necesită introducerea unui număr. password — asemănător cu <text>, dar utilizat în scopuri de securitate; caracterele introduse sunt invizibile sau sunt înlocuite cu simboluri precum *. tel — un număr de telefon. radio — un buton radio. file — un control de selectare a fișierului pentru încărcarea unui fișier. reset — un buton de resetare care, atunci când este activat, îi indică navigatorului să readucă valorile formularului curent la valorile lor inițiale. submit — un buton care îi indică navigatorului să efectueze acțiunea formularului (de regulă, să îl trimită unui server).
Imaginea exemplificativă din dreapta prezintă majoritatea acestor elemente: o casetă de text în care se solicită numele; două butoane radio pentru alegerea sexului; o listă de selectare care oferă o listă de culori ale ochilor; două casete de selectare care pot fi bifate dacă se aplică; o zonă de text pentru descrierea aptitudinilor sportive; un buton de trimitere care transmite serverului valorile curente ale formularului.
Aceste elemente de bază oferă cele mai comune componente ale unei interfețe grafice cu utilizatorul (GUI), dar nu toate. De exemplu, nu există echivalente directe pentru o vizualizare arborescentă sau o vizualizare în grilă.
O vizualizare în grilă poate fi însă imitată cu ajutorul unui tabel HTML standard, fiecare celulă conținând un element de introducere a textului. O vizualizare arborescentă poate fi, de asemenea, imitată prin tabele imbricate sau, într-un mod mai adecvat din punct de vedere semantic, prin liste imbricate. În ambele cazuri, un proces pe partea de server este responsabil de prelucrarea informațiilor, în timp ce JavaScript gestionează interacțiunea cu utilizatorul. Implementări ale acestor elemente de interfață sunt disponibile prin biblioteci JavaScript, precum jQuery.
HTML4 a introdus eticheta <label>, destinată reprezentării unei etichete descriptive într-o interfață cu utilizatorul și care poate fi asociată unui anumit control al formularului prin specificarea atributului id al controlului în atributul for al etichetei label. Astfel, etichetele rămân asociate elementelor lor atunci când o fereastră este redimensionată și permit o funcționalitate asemănătoare aplicațiilor desktop (de exemplu, apăsarea pe eticheta unui buton radio sau a unei casete de selectare activează elementul de intrare asociat).
HTML5 introduce mai multe tipuri de câmpuri de intrare care pot fi reprezentate prin alte elemente de interfață. Unele se bazează pe câmpuri de introducere a textului și sunt destinate introducerii și validării anumitor tipuri obișnuite de date. Printre acestea se numără email pentru introducerea adreselor de e-mail, tel pentru numere de telefon și number pentru valori numerice. Există atribute suplimentare pentru specificarea câmpurilor obligatorii, a câmpurilor care trebuie să primească focalizarea tastaturii atunci când este încărcată pagina web care conține formularul și a textului substituent afișat în interiorul câmpului, dar care nu reprezintă date introduse de utilizator (cum ar fi textul „Căutare” afișat în multe câmpuri de căutare înainte de introducerea unui termen). Aceste sarcini erau anterior realizate cu JavaScript, însă deveniseră atât de comune încât suportul pentru ele a fost adăugat standardului. Tipul de intrare date afișează un calendar din care utilizatorul poate selecta o dată sau un interval de date. Tipul de intrare color poate fi reprezentat ca un simplu câmp de text care verifică dacă valoarea introdusă este o reprezentare hexazecimală corectă a unei culori, conform specificației, sau printr-un selector de culoare, aceasta din urmă fiind soluția utilizată de majoritatea navigatoarelor care acceptă atributul.
Trimiterea datelor Atunci când sunt trimise datele introduse în formularele HTML, numele și valorile elementelor formularului sunt codificate și trimise serverului într-un mesaj de cerere HTTP, utilizând GET sau POST. În trecut a fost utilizată și transmiterea prin e-mail.Suportul agenților utilizator pentru trimiterea prin e-mail a formularelor HTML, folosind un URL „mailto” drept acțiune a formularului, a fost propus în RFC 1867, secțiunea 5.6, în perioada HTML 3.2. Diferite navigatoare web au implementat această funcție prin lansarea unui program separat de e-mail, prin utilizarea propriilor capacități rudimentare SMTP sau transformându-se în suite Internet prin implementarea unor clienți de e-mail compleți. Deși uneori nesigură, metoda a fost pentru scurt timp populară ca modalitate simplă de transmitere a datelor unui formular fără implicarea unui server web sau a unor scripturi CGI. Tipul MIME (tip media Internet) implicit, application/x-www-form-urlencoded, se bazează pe o versiune foarte timpurie a regulilor generale de codificare procentuală a URI-urilor, cu mai multe modificări, precum normalizarea caracterelor de linie nouă și înlocuirea spațiilor cu + în loc de %20. Este disponibilă și o altă codificare, tipul media Internet multipart/form-data, utilizată frecvent pentru încărcarea fișierelor prin POST.
Utilizarea cu limbaje de programare Formularele sunt de obicei combinate cu programe scrise în diferite limbaje de programare, permițând dezvoltatorilor să creeze site-uri web dinamice. Cele mai populare limbaje includ atât limbaje executate pe partea de client, cât și pe partea de server.
Deși orice limbaj de programare poate fi utilizat pe server pentru prelucrarea datelor unui formular, cele mai folosite sunt limbajele de scripting, care tind să ofere funcționalități mai puternice pentru manipularea șirurilor de caractere decât limbajele de programare precum C și dispun, de asemenea, de gestionare automată a memoriei, ceea ce contribuie la prevenirea atacurilor de depășire a memoriei tampon.
Partea de client Limbajul de scripting pe partea de client care constituie standardul de facto pentru site-urile web este JavaScript. Utilizarea JavaScript împreună cu Document Object Model (DOM) permite utilizarea metodei HTML dinamic, prin care o pagină web poate fi creată și modificată dinamic în interiorul navigatorului.
Deși limbajele executate pe partea de client și utilizate împreună cu formularele sunt limitate, ele pot fi folosite adesea pentru prevalidarea datelor formularului și/sau pentru pregătirea acestora înainte de trimiterea către un program de pe server. Această utilizare este însă înlocuită de noile tipuri de câmpuri input și de atributul required din HTML5.
Execuția pe partea de server Codul executat pe partea de server poate îndeplini o gamă foarte largă de sarcini pentru crearea unor site-uri web dinamice pe care codul de pe partea de client nu le poate realiza din motive tehnice sau de securitate — de la autentificarea unui utilizator, până la preluarea și stocarea datelor într-o bază de date, verificarea ortografică și trimiterea de e-mailuri. Un avantaj important al execuției pe partea de server față de cea pe partea de client îl reprezintă concentrarea funcționalității pe server, în locul dependenței de diferite navigatoare web pentru implementarea consecventă și standardizată a diverselor funcții. În plus, prelucrarea formularelor pe un server conduce adesea la o securitate sporită dacă execuția pe partea de server este concepută astfel încât să nu considere de încredere datele furnizate de client și include tehnici precum sanitizarea HTML. Un dezavantaj al codului executat pe partea de server este scalabilitatea: prelucrarea pentru toți utilizatorii are loc pe server, în timp ce prelucrarea pe partea de client are loc pe calculatoarele individuale ale utilizatorilor.
Limbaje interpretate Printre limbajele interpretate utilizate frecvent pentru proiectarea formularelor interactive în dezvoltarea web se numără PHP, Python, Ruby, Perl, JSP și Adobe ColdFusion, iar printre limbajele compilate folosite frecvent se numără Java și C#, împreună cu ASP.NET.
PHP PHP este un limbaj foarte răspândit pentru „programarea” pe partea de server și unul dintre puținele limbaje create special pentru programarea web.
Pentru utilizarea PHP cu un formular HTML, URL-ul scriptului PHP este specificat în atributul action al etichetei formularului. Fișierul PHP țintă accesează apoi datele transmise de formular prin variabilele PHP $_POST sau $_GET, în funcție de valoarea atributului method utilizat în formular. Mai jos este prezentat un script PHP elementar pentru prelucrarea formularului, care afișează pe pagină conținutul câmpului de intrare first_name:
form.html <!DOCTYPE html> <html lang="ro"> <head> <title>Formular</title> </head> <body> <form action="form_handler.php"> <p><label>Nume: <input name="first_name" /></label></p> <p><button type="submit">Trimite</button></p> </form> </body> </html>
form_handler.php <!DOCTYPE html> <?php // solicitarea valorii variabilei externe „first_name” și filtrarea acesteia $firstName = filter_input(INPUT_GET, "first_name", FILTER_SANITIZE_STRING); ?>
<html lang="ro"> <head> <title>Rezultat</title> </head> <body> <p> <?php echo "Salut, {$firstName}!"; /* afișarea valorii */?> </p> </body> </html>
Exemplul de cod de mai sus utilizează funcția PHP filter_input() pentru a sanitiza datele introduse de utilizator înainte de inserarea lor în pagină. Simpla afișare (echo) în navigator a datelor introduse de utilizator, fără verificarea lor prealabilă, trebuie evitată în programele securizate de prelucrare a formularelor: dacă un utilizator introduce codul JavaScript <script>alert(1)</script> în câmpul firstname, navigatorul va executa scriptul pe pagina form_handler.php ca și cum acesta ar fi fost scris de dezvoltator; astfel poate fi executat cod rău intenționat. Funcția filter_input() a fost introdusă în PHP 5.2. Utilizatorii versiunilor PHP mai vechi puteau folosi funcția htmlspecialchars() sau expresii regulate pentru sanitizarea datelor introduse de utilizator înainte de prelucrarea acestora.
Limbajul de programare Perl