Aftur í grunnatriðin: Hver er munurinn á HTML eiginleikum ‘id’ og ‘name’?

Ljósmynd af Maria Teneva á Unsplash

Hvert er mikilvægi þeirra og hverju eru þau að gera?

Þessar spurningar, þótt þær virðast grundvallaratriði, eru viðeigandi og tilgangur þessarar færslu er einmitt að svara þeim.

Þannig að meðal þessara tveggja þátta er einfaldasti að skilja (og sá öflugasti) eiginleiki „id“.

Eiginleikinn „id“:

Þessi eiginleiki er talinn alþjóðlegur eiginleiki sem samanstendur af eiginleikum sem eru sameiginlegir öllum HTML frumefnum - allir HTML frumefni geta innihaldið eigindina.
Sem skilgreining er þessi eiginleiki talinn sérstakt auðkenni (ID) og þýðir að hann verður að vera sérstakur á HTML síðu.

Hvað er það fyrir?

Auðkenni eigindarinnar er aðallega notað í JavaScript til að fá beinan aðgang að viðkomandi þætti.
Dæmi um notkun:

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

Önnur atburðarás þar sem hægt er að nota hana (fer eftir atburðarás þinni, betri aðferð gæti verið að nota einnota flokka) er í gegnum CSS-stíl með því að nota auðkennisvalið, til dæmis:

#myelementid {
 bakgrunnslitur: rauður;
}

Eiginleikinn „nafn“:

Nafn eigindin á aftur á móti aðeins við um einhverja HTML þætti, svo sem innslátt, hnapp, veldu meðal annars.

Hvað er það fyrir?

Nafn eigindin er notuð til að skila eyðublaða gögnum á vefþjón.
Þegar við sendum inn eyðublað, eru gildi í HTML þætti þínum svo innsláttur, hnappur, val, osfrv sendur með nafn eigindinni en ekki auðkenni - það er mikilvægt!

Við skulum skoða eftirfarandi HTML frumefni:

Þessi þáttur:

  • er innsláttarefni textategundar, þ.e.a.s. gerir kleift að koma textatexta inn
  • inniheldur textann „ofurnotandi“
  • id eigindin hefur gildið „notandanafn“
  • nafn eigindin hefur gildið ‘myusname’
  • þú getur haft samskipti við það með því að nota:
document.getElementById ('notandanafn'). value = 'megauser';
  • þú getur líka haft samskipti við það með því að nota nafnavalinn (allt í lagi, þú getur gert það, en mælt er með því að nota id eigindina þar sem það er mun skilvirkara):
document.querySelector ("input [name = 'myusname']"). value = 'testuser';
  • þú getur beitt CSS stílum með id valinum:
# notandanafn {letur-þyngd: 700}
  • þú getur líka beitt CSS stíl með nafnavalinu (þú getur líka gert þetta, en það er ekki mælt með því þar sem í þessu tilfelli eru stílar þínir vel tengdir skjali þínu - ef þú breytir nafni frumefnis muntu missa stílinn ):
input [name = 'myusname'] {padding: 20px; }

Hins vegar þegar formið er sent til netþjónsins verður id eigindin ekki notuð og það er þar sem nafn eigindarinnar öðlast gildi.
Í þessu tiltekna tilfelli verður inntaksgildið sent með gildi „ofurnotanda“ sem og „nafn“ frumefnisins sem það tengist - svo að gögnin sem lögð eru fram verða:

myusname = ofnotandi

Get ég haft HTML frumefni með þessum tveimur eiginleikum?

Auðvitað bæta þessi tvö HTML eiginleika hvert við annað. Þú getur notað ID til að hafa samskipti við frumefnið með JavaScript eða CSS og nafninu til að flytja upplýsingarnar á netþjóninn.

Í HTML 3.2 forskriftinni (frá janúar 1997) er hægt að finna ítarlegar tilvísanir í eigindin heiti og eina tilvísunin til id er:

Auðkenni, flokkur og stíll eru ekki með í þessari útgáfu af HTML.

Það er óyggjandi að nafn eigindarinnar var stofnað fyrst og auðkennið var búið til síðar.

Tilvísanir: