Terug naar de basis: wat is het verschil tussen het HTML-kenmerk "id" en "naam"?

Foto door Maria Teneva op Unsplash

Wat is hun rol en waarom?

Deze vragen, hoewel ze misschien fundamenteel lijken, zijn perfect passend en het doel van deze boodschap is om ze precies te beantwoorden.

Het eenvoudigste (en krachtigste) van deze twee elementen is dus het kenmerk 'id'.

'Id'-kenmerk:

Dit kenmerk wordt beschouwd als een globaal kenmerk dat een gemeenschappelijk kenmerk bevat voor alle HTML-elementen - elk HTML-element kan een id-kenmerk hebben. Dit kenmerk wordt per definitie beschouwd als een unieke identificatie en moet uniek zijn op de HTML-pagina.

Waarom dit?

Het id-attribuut wordt voornamelijk gebruikt voor directe toegang tot het element in JavaScript. Voorbeeld van gebruik:

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

Een ander scenario dat kan worden gebruikt (afhankelijk van uw scenario, een betere benadering voor het gebruik van herbruikbare klassen) is door CSS-styling te gebruiken, zoals:

#myelementid {achtergrondkleur: rood; }

Naamattribuut:

Het naamkenmerk is daarentegen van toepassing op bepaalde HTML-elementen, zoals invoer, knop, selectie en meer.

Waarom dit?

Het name attribuut wordt gebruikt om formuliergegevens naar de webserver te sturen. Wanneer we een formulier indienen, worden de invoer, knoppen, selectie, enz. In uw HTML-elementen verzonden met behulp van het kenmerk, niet de naam - wat erg belangrijk is!

Beschouw het volgende HTML-element:

Dit item:

  • het is een type tekstinvoerelement waarmee u teksttekens kunt invoeren
  • Bevat 'superuser'-tekst
  • Het id-attribuut heeft een "gebruikersnaam" -waarde
  • Het name attribuut bevat de waarde "myusername"
  • U kunt hem bereiken door:
document.getElementById ('gebruikersnaam'). waarde = 'megauser';
  • je kunt ook communiceren met de naamkiezer (OK, je kunt dit doen, maar het wordt aanbevolen om het kenmerk id te gebruiken omdat het efficiënter is):
document.querySelector ("input [name = 'myusername']"). value = 'testgebruiker';
  • U kunt CSS-stijlen gebruiken met id-selector:
#username {lettergrootte: 700}
  • u kunt ook CSS-stijlen gebruiken met de kiezer (u kunt dit doen, maar dit wordt niet aanbevolen omdat in dit geval uw stijlen stevig aan uw document zijn gehecht - als u het item een ​​andere naam geeft, gaan de stijlen verloren.):
input [name = 'mijngebruikersnaam'] {fill: 20px; }

Wanneer het formulier echter naar de server wordt verzonden, wordt het id-kenmerk niet gebruikt en neemt de waarde van het kenmerk toe. In dit geval wordt de invoerwaarde verzonden met de "superuser" -waarde, evenals de "naam" -waarde van het overeenkomstige element - dus de verstrekte informatie is als volgt:

mijngebruikersnaam = supergebruiker

Kan ik een HTML-element krijgen met deze twee kenmerken?

Natuurlijk zijn deze twee HTML-kenmerken complementair. U kunt de ID gebruiken om gegevens naar de server over te brengen voor interactie met JavaScript of CSS en naam.

In de HTML 3.2-specificatie (januari 1997) vindt u gedetailleerde links naar attributen en de enige referentie voor de id:

HTML heeft in deze versie geen ID, CLASS en STYLE attributen.

Er wordt geconcludeerd dat het naamkenmerk eerst is gemaakt en later id.

Referenties: