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.
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.
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
- Cele doua tipuri de elemente Select sunt:
1. Drop Down List (lista de derulare)
- Codul este:
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
- unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
2. List Box
- Codul este:
<select name="select" size="3">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
- 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>"!!