Tagul input
Tagul input creează diverse elemente
de formular HTML: câmp de introducere obișnuit, câmp pentru
introducerea parolei, caseta de bifare checkbox,
butoane radio (radio), buton.
Tagul input trebuie să se afle în interiorul tagului
form.
Acest lucru nu este obligatoriu, este necesar pentru trimiterea
datelor către server și procesarea lor ulterioară
prin PHP.
Nu necesită tag de închidere.
Atribute
| Atribut | Descriere |
|---|---|
type |
Stabilește tipul câmpului de introducere. Opțiunile vezi mai jos. |
value |
Valoarea implicită în câmpul de introducere. În cazul butonului, stabilește textul acestuia.
Mai multe detalii vezi atributul value.
|
placeholder |
Sugestie în câmpul de introducere, mai multe detalii vezi
atributul placeholder.
|
name |
Numele câmpului de introducere. Este necesar pentru a extrage datele câmpului de introducere în PHP. Pentru funcționarea corectă a formularului, numele câmpurilor de introducere nu trebuie să se potrivească unul cu celălalt (într-un singur formular). Dacă acestea coincid - în PHP vor veni datele acelui câmp de introducere care este mai jos în codul HTML. |
disabled |
Blochează elementul formularului (nu doar input, ci practic orice),
mai multe detalii vezi atributul disabled.
|
Valorile atributului type
| Valoare | Descriere |
|---|---|
text |
Creează un câmp de introducere text obișnuit. |
password |
Creează un câmp de introducere text pentru parolă. Încercați să introduceți text în el - acesta va fi afișat cu asteriscuri. |
checkbox |
Creează o casetă de bifare checkbox.
Mai multe detalii vezi checkbox.
|
radio |
Creează un selector radio.
Mai multe detalii vezi radio.
|
hidden |
Creează un input ascuns, care nu va fi vizibil pe ecran, dar va trimite datele conținute
în atributul value către server.
|
button |
Creează un buton. Apăsarea acestui buton
nu va trimite formularul către server. Acesta poate fi folosit în interiorul unui
link sau prin JavaScript.
Implicit butonul nu are text (exemplu buton fără text: ),
acesta este stabilit cu ajutorul value.
Vezi de asemenea tagul button,
care creează de asemenea un buton.
|
submit |
Creează un buton care va trimite datele către server.
Textul butonului depinde de browser, acesta poate fi schimbat
cu ajutorul value.
Vezi de asemenea tagul button,
care creează de asemenea un buton.
|
reset |
Creează un buton care golește formularul completat.
Textul butonului depinde de browser, acesta poate fi schimbat
cu ajutorul value.
|
file |
Creează un buton de selecție a fișierului. Designul acestui buton este interzis a fi schimbat
prin CSS (cu toate acestea există metode ingenioase). Dacă aveți nevoie de un astfel de câmp în formular, atunci
tagul form trebuie să aibă atributul
enctype cu valoarea multipart/form-data.
|
Valori noi în HTML5 pentru atributul type
Aceste valori ale atributului sunt noi, au apărut doar în HTML5, deci în unele browsere este posibil să nu funcționeze sau să funcționeze diferit în diferite browsere.
În cazul în care browserul nu poate înțelege conținutul
atributului type (de exemplu, dacă acesta
nu este suportat sau introdus eronat),
acesta va considera elementul un input text obișnuit,
ca și cum în type ar fi valoarea
text.
Urmăriți exemplele de mai jos în
diferite browsere. Încercați să introduceți
text în inputuri și să apăsați pe butonul de trimitere.
Dacă textul este incorect sau câmpul este gol -
browserul va afișa o eroare. De exemplu, dacă în
câmpul cu tipul email se introduce un email incorect -
browserul nu va permite trimiterea formularului și
va afișa un mesaj de eroare (textul erorii
și aspectul acesteia în html css nu pot fi modificate).
Dacă câmpul este gol - browserul va afișa de asemenea o eroare,
acest lucru este realizat cu ajutorul atributului required:
| Valoare | Descriere |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
