معلومة على السريع
عنصر الـLabel من العناصر المهمة جدًا، مفيش موقع تقريبًا مفيهوش Form، وكل Form لازم ع الأقل يبقى فيه Input واحد، سواء كان Text أو Number أو غيره، وعشان نعرف المستخدم احنا عاوزين أنهي داتا بالظبط في الـInput ده بنستخدم العنصر اللي هنتكلم عنه النهاردة وهو الـLabel
الـLabel بيساعد المستخدم انه يتعرف على نوع الداتا المطلوبة في حقل ما، يعني مثلًا لو عندك Input متوقع ان المستخدم يدخل فيه الايميل بتاعه، هنا هتحطله Label مكتوب فيه (بريدك الإلكتروني) أو اللي انت عاوزه بحيث إنه يفهم الـInput ده هيدخل فيه البريد الإلكتروني، وهكذا
الـLabel كمان لما بتضغط عليه، بيعمل Focus ع الـInput اللي انت تحدده، وطرق تحديده سهلة وبسيطة
يعني الطريقة الأسهل على الإطلاق، هتحط الـInput جوة الـLabel، وده بيتسمى Nesting، ومش بتحتاج حرفيًا تعمل أي حاجة تانية، الطريقة التانية سهلة برضه ولكن بتديك حرية أكبر
وببساطة هي عن طريق الـFor Attribute، وهنا انت بتدي للحقل ID مخصوص، وبتضيفه للـLabel عن طريق الـFor Attribute، زي ما موجود في الصورة، ده بيسمحلك تحط الـLabel في أي مكان داخل الـForm انت عاوزه، وبيديك حرية أكبر في الـCSS Styling عامةً بحكم ان الـParent للـInput مش هيبقى الـLabel (لو مفهمتش النقطة دي مش مشكلة، لما نتكلم عن الـCSS بإذن الله هتستوعبها)
ولكن افرض حبيت تحط الـLabel برة الـForm كله، هل في طريقة ممكنة؟ والإجابة بإختصار أيوة.
تقدر تستخدم الـForm Attribute عشان تحدد الـLabel ده تابع لأنهي Form بالظبط، وبالضرورة لازم تدي للـForm ده ID بحيث تعرف تشاور عليه، زي المثال في الصورة برضه.
الـLabel من الحاجات الجميلة جدًا، واستخدمها يعتبر من استخدام الـSemantic HTML، ولو حاولت تعمل نفس وظيفتها بـSpan مثلًا هتضطر تكتب كود JS وCSS عشان تحقق نفس الوظيفة.
وبس كدة، ده الموضوع ببساطة، لو المعلومة مفيدة بالنسبالك متنساش تعرف غيرك بيها، سلام.
الجينيص
HTML5 Notes
الجينيص