Creează-ți primul formular HTML

În acest tutorial vei învăța cum să creezi primul tău formular simplu în HTML. Formularele sunt o componentă esențială a aplicațiilor web și permit utilizatorilor să introducă informații și să le trimită la un server. În acest ghid pas cu pas vei învăța structura de bază a unui formular HTML și vei înțelege modul în care diferitele elemente colaborează pentru a transfera datele.

Concluzii principale

• Un formular HTML este definit de tag-ul <form>.
• Atributele action și method stabilesc unde vor fi trimise datele și ce metodă va fi folosită.
• Câmpurile formularului sunt în mod normal definite prin tag-urile <input>, <label> și <button>.
• Datele pot fi trimise la server fie prin GET, fie prin POST.

Ghid Pas cu Pas

1. Crearea Structurii de Bază HTML

Mai întâi, vei avea nevoie de un document HTML simplu ca bază. Asigură-te că ai structura de bază a unui document HTML:

2. Adăugarea Tag-ului Form

Următorul pas este să definești formularul. Adaugi tag-ul <form> și ai nevoie de atributele action și method. Iată un exemplu simplu în care action indică URL-ul către care vor fi trimise datele și method este setat pe GET pentru a transmite datele prin URL.

3. Crearea Etichetei și a Câmpului de Intrare

În formular, vei dori să creezi un câmp de intrare etichetat. Pentru acest lucru, folosești tag-ul <label> pentru etichetă și tag-ul <input> pentru câmpul de intrare propriu-zis. Asigură-te că atributul for al etichetei se potrivește cu id-ul câmpului de intrare.

4. Adăugarea Butonului de Trimitere

Pentru a trimite datele formularului, ai nevoie de un buton. Acesta este realizat prin tag-ul <button> și ar trebui să aibă tipul submit, astfel încât formularul să fie trimis la clic.

5. Testarea Formularului

După ce ai creat formularul, este timpul să-l testezi în browser. Introdu un exemplu în câmpul de intrare și apasă pe butonul Submit. Ar trebui să vezi că la trimiterea formularului, datele introduse sunt trimise prin URL către action-ul specificat.

6. Modificarea Atributelor Câmpurilor de Intrare

Pentru a vedea cum se modifică câmpurile de intrare, poți ajusta atributele tag-ului <input>. Schimbă de exemplu atributul name pentru a diferenția datele transmise. Un exemplu ar fi să schimbi numele câmpului de la name la first name.

7. Transferul de Date și Tipul de Cerere

Înainte de a efectua mai multe teste, este important să știi că metoda GET trimite datele în URL, în timp ce POST trimite datele în corpul cererii HTTP. Poți schimba tipul de cerere ajustând atributul method din tag-ul <form>.

8. Simularea Reacției de la Server

Dacă la testarea formularului tău nu ai un server real disponibil, poți ajusta URL-ul action pentru a simula o altă pagină HTML către care utilizatorii vor fi redirecționați după trimiterea formularului. Creează un nou fișier HTML care să conțină, de exemplu, o pagină de mulțumire.

9. Depanarea și Debugging-ul

Dacă întâmpini erori la trimiterea formularului, verifică Instrumentele de Rețea ale browserului. Acolo vei vedea dacă formularul a fost trimis cu succes și ce date sunt transmise. Fii atent și la posibilele erori 404, care indică faptul că URL-ul țintă nu a fost găsit.

10. Finalizare și Perspective

Acum ai o înțelegere de bază pentru crearea de formulare HTML. Poți extinde această tehnică pentru a crea formulare mai complexe care să conțină diferite tipuri de intrări și validări. În următorul tutorial vei învăța cum să reacționezi la intrările din formular cu JavaScript și să efectuezi transferuri de date asincrone.

Rezumat

În acest tutorial ai învățat structura și modul de funcționare al primului tău formular HTML. Știi acum cum să creezi câmpuri de intrare, etichete și butoane, precum și cum datele trimise sunt transferate prin URL sau în corpul unei cereri POST.