HTML & CSS pentru începători.

HTML & CSS pentru începători (Partea 13): Formulare (1)

Toate videoclipurile tutorialului

Formularele sunt definite folosind elementul form. Toate elementele care sunt plasate în interiorul elementului form fac parte din formularul respectiv.

<form>
…
</form>

În elementul <form> inițial se așteaptă atributul action. Acesta indică, în final, ce se întâmplă cu datele trimise în formular. De obicei, este vorba despre o aplicație PHP.

<form method="post" action="form.php">
…
</form>



Asigurați-vă că fișierul specificat poate fi găsit în mod efectiv. Deci trebuie să setați calea corectă.

În loc de un script, puteți specifica de asemenea o adresă de e-mail.

<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain">
…
</form>



În acest caz, datele formularului sunt trimise prin e-mail. Cu toate acestea, nu este o metodă elegantă, motiv pentru care în mod frecvent se revine la varianta cu script. Dar dacă nu dispuneți de un script pe moment, puteți trimite formularul prin e-mail în caz de nevoie.

Un alt atribut important pentru elementul form este method. Acesta specifică metoda de transmitere HTTP pentru trimiterea conținutului formularului. Sunt disponibile două variante diferite.

post = Datele formularului sunt transmise în două etape la adresa specificată. Mai întâi, browser-ul se conectează la adresa specificată. Dacă aceasta este reușită, datele formularului sunt transmise scriptului.

get = Această metodă atașează datele formularului la sfârșitul URL-ului specificat prin atributul action. Datele formularului sunt vizibile, printre altele, și în bara de adrese a browser-ului.

Se pune întrebarea, desigur, care dintre aceste două variante ar trebui folosită pentru transmiterea datelor formularului. În principiu, puteți utiliza ambele. Dar în special când este vorba despre volume mari de date și încărcarea de fișiere pe server, ar trebui să optați pentru post.

Câmpuri de formular simple

Până acum, a fost definit doar scheletul exterior al formularului. În browser, însă, formularul în sine încă nu este vizibil.

<form method="post" action="form.php">
 …
 </form>



Acum este momentul să umpleți formularul cu conținut/viață.

Cel mai probabil tip de câmp necesar este un câmp de introducere pe o singură linie. Acesta este utilizat, de exemplu, pentru a solicita numele, prenumele și adresa de e-mail. Câmpurile de introducere pe o singură linie sunt definite astfel:

<input type="text" name="prenume" />



Elemenului input i se atribuie combinația atribut-valoare type="text". De asemenea, ar trebui să oferiți un identificator intern fiecărui câmp de introducere. Acest identificator trebuie să fie unic în document. Este interesant mai ales atunci când este vorba de procesarea datelor formularului folosind un script. Nu utilizați spații sau caractere speciale în identificator.

Dacă vizualizați rezultatul în browser, veți obține următoarea imagine:

HTML & CSS pentru începători (Partea 13): Formulare (1)


HTML & CSS pentru începători (Partea 13): Formulare (1)

Pentru ca vizitatorii să știe ce trebuie să introducă în câmp, este necesară o etichetă.

Prenume: <input type="text" name="prenume" />



De asemenea, vizualizarea rezultatului în browser va arăta imaginea dorită.

HTML & CSS pentru începători (Partea 13): Formulare (1)

Prin atributul size puteți specifica lățimea câmpului.

Prenume: <input type="text" name="prenume" size="30" />
<br />
Cod poștal: <input type="text" name="cod" size="5" />



Prin atributul size se specifică lățimea dorită a câmpului.

HTML & CSS pentru începători (Partea 13): Formulare (1)

O valoare de 5 corespunde exact cinci caractere. În acest context, atributul maxlength este de asemenea interesant. Acesta specifică numărul maxim de caractere permise care pot fi introduse în câmp. Iată un alt exemplu:

Prenume: <input type="text" name="prenume" size="30" maxlength="40" />



Dacă valoarea specificată la atributul maxlength este mai mare decât cea specificată la atributul size, atunci în cazul unor introduceri mai lungi, se va face automat derularea în câmp.

Prin atributul value puteți obține o valoare prestabilită în câmp.

Nume: <input type="text" name="prenume" value="Numele tau" />



Valoarea atribuită value este văzută ca valoare implicită a câmpului.

HTML & CSS pentru începători (Partea 13): Formulare (1)



Utilizatorii pot șterge această valoare implicită.

În plus, puteți preveni ștergerea valorilor din câmpuri. Aici se definește un câmp de introducere care nu mai este, în propriul sens, un câmp de introducere. De fapt, astfel de câmpuri sunt adesea utilizate pentru ieșiri. Ar putea fi interesant, de exemplu, pentru a afișa valori calculate prin script. Gândiți-vă de exemplu la o mașină de calcul. De asemenea, puteți preîncărca manual un câmp cu un text pe care vizitatorii nu-l pot modifica. (Notă: Simbolul Euro nu este afișat corect în vizualizarea PDF).

<input name="pret" type="text" value="€ 699.-" readonly />



Pentru a seta un câmp ca fiind doar pentru citire, se atribuie atributul readonly. Iată încă o privire asupra rezultatului:

HTML & CSS pentru începători (Partea 13): Formulare (1)



Textul predefinit este vizibil direct. Cu toate acestea, nu poate fi șters.

Definirea câmpurilor pentru parole

Sigur cunoașteți câmpurile de parole. Peste tot unde vă înregistrați, trebuie să introduceți o parolă. (De obicei, trebuie să o reintroduceți de două ori).

HTML & CSS pentru începători (Partea 13): Formulare (1)

Datele introduse în câmpul de introducere nu sunt vizibile, ci sunt înlocuite automat de browser cu stele/puncte. Avantajul acestei variante: persoanele care ar putea privi peste umărul vostru la introducerea parolei nu o pot descifra. Cu toate acestea, este o eroare să considerăm că câmpurile de parole sunt automat sigure. De fapt, parolele sunt transmise în text clar în timpul trimiterii formularului pe HTTP-ul normal.

Câmpurile pentru parole sunt definite astfel:

<input type="password" name="parola" />



Attributului type i se atribuie valoarea password. Iată încă o privire asupra rezultatului.

HTML & CSS pentru începători (Partea 13): Formulare (1)



Dacă scrieți ceva acolo, browserele fac aceasta să nu fie vizibilă direct în timpul introducerii.