Înapoi la noțiuni de bază: Care este diferența dintre atributul HTML „id” și „nume”?

Foto de Maria Teneva pe Unsplash

Care este rolul lor și de ce?

Aceste întrebări, deși pot părea fundamentale, sunt perfect adecvate, iar acest mesaj este să le răspundem cu exactitate.

Astfel, cel mai simplu (și cel mai puternic) dintre aceste două elemente este atributul „id”.

Atributul „ID”:

Acest atribut este considerat un atribut global care conține un atribut comun pentru toate elementele HTML - orice element HTML poate avea un atribut id. Prin definiție, acest atribut este considerat un identificator unic și ar trebui să fie unic în pagina HTML.

De ce asta?

Atributul ID este utilizat în principal pentru acces direct la elementul din JavaScript. Exemplu de utilizare:

var myElement = document.getElementById ('myelementid');

Un alt scenariu care poate fi utilizat (o abordare mai bună pentru utilizarea claselor reutilizabile, în funcție de scenariul dvs.) este utilizarea stilului CSS, cum ar fi:

#myelementid {culoare de fundal: roșu; }

Nume atribut:

Pe de altă parte, atributul nume se aplică anumitor elemente HTML, cum ar fi introducerea, butonul, selecția și multe altele.

De ce asta?

Atributul nume este utilizat pentru a trimite date de formular pe serverul web. Când trimitem un formular, introducerea, butoanele, selecția etc. din elementele dvs. HTML sunt trimise folosind atributul, nu numele - ceea ce este foarte important!

Luați în considerare următorul element HTML:

Acest articol:

  • este un tip de element de introducere a textului, care vă permite să introduceți caractere text
  • Conține text „superuser”
  • Atributul ID are o valoare „nume de utilizator”
  • Atributul nume conține valoarea "nume de utilizator"
  • Îl puteți contacta prin:
document.getElementById („nume de utilizator”). valoare = 'megauser';
  • puteți interacționa, de asemenea, cu selectorul de nume (OK, puteți face acest lucru, dar este recomandat să folosiți atributul ID, deoarece este mai eficient):
document.querySelector ("intrare [nume = 'nume de utilizator']"). valoare = 'testuser';
  • Puteți utiliza stiluri CSS cu selector ID:
#username {dimensiunea fontului: 700}
  • puteți utiliza, de asemenea, stiluri CSS cu selectorul (puteți face acest lucru, dar nu este recomandat, deoarece în acest caz, stilurile dvs. sunt strâns atașate la documentul dvs. - dacă redenumiți elementul, stilurile vor fi pierdute.):
intrare [nume = 'nume de utilizator'] {fill: 20px; }

Cu toate acestea, atunci când formularul este trimis către server, atributul id nu este utilizat și valoarea atributului crește. În acest caz, valoarea de intrare este trimisă cu valoarea „superuser”, precum și valoarea „nume” a elementului corespunzător - deci informațiile furnizate sunt

myusername = superuser

Pot obține un element HTML care are aceste două atribute?

Desigur, aceste două atribute HTML sunt complementare. Puteți utiliza ID-ul pentru a transfera date către server pentru a interacționa cu JavaScript sau CSS și numele.

În specificația HTML 3.2 (ianuarie 1997), puteți găsi link-uri detaliate la atribute și singura referință pentru ID:

HTML nu are atribute ID, CLASĂ și STIL în această versiune.

Se concluzionează că atributul nume a fost mai întâi creat și mai târziu id.

Referințe: