Crearea formularelor
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
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
Radio button
Casete pentru upload
Buton simplu
Buton Submit
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.
Buton Reset
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
- - Cele doua tipuri de elemente Select sunt:
1. Drop Down List (Lista de derulare)
- 2. List Box
- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!