Grįžkite prie pagrindų: kuo skiriasi HTML atributai „id“ ir „name“?

Maria Teneva nuotrauka „Unsplash“

Kokia jų svarba ir kam jie skirti?

Šie klausimai, nors ir gali atrodyti esminiai, yra svarbūs, o šio įrašo tikslas yra tiksliai atsakyti į juos.

Taigi tarp šių dviejų elementų paprasčiausias suprasti (ir pats galingiausias) yra „id“ atributas.

„ID“ atributas:

Šis atributas laikomas visuotiniu atributu, kurį sudaro atributas, būdingas visiems HTML elementams - bet kuriame HTML elemente gali būti id atributas.
Iš esmės šis atributas laikomas unikaliu identifikatoriumi (ID) ir reiškia, kad jis turi būti unikalus kiekviename HTML puslapyje.

Kam tai?

Atributas „id“ pirmiausia naudojamas „JavaScript“, kad būtų galima tiesiogiai pasiekti norimą elementą.
Naudojimo pavyzdys:

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

Kitas scenarijus, kuriame jis gali būti naudojamas (atsižvelgiant į jūsų scenarijų, geresnis požiūris galėtų būti pakartotinio naudojimo klasių naudojimas) yra CSS stilius, naudojant ID parinkiklį, pavyzdžiui:

#myelementid {
 fono spalva: raudona;
}

„Vardas“ atributas:

Vardo atributas, kita vertus, taikomas tik kai kuriems HTML elementams, tokiems kaip įvestis, mygtukas, pasirinkti, be kitų.

Kam tai?

Vardo atributas naudojamas formų duomenims į interneto serverį pateikti.
Kai mes pateikiame formą, reikšmės jūsų HTML elementuose, pavyzdžiui, įvestyje, mygtuke, pasirinkime ir kt., Siunčiamos naudojant vardo atributą, o ne pagal ID - tai svarbu!

Panagrinėkime šį HTML elementą:

Šis elementas:

  • yra teksto tipo įvesties elementas, t. y. leidžia įvesti teksto simbolius
  • yra tekstas „super vartotojas“
  • ID atributas turi reikšmę „vartotojo vardas“
  • vardo atributas turi reikšmę „mano vartotojo vardas“
  • galite su juo bendrauti naudodamiesi:
document.getElementById ('vartotojo vardas'). value = 'megauser';
  • taip pat galite su juo bendrauti naudodamiesi vardų parinkikliu (Gerai, galite tai padaryti, tačiau rekomenduojama naudoti id atributą, nes jis yra daug efektyvesnis):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • CSS stilius galite pritaikyti naudodami ID parinkiklį:
# vartotojo vardas {šrifto svoris: 700}
  • taip pat galite pritaikyti CSS stilius naudodami vardų parinkiklį (taip pat galite tai padaryti, tačiau taip pat nerekomenduojama, nes tokiu atveju jūsų stiliai yra tvirtai susieti su jūsų dokumentu - jei pakeisite elemento pavadinimą, stilius bus prarastas) ):
įvestis [vardas = 'mano vartotojo vardas'] {padding: 20 pikselių; }

Tačiau, kai forma bus pateikta serveriui, „id“ atributas nebus naudojamas, ir būtent tada vardo atributas tampa reikšmingas.
Šiuo konkrečiu atveju įvesties vertė bus pateikta kartu su „superuser“ reikšme ir elemento, su kuriuo ji susijusi, „name“ - taigi, pateikti duomenys bus šie:

mano vartotojo vardas = super vartotojas

Ar galiu turėti HTML elementą su šiais dviem atributais?

Žinoma, šie du HTML atributai papildo vienas kitą. Galite naudoti ID norėdami sąveikauti su elementu naudodamiesi „JavaScript“ ar CSS, ir pavadinimą, norėdami perduoti informaciją į serverį.

HTML 3.2 specifikacijoje (1997 m. Sausio mėn.) Galite rasti išsamių nuorodų į vardo atributą ir vienintelė nuoroda į ID yra:

ID, CLASS ir STYLE atributai neįtraukti į šią HTML versiją.

Neabejotina, kad pirmiausia buvo sukurtas vardo atributas, o ID buvo sukurtas vėliau.

Nuorodos: