Pana acum am vorbit despre elemente prin care putem arata continut unui vizitator. Dar in aceasta lectie as vrea sa vorbim despre unul dintre cele mai importante elemente HTML folosit pentru a primi ceva (un mesaj, un email, o imagine, etc.) de la cel ce viziteaza pagina.
Elementul <input /> este folosit exact pentru acest lucru. Acum pentru a accepta diferite tipuri de date de la un utilizator acest element va trebui sa isi schimbe comportamentul. Si stim ca putem face asta folosind atribute.
Lista de atribute acceptata de <input /> este destul de lunga dar ne vom axa in continuare pe cele mai des intalnite.
Pentru a salva undeva textul sau fisierul pe care il primim de la cineva prin acest element vom avea nevoie si de un server, lucru despre care nu vom discuta in acest curs. Asa ca ceea ce vom scrie momentan in acest element nu va fi salvat nicaieri.
Atribute
Elementul <input /> poate primi mai multe atribute dar cele mai des intalnite sunt:
type
-
text: aceasta este valoarea prestabilita (default) si ne permite sa acceptam un sir de caractere.
<input type="text" />Iar rezultatul este acea casuta intalnita pe orice site unde putem introduce orice:
-
email: putem folosi aceasta valoare pentru a-l forta pe cel ce completeaza acest camp sa ne ofere o adresa de email si nu altceva. Atunci cand va incerca sa salveze aceasta modificare, browser-ul ii va spune ca valoare nu este valida.
-
tel: la fel ca in cazul de mai sus, aceasta valoare va forta cel ce completeaza sa introduca un numar de telefon care are o anumita forma si foloseste doar numere.
-
number: aceasta valoare forteaza casuta sa accepte doar numere, toate literele vor fi ignorate. Daca vom incerca sa completam aceasta casuta pe un telefon mobil, vom vedea ca ne arata doar tastatura cu numere.
<input type="number" /> -
password: folosind aceasta valoare pentru a crea un camp unde putem introduce o parola. Se comporta la fel ca atunci cand valoare este
text, doar ca ceea ce scriem nu este vizibil.<input type="password" /> -
checkbox: se creeaza o casuta pe care o putem bifa
-
radio: de obicei se folosesc mai multe elemente de acest tip impreuna pentru a ne asigura ca se va alege o singura optiune.
Optiunea 1
Optiunea 2
Optiunea 3 -
file: daca dorim sa permitem cuiva sa incarce un fisier
-
submit: atunci cand avem un formular completat si vrem sa il trimitem la server, vom folosi aceasta valoare care de fapt creeaza un buton.
name
Motivul pentru care vrem ca cineva sa completeze un formular este ca acesta sa fie trimis la server pentru a-l salva. Iar pentru a citi ceea ce trimitem intr-un element <input /> trebuie sa ii oferim un nume:
<input type="text" name="numele-acestui-input" />
Acest atribut trebuie folosit cu toate elementele de tip input, indiferent ce valoare au in atributul type. Pe server unde vom procesa datele primite din pagina vom citi valoare lor folosind numele pe care l-am oferit aici.
value
In acest atribut se va salva valoarea propriu-zisa pe care o va avea campul nostru. Daca avem un <input /> de tip text, email, password, etc., atunci ceea ce scriem in casuta se va trimite la server, dar pentru alte tipuri de<input /> precum radio si checkbox trebuie sa oferim noi o valoare (de aceea pentru acestea atributul value este obligatoriu).
<input type="checkbox" name="numele-acestui-input" value="1" />placeholder
Pentru un element input de tip text (sau email, password, etc.) putem preciza un text care va aparea inainte ca acea casuta sa fie completate:
<input type="text" placeholder="Acest text va aparea aici cand inputul nu este completat" name="un-nume" value="" />Iar rezultatul fiind:
disabled
Acest este un atribut de tip boolean, adica nu primeste o valoare si simpla lui prezenta in interiorul elementului ii schimba comportamentul. In acest caz atribut va dezactiva un input si nu va permite completarea lui.
<input type="text" placeholder="Input dezactivat" name="un-nume" disabled />
checked
Acest atribut este tot de tipul boolean si se foloseste doar cand avem un input de tip checkbox. Daca vrem ca o casuta sa fie selectata deja atunci cand pagina se incarca, fara a fi nevoie de un click pe ea:
<input type="checkbox" checked />
Alte resurse
Aceasta lista este doar un sumar al tuturor atributelor ce pot fi folosite cu acest element. Pentru lista completa puteti verifica aceasta pagina.