Обратно към основните положения: Каква е разликата между HTML атрибутите „id“ и „name“?

Снимка на Мария Тенева в Unsplash

Какво е тяхното значение и за какво са те?

Тези въпроси, макар и да изглеждат основни, са уместни и целта на тази публикация е именно да им отговори.

Така че, сред тези два елемента, най-простият за разбиране (и най-мощният) е атрибутът "id".

Атрибутът „id“:

Този атрибут се счита за атрибут Global, който се състои от атрибут, който е общ за всички HTML елементи - всеки HTML елемент може да съдържа атрибута id.
По дефиниция този атрибут се счита за уникален идентификатор (ID) и означава, че той трябва да бъде уникален за HTML страница.

За какво е?

Атрибутът id се използва предимно в JavaScript за получаване на директен достъп до желания елемент.
Пример за употреба:

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

Друг сценарий, при който може да се използва (в зависимост от вашия сценарий, по-добър подход би могъл да бъде използването на класове за многократна употреба) е чрез CSS стайлинг, използвайки селектора на id, например:

#myelementid {
 цвят на фона: червен;
}

Атрибутът „име“:

Атрибутът на името, от друга страна, се отнася само за някои HTML елементи, като например въвеждане, бутон, изберете, между другото.

За какво е?

Атрибутът на името се използва за изпращане на данни от формуляри към уеб сървър.
Когато изпращаме формуляр, стойностите във вашите HTML елементи като въвеждане, бутон, селекция и т.н. се изпращат с помощта на атрибута name, а не на идентификатора - това е важно!

Нека разгледаме следния HTML елемент:

Този елемент:

  • е елемент за въвеждане на текст, т.е. позволява въвеждането на текстови знаци
  • съдържа текста „суперпотребител“
  • атрибутът id има стойност „потребителско име“
  • атрибутът на име има стойност „myusername“
  • можете да взаимодействате с него, като използвате:
document.getElementById ('потребителско име'). value = 'megauser';
  • можете също да взаимодействате с него, използвайки селектора на име (ОК, можете да го направите, но се препоръчва да използвате атрибута id, тъй като е много по-ефективен):
document.querySelector ("input [name = 'myusername']"). value = 'testuser';
  • можете да приложите CSS стилове с помощта на селектора на id:
#username {font-weight: 700}
  • можете също да приложите CSS стилове, като използвате селектора на име (можете също да направите това, но това също не се препоръчва, тъй като в този случай стиловете ви са плътно свързани с вашия документ - ако промените името на вашия елемент, ще загубите стиловете ):
input [name = 'myusername'] {padding: 20px; }

Въпреки това, когато формулярът бъде представен на сървъра, атрибутът id няма да бъде използван и тук атрибутът на име придобива релевантност.
В този конкретен случай входната стойност ще бъде представена със стойността на „суперпотребител“, както и „името“ на елемента, за който се отнася - така че изпратените данни ще бъдат:

myusername = супер

Мога ли да имам HTML елемент с тези два атрибута?

Разбира се, тези два HTML атрибута се допълват. Можете да използвате идентификатора за взаимодействие с елемента чрез JavaScript или CSS и името, за да прехвърлите информацията към сървъра.

В спецификацията HTML 3.2 (от януари 1997 г.) можете да намерите подробни препратки към атрибута име и единственото позоваване на идентификатора е:

Атрибутите ID, CLASS и STYLE не са включени в тази версия на HTML.

Убедително е, че атрибутът име е създаден първо, а идентификаторът е създаден по-късно.

Препратки: