العودة إلى الأساسيات: ما الفرق بين سمة HTML "id" و "name"؟

تصوير ماريا تينيفا على Unsplash

ما هو دورهم ولماذا؟

هذه الأسئلة ، على الرغم من أنها قد تبدو أساسية ، إلا أنها مناسبة تمامًا ، والغرض من هذه الرسالة هو الإجابة عنها بدقة.

وبالتالي ، فإن أبسط (وأقوى) هذين العنصرين هي السمة "id".

سمة "Id":

تعتبر هذه السمة سمة عامة تحتوي على سمة مشتركة لجميع عناصر HTML - يمكن أن يكون لأي عنصر HTML سمة معرف. بحكم التعريف ، تعتبر هذه السمة معرفًا فريدًا ويجب أن تكون فريدة في صفحة HTML.

لماذا هذا؟

تُستخدم سمة id بشكل أساسي للوصول المباشر إلى العنصر في JavaScript. مثال للاستخدام:

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

هناك سيناريو آخر يمكن استخدامه (أسلوب أفضل لاستخدام الفئات القابلة لإعادة الاستخدام ، اعتمادًا على السيناريو الخاص بك) وهو استخدام نمط CSS ، مثل:

#myelementid {لون الخلفية: أحمر ؛ }}

سمة الاسم:

من ناحية أخرى ، تنطبق سمة الاسم على عناصر HTML معينة ، مثل الإدخال والزر والتحديد والمزيد.

لماذا هذا؟

يتم استخدام سمة الاسم لإرسال بيانات النموذج إلى خادم الويب. عندما نرسل نموذجًا ، يتم إرسال الإدخال والزر والتحديد وما إلى ذلك في عناصر HTML الخاصة بك باستخدام السمة ، وليس الاسم - وهو أمر مهم جدًا!

خذ بعين الاعتبار عنصر HTML التالي:

هذا البند:

  • إنه نوع من عنصر إدخال النص ، والذي يسمح لك بإدخال أحرف نصية
  • يحتوي على نص "المستخدم الفائق"
  • سمة id لها قيمة "username"
  • تحتوي سمة الاسم على القيمة "myusername"
  • يمكنك الاتصال به عن طريق:
document.getElementById ('username'). value = "megauser" ؛
  • يمكنك أيضًا التفاعل مع منتقي الاسم (حسنًا ، يمكنك القيام بذلك ، ولكن يوصى باستخدام سمة المعرف لأنها أكثر كفاءة):
document.querySelector ("input [name = 'myusername']"). value = 'testuser' ؛
  • يمكنك استخدام أنماط CSS مع محدد الهوية:
#username {font size: 700}
  • يمكنك أيضًا استخدام أنماط CSS مع المنتقي (يمكنك القيام بذلك ، ولكن هذا غير مستحسن لأنه في هذه الحالة يتم إرفاق الأنماط الخاصة بك بإحكام بمستندك - إذا قمت بإعادة تسمية العنصر ، فستفقد الأنماط.):
الإدخال [name = 'myusername'] {fill: 20px ؛ }}

ومع ذلك ، عند إرسال النموذج إلى الخادم ، لا يتم استخدام سمة المعرف وتزداد قيمة السمة. في هذه الحالة ، يتم إرسال قيمة الإدخال بقيمة "المستخدم الفائق" ، بالإضافة إلى قيمة "الاسم" للعنصر المقابل - لذا فإن المعلومات المقدمة هي كما يلي:

myusername = مستخدم خارق

هل يمكنني الحصول على عنصر HTML يحتوي على هاتين السمتين؟

بالطبع ، هاتان السمتان HTML مكملتان. يمكنك استخدام المعرف لنقل البيانات إلى الخادم للتفاعل مع JavaScript أو CSS والاسم.

في مواصفات HTML 3.2 (يناير 1997) ، يمكنك العثور على مراجع تفصيلية حول السمات والمرجع الوحيد للمعرف:

لا تحتوي HTML على سمات ID و CLASS و STYLE في هذا الإصدار.

وخلص إلى أن سمة الاسم تم إنشاؤها أولاً ومعرف لاحقًا.

المراجع: