Вярнуцца да асноў: у чым розніца паміж атрыбутамі HTML "id" і "name"?

Фота Марыі Тэневай на Unsplash

У чым іх важнасць і для чаго яны патрэбныя?

Гэтыя пытанні, хоць і могуць здацца асноўнымі, дарэчныя, і мэта гэтага паведамлення - менавіта на іх адказаць.

Такім чынам, сярод гэтых двух элементаў самым простым для разумення (і самым магутным) з'яўляецца атрыбут "id".

Атрыбут "id":

Гэты атрыбут лічыцца атрыбутам Global, які складаецца з атрыбута, агульнага для ўсіх элементаў HTML - любы HTML-элемент можа ўтрымліваць атрыбут id.
Па азначэнні гэты атрыбут лічыцца унікальным ідэнтыфікатарам (ID) і азначае, што ён павінен быць унікальным на старонцы HTML.

Для чаго гэта?

Атрыбут id у асноўным выкарыстоўваецца ў JavaScript для атрымання прамога доступу да патрэбнага элемента.
Прыклад выкарыстання:

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

Іншы сцэнар, у якім ён можа быць выкарыстаны (у залежнасці ад сцэнарыя, лепш падыходзіць выкарыстанне класаў шматразовага выкарыстання), гэта стыль CSS з дапамогай селектара ідэнтыфікатара, напрыклад:

#myelementid {
 фонавы колер: чырвоны;
}

Атрыбут "name":

Атрыбут імя, з іншага боку, распаўсюджваецца толькі на некаторыя элементы HTML, такія як увод, кнопка, вылучэнне сярод іншых.

Для чаго гэта?

Атрыбут імя выкарыстоўваецца для падачы дадзеных формаў на вэб-сервер.
Калі мы прадстаўляем форму, значэнні ў вашых элементах HTML, такія як увод, кнопкі, выбару і г.д., адпраўляюцца з дапамогай атрыбута імя, а не ідэнтыфікатара - гэта важна!

Разгледзім наступны элемент HTML:

Гэты элемент:

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

Аднак, калі форма пададзена на сервер, атрыбут id не будзе выкарыстоўвацца, і менавіта тут атрыбут імя набывае актуальнасць.
У гэтым канкрэтным выпадку ўваходнае значэнне будзе прадстаўлена са значэннем "суперпользователя", а таксама "імя" элемента, да якога ён адносіцца, - такім чынам, прадстаўленыя дадзеныя будуць:

myusername = суперрусер

Ці магу я мець элемент HTML з гэтымі двума атрыбутамі?

Вядома, гэтыя два атрыбуты HTML дапаўняюць адзін аднаго. Вы можаце выкарыстоўваць ідэнтыфікатар для ўзаемадзеяння з элементам праз JavaScript або CSS, а таксама імя для перадачы інфармацыі на сервер.

У спецыфікацыі HTML 3.2 (ад студзеня 1997 г.) вы можаце знайсці падрабязныя спасылкі на атрыбут імя, і адзіная спасылка на ідэнтыфікатар:

Атрыбуты ID, CLASS і STYLE не ўключаныя ў гэтую версію HTML.

Бясспрэчна, што атрыбут імя быў створаны спачатку, а ідэнтыфікатар - створаны пазней.

Літаратура: