Cum se creează un formular HTML (Exemple explicate)

Formularele sunt folosite pentru a colecta date de la utilizatori, cum ar fi informații de contact, sau pentru a le permite utilizatorilor să interacționeze cu site-ul web, cum ar fi să posteze comentarii sau să efectueze căutări. În acest articol, vom învăța cum să creăm un formular de bază folosind HTML.

Structura unui formular HTML

Un formular HTML este creat folosind eticheta. În această etichetă, puteți avea o varietate de elemente de introducere diferite, cum ar fi câmpuri de text, butoane, casete de selectare, butoane radio și multe altele.

elementele de intrare merg aici

Elemente de intrare

Câmpuri de text

Câmpurile de text sunt create folosind eticheta cu atributul tip așezat pe text. De exemplu:

Nume:




Telefon

Elementul utilizat pentru câmpurile de introducere a numărului de telefon.

Telefon:


Data

Elementul folosit pentru a selecta o dată.

Data de naștere:


Parola

Elementul folosit pentru câmpurile de introducere a parolei. Textul introdus în acest câmp este afișat sub formă de puncte pentru a ascunde parola.

Parola:


Arhiva

Elementul este folosit pentru a permite utilizatorului să selecteze un fișier din sistemul local de fișiere.

Incarca fisier:


Caseta de bifat

Elementul utilizat pentru câmpurile de introducere care permit utilizatorului să selecteze niciuna, una sau mai multe opțiuni.

Accept termenii si conditiile

Radio

Elementul utilizat pentru câmpurile de introducere care permit utilizatorului să selecteze o opțiune dintr-un set de opțiuni.

Gen:

Om

femei

Număr

Elementul utilizat pentru câmpurile de introducere numerică.

Cantitate:


Gamă

Elementul utilizat pentru câmpurile de intrare care trebuie să conţină o valoare dintr-un interval de valori.

Volum:




Butoane

Butoanele sunt create folosind eticheta cu atributul tip așezat pe Trimite. Acest buton, atunci când este apăsat, va trimite datele formularului. De exemplu:

Nume:




Gestionarea introducerii formularului

Atunci când butonul de trimitere este apăsat, datele din formular sunt trimise pentru procesare. Acest lucru se face printr-una dintre cele două metode: GET sau POST, care sunt specificate folosind atributul metodă În etichetă .

metoda GET

Metoda GET trimite datele formularului ca parte a URL-ului. Este util pentru lucruri precum căutări, unde datele din formular nu sunt sensibile. Cu toate acestea, această metodă are limitări în ceea ce privește lungimea datelor care pot fi trimise.

elementele de intrare merg aici

metoda POST

Metoda POST trimite datele formularului separat de adresa URL. Acesta este mai sigur și poate gestiona o cantitate mult mai mare de date, așa că este folosit pentru lucruri precum contact sau trimiterea formularelor de conectare.

elementele de intrare merg aici

În ambele cazuri, atributul acțiune este utilizat pentru a specifica adresa URL a scriptului de pe partea serverului care va procesa datele din formular.

Exemplu de formular HTML cu toate elementele 

Iată un formular care utilizează toate elementele pe care le-am analizat în acest articol:

Formular de înregistrare

Nume:



Nume:



E-mail:



Telefon:



Data de naștere:



Parola:



Incarca fisier:



Accept termenii si conditiile


Gen:

Om

femei

Cantitate:



Volum:




Acest formular are câmpuri pentru prenume, nume, e-mail, telefon, data nașterii, parolă, un câmp pentru a încărca un fișier, o casetă de selectare pentru termeni și condiții, radiouri pentru a alege sexul și câmpuri pentru număr și interval pentru cantitate și volum, respectiv.

Butonul „Trimite” de la final este cel care s-ar ocupa de trimiterea formularului la adresa URL specificată în atribut acțiune A etichetei formă (în acest caz, „/submit_form”). Pentru ca acest formular să funcționeze pe un site web real, ar trebui să aveți un server configurat pentru a primi și procesa informațiile din acest formular în calea „/submit_form”.