Torna alle basi: Qual è la differenza tra l'attributo HTML "id" e "name"?

Foto di Maria Teneva su Unsplash

Qual è il loro ruolo e perché?

Queste domande, sebbene possano sembrare fondamentali, sono perfettamente appropriate e lo scopo di questo messaggio è di rispondere chiaramente.

Pertanto, il più semplice (e il più potente) di questi due elementi è l'attributo "id".

Attributo "Id":

Questo attributo è considerato un attributo globale che contiene un attributo comune per tutti gli elementi HTML: qualsiasi elemento HTML può avere un attributo id. Per definizione, questo attributo è considerato un identificatore univoco e dovrebbe essere univoco nella pagina HTML.

Perché questo?

L'attributo id viene utilizzato principalmente per l'accesso diretto all'elemento in JavaScript. Esempio di utilizzo:

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

Un altro scenario che può essere utilizzato (un approccio migliore all'utilizzo di classi riutilizzabili, a seconda del proprio scenario) è l'utilizzo dello stile CSS, come:

#myelementid {colore di sfondo: rosso; }

Attributo nome:

L'attributo name, d'altra parte, si applica a determinati elementi HTML, come input, pulsante, selezione, ecc.

Perché questo?

L'attributo name viene utilizzato per inviare i dati del modulo al web server. Quando inviamo un modulo, l'input, i pulsanti, la selezione, ecc. Nei tuoi elementi HTML vengono inviati utilizzando l'attributo, non il nome, il che è molto importante!

Considera il seguente elemento HTML:

Questo articolo:

  • è un tipo di elemento di input di testo, che consente di inserire caratteri di testo
  • Contiene testo "superutente"
  • L'attributo id ha un valore "username"
  • L'attributo name contiene il valore "myusername"
  • Puoi contattarlo tramite:
document.getElementById ('username'). valore = "megauser";
  • puoi anche interagire con il selettore di nomi (OK, puoi farlo, ma si consiglia di utilizzare l'attributo id perché è più efficiente):
document.querySelector ("input [name = 'myusername']"). valore = 'testuser';
  • Puoi utilizzare gli stili CSS con il selettore ID:
#username {dimensione carattere: 700}
  • puoi anche usare gli stili CSS con il selettore (puoi farlo, ma questo non è raccomandato perché in questo caso i tuoi stili sono strettamente collegati al tuo documento - se rinomini l'elemento, gli stili andranno persi.):
input [name = 'myusername'] {fill: 20px; }

Tuttavia, quando il modulo viene inviato al server, l'attributo id non viene utilizzato e il valore dell'attributo aumenta. In questo caso, il valore di input viene inviato con il valore "superutente", così come il valore "nome" dell'elemento corrispondente, quindi le informazioni fornite sono le seguenti:

myusername = superutente

Posso ottenere un elemento HTML con questi due attributi?

Naturalmente, questi due attributi HTML sono complementari. È possibile utilizzare l'ID per trasferire i dati al server per interagire con JavaScript o CSS e il nome.

Nella specifica HTML 3.2 (gennaio 1997), puoi trovare collegamenti dettagliati agli attributi e l'unico riferimento per l'id:

HTML non ha attributi ID, CLASS e STYLE in questa versione.

Si è concluso che l'attributo name è stato prima creato e successivamente id.

riferimenti: