Asoslarga qaytish: HTML atributlari bilan "id" va "name" o'rtasidagi farq nima?

Mariya Teneva surati Unsplash-da

Ularning ahamiyati nimada va ular nima uchun?

Bu savollar, garchi ular asosiy bo'lib tuyulsa ham, juda mos va ushbu xabarning maqsadi aniq ularga javob berishdir.

Shunday qilib, ushbu ikki element orasida eng sodda (va eng kuchli) bu 'id' atributidir.

'Id' atributi:

Ushbu atribut, barcha HTML elementlari uchun umumiy bo'lgan atributdan iborat bo'lgan global atribut deb hisoblanadi - har qanday HTML elementida id atributi bo'lishi mumkin.
Ta'rifga ko'ra, bu atribut noyob identifikator (ID) deb hisoblanadi va HTML sahifasida yagona bo'lishi kerakligini anglatadi.

Bu nima uchun?

Id atributi asosan JavaScript-da kerakli elementga to'g'ridan-to'g'ri kirish uchun ishlatiladi.
Foydalanish misoli:

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

Uni ishlatish mumkin bo'lgan boshqa stsenariy (sizning stsenariyingizga qarab, qayta ishlatiladigan sinflardan foydalanishda yaxshiroq yondashuv) bu id selektoridan foydalangan holda CSS styling orqali, masalan:

#myelementid {
 fon rangi: qizil;
}

Ismning atributi:

Boshqa tomondan, nomning atributi kirish, tugma, tanlash va boshqalar kabi ba'zi HTML elementlariga nisbatan qo'llaniladi.

Bu nima uchun?

Ism atributi veb-serverga formalar ma'lumotlarini yuborish uchun ishlatiladi.
Shaklni yuborganimizda, sizning HTML elementlaridagi kiritish, tugma, tanlash va hokazolar ism emas, balki atribut yordamida yuboriladi - bu juda muhim!

Quyidagi HTML elementini ko'rib chiqaylik:

Ushbu element:

  • bu matn turini kiritish elementidir, ya'ni matn belgilarini kiritishga imkon beradi
  • 'superuser' matnini o'z ichiga oladi
  • id atributida "foydalanuvchi nomi" qiymati bor
  • ism atributida "myusername" qiymati mavjud
  • Siz u bilan quyidagilar orqali o'zaro bog'lanishingiz mumkin.
document.getElementById ('username'). value = 'megauser';
  • shuningdek, nom tanlagich yordamida o'zaro ta'sirlashishingiz mumkin (OK, buni amalga oshirishingiz mumkin, lekin id atributidan foydalanish tavsiya etiladi, chunki u ancha samaralidir):
document.querySelector ("kiritish [name = 'myusername']"). value = 'testuser';
  • id selector yordamida CSS uslublarini qo'llashingiz mumkin:
#username {shriftning vazni: 700}
  • shuningdek, siz tanlagich yordamida CSS uslublarini qo'llashingiz mumkin (buni ham qilishingiz mumkin, lekin bu ham tavsiya etilmaydi, chunki bu holda sizning uslublaringiz hujjatingizga mahkam bog'langan - agar element nomini o'zgartirsangiz, unda uslublar yo'qoladi. ):
kiritish [name = 'myusername'] {to'ldirish: 20px; }

Ammo, forma serverga topshirilganda, id atributi ishlatilmaydi va bu erda atributlar ahamiyati oshadi.
Bunday holda kirish qiymati "superuser" qiymati, shuningdek, tegishli bo'lgan elementning "nomi" qiymati bilan yuboriladi - shuning uchun taqdim etilgan ma'lumotlar quyidagicha bo'ladi:

myusername = superuser

Ushbu ikkita atributga ega bo'lgan HTML elementini olsam bo'ladimi?

Albatta, bu ikkita HTML atributlari bir-birini to'ldiradi. Siz ma'lumotni serverga uzatish uchun identifikatorni JavaScript yoki CSS va nom bilan o'zaro ishlash uchun ishlatishingiz mumkin.

HTML 3.2 spetsifikatsiyasida (1997 yil yanvar), siz atributlar haqida batafsil havolalarni topishingiz mumkin va id uchun yagona havola:

HTML, ushbu versiyada ID, CLASS va STYLE atributlari mavjud emas.

Ism atributi birinchi bo'lib, id keyinroq yaratilganligi xulosa qilinadi.

Adabiyotlar: