Zpět k základům: Jaký je rozdíl mezi atributem HTML „id“ a „name“?

Foto: Maria Teneva na Unsplash

Jaká je jejich role a proč?

Tyto otázky, i když se mohou jevit jako zásadní, jsou naprosto vhodné a účelem této zprávy je přesně na ně odpovědět.

Nejjednodušší (a nejsilnější) těchto dvou prvků je tedy atribut „id“.

Atribut 'Id':

Tento atribut je považován za globální atribut, který obsahuje společný atribut pro všechny prvky HTML - každý prvek HTML může mít atribut id. Podle definice je tento atribut považován za jedinečný identifikátor a musí být jedinečný na stránce HTML.

Proč tohle?

Atribut id se používá hlavně pro přímý přístup k prvku v JavaScriptu. Příklad použití:

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

Další scénář, který lze použít (v závislosti na vašem scénáři, je lepší přístup k používání opakovaně použitelných tříd) pomocí stylu CSS, například:

#myelementid {barva pozadí: červená; }

Atribut jména:

Atribut name se na druhou stranu vztahuje na určité prvky HTML, jako je vstup, tlačítko, výběr a další.

Proč tohle?

Atribut name se používá k odeslání dat formuláře na webový server. Když odešleme formulář, vstup, tlačítko, výběr atd. Ve vašich prvcích HTML jsou odeslány pomocí atributu, nikoli názvu - což je velmi důležité!

Zvažte následující prvek HTML:

Tato položka:

  • je to typ prvku pro zadávání textu, který umožňuje zadávat textové znaky
  • Obsahuje text „superuživatel“
  • Atribut id má hodnotu „username“
  • Atribut name obsahuje hodnotu „myusername“
  • Můžete ho kontaktovat:
document.getElementById ('uživatelské jméno'). value = 'megauser';
  • můžete také komunikovat s výběrem jmen (OK, můžete to udělat, ale doporučujeme použít atribut id, protože je efektivnější):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • Se selektorem id můžete použít styly CSS:
#username {velikost písma: 700}
  • s výběrem můžete také použít styly CSS (můžete to udělat, ale nedoporučuje se to, protože v tomto případě jsou vaše styly pevně připojeny k dokumentu - pokud přejmenujete položku, styly budou ztraceny.):
input [name = 'myusername'] {fill: 20px; }

Však při odeslání formuláře na server atribut id není použit a hodnota atributu zvyšuje. V tomto případě je vstupní hodnota odeslána s hodnotou „superuživatel“ a také „hodnotou“ odpovídajícího prvku - poskytnuté informace jsou tedy následující:

myusername = superuser

Mohu získat prvek HTML, který má tyto dva atributy?

Tyto dva atributy HTML se samozřejmě doplňují. ID můžete použít k přenosu dat na server pro interakci s JavaScriptem nebo CSS a jménem.

Ve specifikaci HTML 3.2 (leden 1997) najdete podrobné odkazy na atributy a jediný odkaz na id:

HTML nemá v této verzi atributy ID, CLASS a STYLE.

Došlo se k závěru, že atribut name byl poprvé vytvořen a později id.

Reference: