لفرق بين الـ Attributes التالية (name,id,for"input) في HTML

مرحبًا ناصر..

1 - الخاصية id عبارة عن معرف مميز يعطى لعناصر الhtml و من المفترض أن لا يمتلك عنصرين نفس الid فهو أشبه بالبصمة أو بالرقم الوطني للعنصر و يتم إستخدامه أينما إحتجت للوصول إلى عنصر ما  عن طريق الجافاسكربت أو css كما أن للid أولوية على name في css.

2 - الخاصية name تستخدم لحقول الhtml مثل input أو select حيث أن هذا الإسم سيتم إرسالة مع البيانات إلى السيرفر عند إرسال بيانات الفورم عبر get أو post.

3 - أما بالنسبة للخاصية for فهي تستخدم لربط عنصر label بحقل input معين , أولًا نقوم بعمل حقل input و نعطيه خاصية id و من ثم نقوم بعمل عنصر label و نعطيه خاصية for و يجب أن تكون قيمة الخاصية for مطابقة لقيمة الخاصية id للعنصر  الذي ترغب بربط الlabel به , ما الفائدة من ربطهم ببعضهم البعض؟ سأقوم بذكر نقطتين الأولى عند ربط عنصر label بعنصر input عن طريق الخاصية for في الأجهزة التي تقوم بقراءة الشاشات المخصصة لمن يعانون مشاكل في الرؤية عند الضغط على عنصر input سيقوم القارئ بقراءة النص المكتوب في عنصر label المربوط به , تانيًا عند الضغط على الlabel سيقوم بتركيز الإنتباه على حقل الinput المرتبط به و هذا يساهم في تحسين تجربة المستخدم.

بتاريخ 4 دقائق مضت قال Nezar Madi:

مرحبًا ناصر..

1 - الخاصية id عبارة عن معرف مميز يعطى لعناصر الhtml و من المفترض أن لا يمتلك عنصرين نفس الid فهو أشبه بالبصمة أو بالرقم الوطني للعنصر و يتم إستخدامه أينما إحتجت للوصول إلى عنصر ما  عن طريق الجافاسكربت أو css كما أن للid أولوية على name في css.

2 - الخاصية name تستخدم لحقول الhtml مثل input أو select حيث أن هذا الإسم سيتم إرسالة مع البيانات إلى السيرفر عند إرسال بيانات الفورم عبر get أو post.

3 - أما بالنسبة للخاصية for فهي تستخدم لربط عنصر label بحقل input معين , أولًا نقوم بعمل حقل input و نعطيه خاصية id و من ثم نقوم بعمل عنصر label و نعطيه خاصية for و يجب أن تكون قيمة الخاصية for مطابقة لقيمة الخاصية id للعنصر الذي ترغب بالحقل الذي ترغب بربط الlabel به , ما الفائدة من ربطهم ببعضهم البعض؟ سأقوم بذكر نقطتين الأولى عند ربط عنصر label بعنصر input عن طريق الخاصية form في الأجهزة التي تقوم بقراءة الشاشات المخصصة لمن يعانون مشاكل في الرؤية عند الضغط على عنصر input سيقوم القارئ بقراءة النص المكتوب في عنصر label المربوط به , تانيًا عند الضغط على الlabel سيقوم بتركيز الإنتباه على حقل الinput المرتبط به و هذا يساهم في تحسين تجربة المستخدم.

شكراً لك، جوابك كان مفصل وما أحتاجه بالضبط.
تمنياتي لك بالتوفيق صديقي.

عندي سؤال آخر متعلق بموضوع الـ name و الـ id.
هل من الضروري أن أقوم بإعطاء كل وسم name و id أم فقط الوسوم التي سيتم استخدامها؟ (كبرمجة مثلى).

بتاريخ 57 دقائق مضت قال Naser Dakhel:

عندي سؤال آخر متعلق بموضوع الـ name و الـ id.
هل من الضروري أن أقوم بإعطاء كل وسم name و id أم فقط الوسوم التي سيتم استخدامها؟ (كبرمجة مثلى).

ليس من الصحيح إعطاء كل وسم هذه الخواص، ولكن فقط عند الحاجة إلى ذلك.

يمكن أن تقوم في هذه الصفحة بعمل inspect لكود الHTML المكتوب للإطلاع على الوسوم، كمثال على الطريقة المثلى للبرمجة، بالضغط على F12 إذا كنت تستخدم متصفح chrome، أو ضغط الزر الأيمن للماوس وinspect أو view page source ويمكنك أن ترى أن معظم الوسوم هي بدون id أو name.

تحياتي