Tutorial HTML

• Notiuni introductive
• Notiuni de baza
• Comentarii
• Formatare text
• Liste
• Legaturi
• Imagini
• Sunete
• Videoclipuri
• Tabele
• Cadre
• Formulare
• Harti de imagini
• HTML si CSS
• Verificarea paginii
• Realizarea unui site

Formulare

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:

1. action=”adresa” – îi spunem browser-ului ce se va întâmpla cu datele introduse în formular. Astfel, valoarea atributului action poate fi o adresa 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 e-mail, caz în care datele introduse în formular vor fi trimise prin e-mail la adresa respectivă
2. method – acest atribut specifică modul în care datele vor fi transmise către server

Se disting două valori pe care le poate lua acest atribut:

1. get – datele sunt „la vedere” – acest lucru înseamnă că, în momentul trimiterii lor către server, ele vor apărea scrise clar, în bara de adresă, într-un anumit format standard. Un dezavantaj major al acestei metode de trimitere a datelor este că volumul acestora este limitat (datorită şirului de caractere din adresă, care este limitat în cazul fiecărui browser)
2. post – datele nu mai apar în mod explicit utilizatorului. Totuşi, ele nu sunt criptate – practic, un program răufăcător le poate intercepta

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:

1. size – specifică lăţimea (în număr aprox. de caractere) câmpului text; Dacă acest parametru este omis, este implicit considerat ca fiind 20;
2. maxlength – specifică numărul maxim de caractere ce pot fi scrise în câmpul text. Acest atribut poate primi o valoare mai mare decât cea scrisă la size, caz în care, textul va defila în control (stânga dreapta) în cazul în care scriem mai multe caractere decât câte încap în porţiunea vizibilă. Omiterea acestui atribut va permite introducerea unui număr foarte mare de caractere (limita diferă de la un browser la altul);
3. name – numele câmpului text (prin care server-ul va identifica acest câmp, pentru a prelua datele din el);
4. value – poate specifica o valoare care să fie iniţial (la încărcarea paginii) deja scrisă în cadrul controlului. Dacă omitem acest atribut, câmpul text va fi gol;

De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod:

Vizualizarea

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:

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.

Vizualizarea

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:

1. name – numele de identificare a componentei. Putem omite acest atribut. El se foloseşte în cazul în care aceluiaşi formular dorim să-i ataşăm mai multe butoane de acest tip, iar apăsarea fiecăruia să producă o acţiune diferită;
2. value – textul care va fi scris pe buton. De altfel, aceasta va fi şi valoarea pe care serverul o va primi pentru acest control;

Exemplu cu butoane de tip „submit”

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:

Exemplu cu butoane de tip „reset”

Acţiunea butonului de reset

Pentru ca butonul de reset să fie funcţional va fi necesară introducerea lui în tagul <form>.

Exemplu

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

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:

1. name – numele de identificare al componentei. Este obligatoriu ca toate butoanele care aparţin aceluiaşi grup (deci seria de opţiuni din care trebuie aleasă doar una singură posibilă) să poarte acelaşi nume de identificare;
2. value – valoarea pe care o va întoarce butonul respectiv, dacă el a fost cel ales;
3. checked – dacă acest atribut este prezent, butonul respectiv va fi ales în mod implicit, la încărcarea paginii. Este recomandabil ca, dintre toate butoanele care aparţin aceluiaşi grup, exact unul singur să conţină acest atribut;

Acţiunea butonului radio

Exemplu

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:

1. name – numele de identificare al componentei;
2. value – valoarea pe care o va întoarce controlul respectiv;
3. checked – dacă acest atribut este prezent, atunci controlul va fi bifat la încărcarea paginii;

Acţiunea câmpului de tip checkbox

Exemplu

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:

1. name – numele de identificare al componentei;
2. multiple – dacă acest atribut este prezent, utilizatorul poate alege mai multe opţiuni din listă, ţinând apăsată tasta control sau shift în timp ce dă click pe acestea;
3. size – numărul de opţiuni care sunt afişate. Implicit este 1, în cazul listelor care nu sunt de tip multiple. În acest caz, lista se prezintă sub forma unei liste de tip drop-down;

Fiecare opţiune din listă se specifică printr-un tag:

<option> ...</option>

Acestea la rândul lor, au următoarele atribute:

1. value – reprezintă valoarea care va fi întoarsă de controlul SELECT în cazul în care va fi selectată opţiunea respectivă;
2. selected – dacă acest atribut este prezent, opţiunea respectivă va fi selectată la încărcarea paginii;

Observaţie!

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

Browser-ul va afişa automat prima opţiune. Acest lucru se poate însă schimba cu ajutorul atributului selected.

Exemplu

Vom folosi atributul size pentru a schimba o lista drop down într-un formular de selecţie.

Exemplu atributul size

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.

Observaţie!

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

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)

Observaţie!

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