Formularele sunt elemente ale limbajului HTML. Ele reprezintă o grupare de componente care permit trimiterea de date şi de comenzi către un server. Prin intermediul unui formular se pot obţine date importante de la vizitatori. După ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar datele introduse în formular vor fi primite sub forma unui e-mail sau vor fi procesate cu ajutorul unui limbaj de programare şi adăugate într-o bază de date.
Un formular este descris prin intermediul tag-ului <form>...</form>. Între aceste tag-uri vor fi introduse toate elementele formularului.
Atributele acestuia sunt:
Se disting două valori pe care le poate lua acest atribut:
Pe lângă componentele specifice, un formular poate conţine orice fel de alte elemente valide de HTML – tabele, imagini, text, bare de separare ...
În continuare vom prezenta câteva din componentele unui formulare, prin intermediul cărora utilizatorul poate introduce date şi trimite apoi, aceste date către server.
Un atribut foarte important al oricăruia dintre aceste componente este name, deoarece prin intermediul său, server-ul care va primi datele va şti despre care dintre controale este vorba.
Câmpuri text
Permit utilizatorului să introducă date într-un câmp de tip edit (pe o singură linie).
Aceste se specifică prin tag-ul <input type=”text” ...>
Atributele sale sunt:
De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod:
<input name="exemplu"type="text"value="Camp de editare"size="20"maxlength="30"> |
Atunci când vrem să adăugam în cadrul formularului nostru un câmp de editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tag- urile <textarea> şi</textarea>.
Exemplu:
<textarea cols="50"rows ="5"name="exemplu"> formularul nostru are un câmp de editare în care să poată fi introduse mai multe rânduri </textarea> |
Am folosit atributul cols pentru a stabili numărul de caractere al fiecărui rând, atributul rows pentru numărul de rânduri al câmpului de editare, iar atributul name pentru numele câmpului de editare.
Butoane de tip „submit” şi "reset"
Pentru a putea expedia datele introduse în cadrul unui formular, fie prin e- mail, fie către un script scris într-un limbaj de programare care va interpreta aceste date, trebuie să folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <input>, cu atributul "type" având valoarea "submit". Putem modifica şi valoarea butonului, care în mod implicit este "submit", cu ajutorul atributului "value".
Un control de tip submit se specifică prin tag-ul:<input type=”submit” value="Trimite">
Alături de butonul de tip "submit", putem folosi şi un buton de tip "reset". Prin apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip "reset", se procedează la fel ca şi la butonul de tip "submit", singura deosebire fiind că atributul "type" va avea valoarea "reset".
Un control de tip reset se specifică prin tag-ul:<input type=”reset” value="Sterge"/>
Atributele sale sunt:
Exemplu cu butoane de tip „submit”
Codul html | Rezultatul |
<input type="submit" value="Submit"> <br/> <input type="submit" value="Send"> <br/> <input type="submit" value="Trimite"> <br/> |
|
După cum se poate observă am făcut o variaţie de butoane de trimitere, schimbând valoarea atributului value. Aceasta poate fi modificată în funcţie de necesităţi.
Trimiterea datelor dintr-un formular prin e-mail
Pentru ca datele introduse într-un formular să fie trimise prin e-mail trebuie să folosim pentru atributul action al tag-ului <form>, valoarea mailto:email@domeniu.ro, în felul acesta, datele introduse în formular vor fi trimise la adresa de e-mail specificată.
Exemplu
Pentru a trimite datele dintr-un formular la adresa exemplu@yahoo.com vom folosi următoarea linie de cod:
Codul html | Rezultatul |
<form method="post" action="mailto:email@exemplu.com"> Nume:<input type="text" name="nume" size="15" maxlength="15"> Prenume:<input type="text" name="Prenume" size="25" maxlength="25"> <input type="submit" value="Trimite email"> </form> |
Clik aici |
Exemplu cu butoane de tip „reset”
Codul html | Rezultatul |
<input type="reset" value="Reset"/> <br/> <input type="reset" value="Sterge"/> <br/> <input type="reset" value="Sterge tot"/> <br/> |
|
Acţiunea butonului de reset
Pentru ca butonul de reset să fie funcţional va fi necesară introducerea lui în tagul <form>.
Exemplu
Codul html | Rezultatul |
<form action="myphp.php" method="post"> <input type="text" size="15" maxlength="15"> <input type="text" size="25" maxlength="25"> <input type="reset" value="Sterge"> </form> |
Clik aici |
Câmpuri de tip password
Se comportă identic cu câmpurile de tip text. Singura deosebire este că, la scrierea de text în ele, acesta nu va fi vizibil, ci în locul caracterelor introduse se vor afişa asterisc-uri. Totodată, textul dintr-un astfel de control nu poate fi luat cu copy/paste.
Controalele de acest fel se specifică prin tag-ul:
<input type=”password” ...>
Atributele sunt identice cu cele de la <input type=”text” ...>
Acţiunea câmpului de tip password
Exemplu
Codul html | Rezultatul |
<input type="password" size="5" maxlength="5"> <input type="password" size="10" maxlength="10"> |
Clik aici |
Butoane radio
Sunt controalele care permit ca, dintr-o serie de opţiuni posibile, utilizatorul să aleagă una singură.
Controalele de acest fel se specifică prin tag-ul:<input type=”radio” ...>
Atributele sale sunt:
Acţiunea butonului radio
Exemplu
Codul html | Rezultatul |
<form action="nefunctional.php" method="post"> Alege-ţi o parolă <input type="password" size="10" maxlength="20" name="parola"> În ce categorie de vârstă vă încadraţi? <input type="radio"name="raspuns"value="a"checked="yes"> sub 15 ani <input type="radio"name="raspuns"value ="b"> 15-20 ani <input type="radio"name="raspuns"value ="c"> 20-25 ani <input type="radio"name="raspuns"value ="d"> 25-35 ani <input type="radio"name="raspuns"value ="e"> 35-45 ani <input type="radio"name="raspuns"value ="f"> peste 45 ani <input type="submit" value,="Trimite datele"> </form> |
Clik aici |
Evident, acest exemplu este nefuncţional, în sensul că datele din formular nu sunt prelucrate. Preluarea datelor dintr-un formular prin intermediul limbajului php.
Câmpuri de tip checkbox
Sunt controale care permit bifarea sau ştergerea bifării unei căsuţe. Din punct de vedere practic, ele permit utilizatorului să marcheze una, nici una, sau mai multe opţiuni.
Controalele de acest fel se specifică prin tag-ul:
<input type=”checkbox” ...>
Atributele sale sunt:
Acţiunea câmpului de tip checkbox
Exemplu
Codul html | Rezultatul |
<form action="nefunctional.php" method="post"> Alege culorile care îţi plac: Albastru:<input type="checkbox"name="culori"value="albastru" checked="yes"> Galben:<input type="checkbox"name="culori"value ="galben"> Rosu:<input type="checkbox"name="culori"value ="rosu"> Verde:<input type="checkbox"name="culori"value ="Verde" > <input type="submit" value,="Trimite datele"> </form> |
Clik aici |
Evident, acest exemplu este nefuncţional, în sensul că datele din formular nu sunt prelucrate. Preluarea datelor dintr-un formular prin intermediul limbajului php.
Listele de selecţie ("drop down")
Acestea sunt utilizate pentru afişarea unei liste din care utilizatorul poate să aleagă unul sau mai multe opţiuni.
Tag-ul prin care se utilizează această componentă este:
<select> ...</select>
Atributele sale sunt:
Fiecare opţiune din listă se specifică printr-un tag:
.<option> ...</option>
Acestea la rândul lor, au următoarele atribute:
Textul efectiv al opţiunii se scrie între tag-ul de deschidere şi cel de închidere. Tag-ul de închidere este opţional, el putând fi omis.
Acţiunea listelor de selecţie
Exemplu
Codul html | Rezultatul |
<select> <option>Londra</option> <option>Paris</option> <option>Bucureşti</option> </select> |
Clik aici |
Browser-ul va afişa automat prima opţiune. Acest lucru se poate însă schimba cu ajutorul atributului selected.
Exemplu
Codul html | Rezultatul |
<select> <option>Londra</option> <option selected="yes">Paris</option> <option>Bucureşti</option> </select> |
Clik aici |
Vom folosi atributul size pentru a schimba o lista drop down într-un formular de selecţie.
Exemplu atributul size
Codul html | Rezultatul |
<select size="3"> <option>Londra</option> <option>Paris</option> <option>Bucureşti</option> </select> |
Clik aici |
Exemplu selectare multiplă
În cazul în care user-ul doreşte sa aleagă mai multe dintre opţiunile oferite îi vom facilita acest lucru cu ajutorul atributului multiple.
Codul html | Rezultatul |
<select multiple="yes" size="3"> <option>Londra</option> <option>Paris</option> <option>Bucureşti</option> </select> |
Clik aici |
Acest atribut nu va funcţiona cu o lista simplă drop down.
Butoane de tip upload
Upload-ul este o formă foarte practică de a permite utilizatorilor să încarce pe server fotografii, filme, sau orice alte fişiere.
Pentru a trimite un fişier prin intermediul unui formular, folosim pentru atributul type al tag-ului <input>, valoarea file.
Exemplu butoane de tip upload
Codul html | Rezultatul |
<input type="file"/> |
Clik aici |
Câmpuri ascunse (de tip hidden)
Pentru a limita mărimea unui fişier urcat pe server vom utiliza un câmp ascuns (de tip hidden)
Aceste componente permit trimiterea de valori către server (o dată ce butonul submit a fost apăsat) fără ca acestea să fie vizibile în cadrul form-ului. Practic, aceste componente se specifică doar în cadrul codului HTML:
<input type=”hidden” name=”nume” value=”value”>
Aşa cum se observă în tag-ul de mai sus, cu ajutorul atributului name specificăm numele controlului, iar cu ajutorul atributului value specificăm valoarea care va fi trimisă către server.
Exemplu câmp ascuns (de tip hidden)
Codul html | Rezultatul |
<input type="hidden" name="max_file_size" value="500"/> <input type="file"/> |
Clik aici |
Valoarea aleasă în exemplul de mai sus a fost 500. Aceasta înseamnă că nu vor fi permise spre upload, fişiere mai mari de 500kb. O valoare de 100 ar însemna 100kb, una de 1000 ar însemana 1000kb (1M) şi aşa mai departe.
Exemplu de formular recapitulativ
Codul html | Rezultatul |
<html> <head> <title>Exemplu de formular </title> </head> <body bgcolor="#cococo"> <form metod="get" action="formular"> <strong> Câmp simplu: <input type="text" name="text-scurt" size=40 value="text iniţial"><p> Câmp multilinii: <textarea name="text-lung" rows=5 cols=50> Prima linie A doua linie </textarea><p> Password: <input type="password" name="parola" size=20></p> Butoane radio: <input type="radio" name="br" value="da" checked>da <input type="radio"name="br" value="nu">nu <p> Boxe de marcare: <input type="checkbox" name="bm" size=40 value="1" checked> 1 <input type="checkbox" name="bm" size=40 value="2"> 2 <input type="checkbox" name="bm" size=40 value="3"> 3 <input type="checkbox" name="bm" size=40 value="4" checked> 4 <input type="checkbox" name="bm" size=40 value="5"> 5 <p> Lista de selectie: <select name="selecţie"> <option>Optiune 1 <option selected> Optiune 2 <option> Optiune 3 </select><p> Buton reset: <input type="reset" value="reset"><p> Buton trimitere: <input type="submit" value="Submit"><p> <strong> </form> <hr> </body> </html> |
Clik aici |