De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web, cum sunt PHP, JavaScript si altele.
1. Tag-ul FORM
Pentru a crea un formular in HTTML se foloseşte elementul <form> ... </form>, in cadrul acestuia se vor adauga celelalte elemente specifice.
Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:
action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie sa accepte datele din FORM , le proceseaza si trimite înapoi raspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.
enctye - determina mecanismul folosit pentru a codifica continutul transmis din formular.
name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.
target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.
2. Elementele de formular
In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi trimise la aplicatie pe server.
Cele mai multe se creaza prin atributul type al elementului <input> ... </input>
Proprietatile elementului <input> ... </input>
type - tipul de FORM folosit (caseta text, buton si altele ...)
name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele
value - datele (valoarea) asociate acelui element de formular si care sunt trimise, impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)
size - specifica numarul de caractere care dau lungimea zonei de text
maxlength - numarul maxim de caractere acceptate
checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).
readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului) din acel camp
disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.
Casete de text
- este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).
- Codul este <input type="text"></input>
- Acest element foloseste urmatoarele atribute:
type - text
name - numele casutei de text, folosit de scriptul la care sunt trimise datele
value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in casuta de text
size - specifica numarul de caractere care dau lungimea casutei de text (default 20)
maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator
Camp textarea
- "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate adauga mai multe linii de text.
- Codul este <textarea></textarea>
- Acest element foloseste urmatoarele atribute:
name - numele campului de text, folosit de scriptul la care sunt trimise datele
rows - numarul de linii a zonei de text
cols - numarul de coloane a zonei de text
wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum este scris de utilizator.
Casete pentru parole
- "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola scrisa.
- Codul este <input type="password"></input>
- Acest element foloseste urmatoarele atribute:
type - password
name - numele casutei pentru parole, folosit de scriptul la care sunt trimise datele
value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default din acea caseta.
size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea parolei (default 20)
maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator
Casete de formular ascunse
- "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.
- Codul este <input type="hidden"></input>
- Acest element foloseste urmatoarele atribute:
type - hidden
name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele
value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.
Check box
- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele) prin bifarea lor
- Codul este <input type="checkbox"></input>
- Acest element foloseste urmatoarele atribute:
type - checkbox
name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele
value - valoarea casetei checkbox respective, care poate fi selectata (bifata)
checked - daca este adaugat acest atribut, caseta checkbox respectiva este selectata (bifata).
Radio button
- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura
- Codul este <input type="radio"></input>
- Acest element foloseste urmatoarele atribute:
type - radio
name - numele casutei radio, folosit de scriptul la care sunt trimise datele
value - valoarea casetei radio respective, care poate fi selectata (bifata)
checked - daca este adaugat acest atribut, caseta radio respectiva este selectata (bifata).
Casete pentru upload
- "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui script (PHP, CGI)
- Codul este <input type="file"></input>
- Acest element foloseste urmatoarele atribute:
type - file
name - numele casutei upload, folosit de scriptul la care sunt trimise datele
size - specifica numarul de caractere care dau lungimea casutei upload.
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat
- Codul este <input type="button" value="Buton"></input>
- Acest element foloseste urmatoarele atribute:
type - button
name - numele butonului, necesar pentru a fi folosit de script
value - textul care apare pe buton.
Buton Submit
- acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte elemente din formular la scriptul de pe server
- Codul este <input type="submit" value="Trimite"></input>
- Acest element foloseste urmatoarele atribute:
type - submit
name - numele butonului, poate fi folosit de scriptul la care se trimit datele
value - textul care apare pe buton.
Imagine pentru buton Submit
- permite aplicarea unei imagine in locul butonului Submit standard
- Codul este <input type="image" src="locatie_imagine"></input>
- Acest element foloseste urmatoarele atribute:
type - image
name - numele butonului, poate fi folosit de scriptul la care se trimit datele
src - locatia imaginii folosite.
In browser va apare:
Buton Reset
- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular
- Codul este <input type="reset" value="Sterge"></input>
- Acest element foloseste urmatoarele atribute:
type - reset
value - textul care apare pe buton.
Elemente select
- pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista, un meniu, cu date ce pot fi selectate.
- Atributete elementului "<select>" sunt:
name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
size - seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial
multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni.
- "<select></select>" este folosit impreuna cu elemente "<option> </option>" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.
- <option> </option> foloseste doua atribute:
selected - cand acesta este adaugat, optiunea respectiva este selectata când pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura.
value - specifica valoarea variabilei numita in optiunea respectiva (necesara pt. scriptul care va primi datele).
- sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE
- unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
- unde "name" este atributul care defineste numele acestui tag SELECT, atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!