curs webdesign
Formulare în HTML
Formularele reprezintă o metodă de interactivitate cu utilizatorii paginii dvs web. Prin intermediul unui formular puteţi obţine date importante de la vizitatorii paginii dvs. Dupa ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar dvs primiţi datele introduse în formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare şi adăugate într-o bază de date. În această lecţie vom învăţa cum se pot adăuga în cadrul unei pagini web diferite tipuri de formulare, dar şi cum putem trimite datele introduse într-un formular, prin email. Pentru a folosi un formular în pagina ta web, va trebui sa folosiţi tag-urile <FORM> si </FORM>. Între aceste tag-uri vor fi introduse toate elementele formularului. Folosind formularele webdesignerul(webmaster) sau administratorul site-ului poate colecta diverse informaţii de la vizitatori. Cele mai importante atribute ale etichetei <form> sunt action şi method. action meţionează adresa scriptului (aflat pe server) care va interpreta formularul. Aceste scripturi pot fi scrise în limbajele PHP sau Perl. method indică metoda folosită de browser pentru transmiterea formularului. Poate lua valorile get şi post. get - datele sunt trimise prin adăugarea la adresa indicată de action. Permite trimiterea unor mici cantităţi de date. post - datele sunt trimise separat şi sunt permise cantităţi mari de date. Exemplu: formular cu 2 câmpuri text, buton Trimite şi buton Sterge HTML
Afisare Nume:
<form action="script.php" method="post"> Nume:<input type="text" name="nume"> Prenume:<input type="text" name="prenume"><br> <input type="submit" value="Trimite"><input type="reset" value="Sterge"> </form>
Prenume:
Trimite
Sterge
Eticheta <input> poate avea atributele: type - indică tipul datelor care vor fi introduse (text=text, submit=trimite, reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de validare, button=buton, radio=selectarea unui singur element dintr-un grup, file=fisier pentru upload, image=butonul va fi inlocuit cu o imagine) name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action size - numarul de caractere vizibile din camp maxlenght - numarul maxim de caractere introduse in camp readonly - datele prezente in camp nu pot fi modificate
1
curs webdesign Tag-ul <FORM> are două atribute foarte importante: ACTION şi METHOD. Cu ajutorul atributului ACTION îi spunem browser-ului ce se va întâmpla cu datele introduse în formular. Astfel, valoarea atributului ACTION poate fi o adresă URL a unui script, scris într-un limbaj de programare, care va interpreta datele şi le va introduce într-o bază de date, dacă este cazul, sau poate fi o adresă de email, caz în care datele introduse în formular vor fi trimise prin email la adresa respectivă. Atributul METHOD, aşa cum îi spune şi numele, precizează metoda de trimitere a datelor şi poate avea două valori. Valoarea implicită a acestui atribut este GET, cu ajutorul acestei metode putând fi trimise cantităţi mici de date, cea mai folosită metodă fiind POST.
Elementele unui formular Elementele unui formular trebuie introduse, în majoritatea cazurilor, cu ajutorul tag-ului <INPUT>. Atributele cele mai importante ale acestui tag sunt următoarele: - TYPE - tipul elementului - NAME - numele elementului - VALUE - valoarea elementului Elementele ale unui formular pot fi: - câmpurile de editare - butoanele radio - casetele de validare - casetele de fişiere - listele de selecţie - butoanele submit şi reset Campurile de editare Pentru a introduce în cadrul unui formular un câmp de editare, trebuie să folosim pentru atributul TYPE, al tagului <INPUT>, valoarea text. Exemplu: <INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20" MAXLENGTH="30"> Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt: • SIZE, care reprezintă lăţimea câmpului de editare • MAXLENGTH, specifică numărul maxim de caractere care pot fi introduse în câmpul de editare • VALUE, valoarea iniţială a câmpului de editare 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"> Dacă vreţi sa introduceţi un câmp de editare de tip "parola", atributul TYPE va avea valoarea "password". În acest caz, caracterele introduse în câmpul de editare, nu vor fi vizibile . Să vedem un exemplu: <INPUT NAME="exemplu" TYPE="password" VALUE="Camp parola" SIZE="20" MAXLENGTH="30"> Atunci când vrem sa adăugăm în cadrul formularului nostru un câmp de editare în care sa poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> şi </TEXTAREA>. Sp vedem cum arata linia de cod HTML care introduce un câmp de editare multilinie: <TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></TEXTAREA>
2
curs webdesign COLS pentru a stabili numărul de caractere al fiecarui rând, atributul ROWS pentru numărul de rândur
Butoanele radio Dacă avem o întrebare cu mai multe variante de răspuns, vom folosi butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE, valoarea "radio". Să luăm un exemplu: În ce categorie de vârstă vă încadraţi? sub 15 ani 15-20 ani 20-25 ani 25-35 ani 35-45 ani peste 45 ani Codul HTML care va afişa în cadrul browser-ului, întrebarea de mai sus şi variantele de răspuns, este următorul: &#206n ce categorie de v&#226rst&#259 v&#259 &#238ncadra&#355;i? <BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >sub 15 ani<BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR> <INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani
Cu ajutorul atributului CHECKED, fără alte valori, putem selecta un buton radio în mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, în acelasi timp. Casetele de validare Pentru a introduce o casetă de validare (checkbox) se utilizează eticheta <INPUT> cu atributul TYPE având valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opţiuni. Exemplu: Unde vă petreceţi concediul de obicei? La mare La munte În străinătate La ţară Acasă Aşa cum se poate observa, în cazul casetelor de validare, spre deosebire de butoanele radio, pot fi selectate mai multe opţiuni. Codul casetelor de validare de mai sus este următorul: Unde v&#259 petreceţi concediul de obicei?<BR> <INPUT TYPE="checkbox" NAME="optiunea1">La mare<BR> <INPUT TYPE="checkbox" NAME="optiunea2">La munte<BR> <INPUT TYPE="checkbox" NAME="optiunea3">&#206n str&#259in&#259tate<BR> <INPUT TYPE="checkbox" NAME="optiunea4">La &#355;ar&#259<BR> <INPUT TYPE="checkbox" NAME="optiunea5">Acas&#259
3
curs webdesign Casetele de fisiere Pentru a trimite un fişier prin intermediul unui formular, folosim pentru atributul TYPE al tag-ului <INPUT>, valoarea "file". Să vedem un exemplu: Incarcati:
Codul HTML este urmatorul: Incarcati: <INPUT TYPE="file" NAME="file">
Listele de selecţie
O listă de selecţie, asa cum îi spune şi numele, permite utilizatorului sa aleagă una sau mai multe opţiuni dintr-o listă. Listele de selecţie pot fi introduse în cadrul unui formular cu ajutorul tag-urilor <SELECT> şi </SELECT>. Atributele cele mai folosite pentru tag-ul <SELECT> sunt: • NAME, atribuie listei de selecţie un nume • SIZE, specifica numarul de elemente din cadrul listei de selecţie • VALUE, atribuie o valoare de tip text care va fi expediată serverului, sub forma de perechi "name = value" • SELECTED (fără alte valori), selectează în mod prestabilit un element al listei Să vedem cum arată o listă de selecţie: Studii:
Pentru a selecta în mod implicit valoarea Facultate, am folosit în dreptul acesteia atributul selected. Codul listei de selecţie de mai sus este următorul:
<SELECT> <OPTION value=”Scoala Profesionala”>Alba</OPTION> <OPTION value=”Liceu”>Arad</OPTION> <OPTION value=”Facultate” SELECTED>Arges</OPTION> </SELECT>
4
curs webdesign Exemplu selectare judeţe ale ţării: <SELECT> <OPTION value=Alba>Alba</OPTION> <OPTION value=Arad>Arad</OPTION> <OPTION value=Arges>Arges</OPTION> <OPTION value=Bacau>Bacau</OPTION> <OPTION value=Bihor>Bihor</OPTION> <OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION> <OPTION value=Botosani>Botosani</OPTION> <OPTION value=Brasov>Brasov</OPTION> <OPTION value=Braila>Braila</OPTION> <OPTION value=Bucuresti selected>Bucuresti</OPTION> <OPTION value=Buzau>Buzau</OPTION> <OPTION value=Caras-Severin>Caras-Severin</OPTION> <OPTION value=Calarasi>Calarasi</OPTION> <OPTION value=Cluj>Cluj</OPTION> <OPTION value=Constanta>Constanta</OPTION> <OPTION value=Covasna>Covasna</OPTION> <OPTION value=Dambovita>Dambovita</OPTION> <OPTION value=Dolj>Dolj</OPTION> <OPTION value=Galati>Galati</OPTION> <OPTION value=Giurgiu>Giurgiu</OPTION> <OPTION value=Gorj>Gorj</OPTION> <OPTION value=Harghita>Harghita</OPTION> <OPTION value=Hunedoara>Hunedoara</OPTION> <OPTION value=Ialomita>Ialomita</OPTION> <OPTION value=Iasi>Iasi</OPTION> <OPTION value=Ilfov>Ilfov</OPTION> <OPTION value=Maramures>Maramures</OPTION> <OPTION value=Mehedinti>Mehedinti</OPTION> <OPTION value=Mures>Mures</OPTION> <OPTION value=Neamt>Neamt</OPTION> <OPTION value=Olt>Olt</OPTION> <OPTION value=Prahova>Prahova</OPTION> <OPTION value=Satu-Mare>Satu-Mare</OPTION> <OPTION value=Salaj>Salaj</OPTION> <OPTION value=Sibiu>Sibiu</OPTION> <OPTION value=Suceava>Suceava</OPTION> <OPTION value=Teleorman>Teleorman</OPTION> <OPTION value=Timis>Timis</OPTION> <OPTION value=Tulcea>Tulcea</OPTION> <OPTION value=Vaslui>Vaslui</OPTION> <OPTION value=Valcea>Valcea<</OPTION> <OPTION value=Vrancea>Vrancea</OPTION> </SELECT>
Pentru a putea selecta mai multe valori din cadrul unei liste de selecţie trebuie să folosim pentru tag-ul <SELECT> atributul MULTIPLE, fără alte valori.
5
curs webdesign Butoanele 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. Astfel, linia de cod pentru un buton de tip submit va fi următoarea: <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 si la butonul de tip Submit, singura deosebire fiind că atributul TYPE va avea valoarea "reset". Sa vedem cum arată linia de cod care introduce în cadrul unui formular un buton de tip Reset: <INPUT TYPE="reset" VALUE="Sterge"> Trimiterea datelor dintr-un formular prin e-mail Pentru ca datele introduse într-un formular sa 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ă. De exemplu, pentru a trimite datele dintr-un formular la adresa cursuri@ecursuri.ro vom folosi următoarea linie de cod: <FORM ACTION="mailto:cursuri@ecursuri.ro" METHOD="POST">
6
curs webdesign Exemple de creare formulare Exemplu: formular conţinând toate valorile atributului <input>
HTML
Afisare Nume: Prenume: Telefon:
<form action="script.php" method="post"> Nume:<input type="text" name="nume"> Prenume:<input type="text" name="prenume"><br> Telefon:<input type="text" name="telefon"><br> Fax:<input type="text" name="fax"><br> Email:<input type="text" name="email"><br> Sexul: Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f">
Fax: Email:
Sexul: Masculin
Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select> Accesati Internetul de la: Serviciu<input type="checkbox" name="serv"> Acasa<input type="checkbox" name="acasa"> Internet cafe<input type="checkbox" name="cafe">
Feminin
Studii:
Accesati Internetul de la: Serviciu Acasa Internet cafe Fisier:
Fisier: <input type="file" name="file"> Observatii:<textarea name="obs" rows="5" cols="30"></textarea>
Observatii:
<input type="submit" value="Trimite"><input type="reset" value="Sterge"> </form>
Trimite
Sterge
Constructia select introduce un meniu derulant (lista de selecţie), valorile fiind declarate prin option. În câmpul textarea se poate introduce text, având atributele cols (numar de coloane) şi rows (număr de rânduri). Dacă doriţi puteţi particulariza butoanele din formular folosind atributul type=image în cadrul etichetei input şi indicând fişierul imagine.
HTML
Afisare
<form action="script.php" method="post"> <input type="image" src="trimite.gif" alt="Trimite"> </form>
7
curs webdesign
Pentru un aspect cﾃ｢t mai plﾄツut al formularului acesta trebuie introdus ﾃｮntr-un tabel, ca ﾃｮn exemplul de mai jos:
HTML
Afisare
<h1>Va rugam sa completati formularul</h1> Nume:
<form action="mailto:dvs@domeniuldvs.com" method="post">
Prenume:
<table> <tr><td>Nume:</td><td><input type="text" name="nume"></td></tr> <tr><td>Prenume:</td><td><input type="text" name="prenume"></td></tr> <tr><td>Telefon:</td><td><input type="text" name="telefon"></td></tr> <tr><td>Email:</td><td><input type="text" name="email"></td></tr> <tr><td>Sexul:</td><td> Masculin<input type="radio" name="sex" value="m">Feminin<input type="radio" name="sex" value="f"></td></tr> <tr><td>Studii: </td><td><select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select></td></tr>
Telefon: Email:
Sexul:
Masculin
Feminin
Studii:
Accesati Internetul de la:Serviciu cafe
Acasa
Fisier:
<tr><td>Accesati Internetul de la:</td> <td>Serviciu<input type="checkbox" name="serv"> Acasa<input type="checkbox" name="acasa"> Internet cafe<input type="checkbox" name="cafe"></td></tr>
Observatii:
<tr><td>Fisier:</td><td><input type="file" name="file"></td></tr> <tr><td>Observatii:</td> <td><textarea name="obs" rows="5" cols="30"></textarea></td></tr> <tr><td></td><td><input type="submit" value="Trimite"><input type="reset" value="Sterge"></td></tr></table> </form>
Trimite
8
Sterge
Internet
curs webdesign
Elementele de structură dintr-un formular (elementele FIELDSET, LEGEND) Elementul FIELDSET permite gruparea tematică a controalelor şi a etichetelor unui formular. Prin această operaţie se uşurează procesul de înţelegere a scopului pentru care au fost introduse controalele (făcînd documentele mai accesibile), oferind în plus şi facilităţi de navigare (pentru browserele vizuale, de exmplu cu tasta TAB). Elementul LEGEND permite asignarea unei explicaţii (unui titlu, şir de caractere) unui element FIELDSET, îmbunătăţind accesibilitatea la acesta pentru browserele nevizuale. Fie, pentru exemplificare, un formular care s-ar putea utiliza la un cabinet medical. Este împărţit în 3 secţiuni: informaţii personale, antecedente medicale (istoria bolilor) şi tratamentul curent. Fiecare secţiune conţine controale pentru a se introduce informaţia corespunzătoare. <FORM action="mailto:curs@curs.ro" method="post"> <P> <FIELDSET> <LEGEND> Informaţii Personale</LEGEND> Numele: <INPUT name="personal_lastname" type="text" tabindex="1"> Prenumele: <INPUT name="personal_firstname" type="text" tabindex="2"> Adresa: <INPUT name="personal_address" type="text" tabindex="3"> </FIELDSET> <FIELDSET> <LEGEND>Medical History</LEGEND> <INPUT name="history_illness" type="checkbox” value="Rujeola" tabindex="20"> Rujeola <INPUT name="history_illness" type="checkbox" value="Varicela" tabindex="21"> Varicela <INPUT name="history_illness" type="checkbox" value="Rubeola" tabindex="22"> Rubeola <INPUT name="history_illness" type="checkbox" value="Pojar" tabindex="23"> Pojar ...alte boli mai vechi... </FIELDSET> <FIELDSET> <LEGEND>Medicamente Curente</LEGEND> Luati medicamente acum? <INPUT name="medication_now" type="radio" value="Yes" tabindex="35">Da <INPUT name="medication_now" type="radio" value="No" tabindex="35">Nu </FIELDSET> <FIELDSET> Daca da, ce luati: <TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40"> </TEXTAREA> </FIELDSET> </FORM>
9
curs webdesign
TEMĂ
1. 2. 3.
Să se creeze un formular de tip “login” cu username, parolă şi buton de logare. Să se creeze un formular de abonament la un newsletter de pe un site fictiv al unei reviste virtuale. Să se creeze un formular de înscriere online într-un sejur la mare grupat folosind elementul fieldset.
10