Nazaj na osnove: Kakšna je razlika med atributoma HTML „id“ in „name“?

Foto Maria Teneva na Unsplash

Kaj je njihov pomen in čemu so namenjeni?

Ta vprašanja, čeprav se morda zdijo osnovna, so ustrezna in namen te objave je natančno odgovoriti nanje.

Med tema dvema elementoma je najpreprostejši (in najzmogljivejši) atribut id.

Atribut »id«:

Ta atribut velja za atribut Global, ki je sestavljen iz atributa, ki je skupen vsem elementom HTML - vsak element HTML lahko vsebuje atribut id.
Po atributi ta atribut velja za edinstven identifikator (ID) in pomeni, da mora biti edinstven na strani HTML.

Za kaj gre?

Atribut id se v JavaScript uporablja predvsem za neposreden dostop do želenega elementa.
Primer uporabe:

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

Drug scenarij, kjer ga je mogoče uporabiti (odvisno od vašega scenarija, bi lahko bil boljši pristop z uporabo razredov za večkratno uporabo) je CSS styling z uporabo izbirnika id, na primer:

#myelementid {
 barva ozadja: rdeča;
}

Atribut 'name':

Po drugi strani atribut imena velja le za nekatere elemente HTML, kot so vnos, gumb, med drugimi.

Za kaj gre?

Atribut imena se uporablja za pošiljanje podatkov obrazcev na spletni strežnik.
Ko predložimo obrazec, se vrednosti v vaših elementih HTML, kot so vnos, gumb, izbira itd., Pošljejo z atributom imena in ne z idom - to je pomembno!

Upoštevajmo naslednji element HTML:

Ta element:

  • je element vnosa besedila, tj. omogoča vnos besedilnih znakov
  • vsebuje besedilo „nadporočnik“
  • atribut id ima vrednost „uporabniško ime“
  • atribut imena ima vrednost "ime uporabnika"
  • z njim lahko komunicirate z:
document.getElementById ('uporabniško ime'). value = 'megauser';
  • z njim lahko tudi komunicirate z izbirnikom imena (v redu, lahko to storite, vendar je priporočljivo uporabiti atribut id, ker je veliko bolj učinkovit):
document.querySelector ("input [ime = 'ime mojega uporabnika']"). value = 'testuser';
  • lahko uporabite stile CSS z izbirnikom id:
#username {font-weight: 700}
  • lahko uporabite tudi stile CSS z izbirnikom imena (lahko tudi to storite, vendar ni priporočljivo, saj so v tem primeru vaši slogi tesno povezani z vašim dokumentom - če spremenite ime svojega elementa, boste izgubili sloge ):
input [ime = 'ime mojega uporabnika'] {padding: 20px; }

Ko pa je obrazec predložen strežniku, atribut id ne bo uporabljen in tu dobi atribut ime.
V tem primeru bo vhodna vrednost predložena z vrednostjo „nadporočnika“ in „imenom“ elementa, na katerega se nanaša - torej bodo predloženi podatki:

myusername = nadporočnik

Ali lahko imam element HTML s tema dvema atributoma?

Seveda se ta dva atributa HTML medsebojno dopolnjujeta. ID lahko uporabite za interakcijo z elementom JavaScript ali CSS in ime za prenos podatkov na strežnik.

V specifikaciji HTML 3.2 (z januarjem 1997) najdete podrobne reference na atribut imena in edino sklicevanje na id je:

Atributi ID, CLASS in STYLE niso vključeni v tej različici HTML.

Prepričljivo je, da je bil atribut name ustvarjen najprej, id je bil ustvarjen pozneje.

Reference: