Tagasi põhitõdede juurde: Mis vahe on HTML-atribuutidel „id” ja „name”?

Foto Maria Teneva saidil Unsplash

Mis on nende jaoks oluline ja milleks need on mõeldud?

Kuigi need küsimused võivad tunduda põhilised, on nad asjakohased ja selle postituse eesmärk on neile täpselt vastata.

Niisiis on nende kahe elemendi hulgas kõige lihtsamini mõistetav (ja kõige võimsam) atribuut id.

Atribuut id:

Seda atribuuti peetakse globaalseks atribuudiks, mis koosneb atribuudist, mis on ühine kõigile HTML-i elementidele - iga HTML-element võib sisaldada id-atribuuti.
Definitsiooni järgi peetakse seda atribuuti unikaalseks identifikaatoriks (ID) ja see tähendab, et see peab olema HTML-i ainulaadne.

Milleks see mõeldud on?

Atribuuti id kasutatakse JavaScriptis peamiselt soovitud elemendile otsese juurdepääsu saamiseks.
Kasutusnäide:

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

Teine stsenaarium, kus seda saab kasutada (sõltuvalt teie stsenaariumist võiks parem lähenemisviis olla korduvkasutatavate klasside kasutamine), on CSS-i stiil, kasutades id-valijat, näiteks:

#myelementid {
 taustavärv: punane;
}

Atribuut „name”:

Nimi atribuut seevastu kehtib ainult mõne HTML-i elemendi, näiteks sisestuse, nupu, vali muu hulgas.

Milleks see mõeldud on?

Nimi atribuuti kasutatakse vormide andmete veebiserverisse saatmiseks.
Vormi esitamisel saadetakse teie HTML-i elementide, näiteks sisendi, nupu, valiku jms väärtused nimeatribuudiga, mitte id-ga - see on oluline!

Vaatleme järgmist HTML-i elementi:

See element:

  • on tekstitüübi sisestuselement, st võimaldab sisestada tekstimärke
  • sisaldab teksti 'superkasutaja'
  • atribuudil id on väärtus kasutajanimi
  • nime atribuudil on väärtus 'myusername'
  • saate sellega suhelda, kasutades:
document.getElementById ('kasutajanimi'). value = 'megauser';
  • saate sellega ka nimevalija abil suhelda (OK, saate seda teha, kuid soovitatav on kasutada atribuuti id, kuna see on palju tõhusam):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • saate CSS-i stiile rakendada id-valija abil:
#kasutajanimi {font-weight: 700}
  • võite CSS-i stiile rakendada ka nimevalija abil (saate seda ka teha, kuid see pole samuti soovitatav, kuna sel juhul on teie stiilid tihedalt seotud dokumendiga - kui muudate elemendi nime, siis kaotate stiilid) ):
sisend [nimi = 'kasutajanimi'] {polster: 20 pikslit; }

Vormi serverile esitamisel ID atribuuti siiski ei kasutata ja see on siis, kui nime atribuut saab tähtsuse.
Sel juhul esitatakse sisendväärtus koos väärtusega “superkasutaja” ja ka selle elemendi “nimi”, millega see on seotud - seega on esitatud andmed järgmised:

myusername = superkasutaja

Kas mul on nende kahe atribuudiga HTML-i elementi?

Muidugi täiendavad need kaks HTML-i atribuuti teineteist. ID-ga saate elementidega suhelda JavaScripti või CSS-i abil ja nime teabe edastamiseks serverisse.

HTML 3.2 spetsifikaadist (kuupäev jaanuar 1997) leiate üksikasjalikud viited nime atribuudile ja ainus viide ID-le on:

Selles HTML-i versioonis pole atribuute ID, CLASS ja STYLE.

On otsustav, et kõigepealt loodi nimeatribuut ja ID hiljem.

Viited: