Learn HTML In Arabic 2021 - #29 - Form Part 6 - Radio And Checkbox

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النهاردة إن شاء الله هنتعامل مع اتنين من الإنبوتس الرائعين جدا وهو الراديو والتشيك بوكس

يمكنني أن أخبرك أنك في أي موقع من المواقع التي تسجل فيها، هناك موقع تطلب منك معلومات عنك ويقول لك أنه أريد معلومات عن نظام التشغيل الذي تعمل به ويذهب ويديك ويندوز، لينكس، ميك ويقول لك اختار منهم فأنت تختار واحد من الثلاثة في مواقع أخرى أيضاً عندما تأتي تشترك يقول لك أنا أريد أن أرى هواياتك ويديك مثلاً 20 أو 30 هواية وتعلم على كذا واحدة منهم

الأولى هي Radio تختار شيء من مجموعة حاجات حاجة واحدة فقط Checkbox هو List of options تختار أكثر من شيء في نفس الوقت لكي تقولهم أن هذه الحاجات كلها التي شغلت بها

المثال الأول اللي قلتلك عليه إن لو جيت حد قالك أنت عايش في أنهي بلد ودك خمس بلاد أكيد يعني منطقي أنت مش عايش في بلدين في نفس اللحظة فبتختار واحدة من خمسة لكن ممكن حد يجي يقولك إيه لغات البرمجة والتصميم اللي أنت تعرفها فوارد جداً أنت كون عارف خمس ست لغات فأكيد هتختار أكتر منهم

هنا وفي المثال الاول الرديو. تعالوا مع بعض بقى نعمل كده هنا خط. ونبدأ نعمل بتاعنا عشان ده هيكون موضوعه ظريف جدا جدا جدا.

نبدأ نشوف اللي تشيك بوكس فكرته عاملة ايه عايزين اول حاجة نعمل المثال الاول اللي هو الخاص بالراديو ونشوف شخص عايز يعرف انت شغال على نظام تشغيل اسمه ايه يعني عندنا كم نظام تشغيل دلوقتي يا شباب؟ 3 عندنا الويندوز واللينكس والماك كل واحد فيهم هيكون محتود في ديفل وحده فيه بقى اللي تشيك بتاع او اللي هو الجزء انت تختار منه والليبل اللي بيعرفوه لك

هيا نقوم بعمل شكل الحاكل لنرى ما هو شكله هذا هو input type radio والنمو سيكون OS أو operating system هذا هو اسم الشخص الذي سيختاره operating system وما إلى ذلك والvalue سيكون اسم نظام التشغيل الذي يوجد هنا الآن ما هو اسمه أولاً windows

بالشكل ده. عظيم. لو رحت عملت الراديو ده الواحد وكده بالشكل ده هتلاقيه بص اختيار اقرع كده ما فيهوش اي حاجة مش مفهوم منه حاجة. تعالوا نعمل زوم كده. مش مفهوم ايه ده طبعا لازم احط جنبه يعرفني ايه ده. خلينا بالمرة كده نعمل ايه دي ار بينهم عشان ما يبقوش لازقين في بعض كده. عظيم. فين بقى اللي بيقول لي مين الاخ ده? طيب اول حاجة هتلاحزها انه اللي بتاع الانبوت تايب راديو والتشيك بوكس بيكون بعد الحقل مش قبله. ليه بعد الحقل?

هوريك لو عملناه دلوقتي قبل الحقول هيجرى ايه؟ ادي اللابل بتاعنا اللي احنا عمينا نعمله في الحقول كلها

الاختيار بتاعنا ده يا شباب اسمه ايه؟ اسمه ويندوز. اهو. ويندوز عظيم. بصوا ايه اللي حصل? هل انت عمرك شفت او اللي يكون هنا والاختيار بعده? لا. دايما بتلاقي الاختيار قبله. بالتالي اللي لازم يكون تحته بالشكل ده. ده اول واحد عندنا يا شباب الويندوز. عندنا منه تاني طبعا زي ما اتفقنا. اهو عندنا منه تاني. ادي التاني ودي التالت. عندك هنا ويندوز وعندك هنا لينكس. والفاليو بتاعته هتكون برضو

و عندك هنا ماك اللي هو قبل ماكينتوش وهنا برضو ماك التلاتة هيكونوا قدامك وهتختار منهم اللي انت عايزه ده او ده او ده تعالوا مع بعض كده بقى نروح نختار شوية بيانات كده بسرعة من اللي احنا بنكتبها ونختار واحد منهم وليكن ماك ونقوله

save هنا عايزة password كبيرة save اهو يا شباب شايفين يا شباب هنا الOS بيساوي Mac اللي هو الoperating system يبقى ده واحد من الاختيارات اللي احنا اخترناها هو الحمد لله وكله تمام وما عندناش ابدا اي مشكلة والحمد لله طيب

هذا كلام عظيم وبسيط وليس له أي تعقيدات الحمد لله هنا يوجد أتريبيوت جديد نتعلمه زريف جدا جدا جدا اسمه checkd checkd يفعل أنه عندما تفتح الصفحة يوجد خيارات معمولة لهم تشكك ما رأيكم يا شباب حتى ينتهي الدرس نذهب

ببساطة كده نهمش كل الحاجات دي عشان ما تفضلش تطلع لنا ونبقى كده رايقين للراديو واللي تشيك بوكس كده براحتنا ايه رأيكو يا شباب اه تمام انا موافق تعال نشوف مع بعض اهو كده عظيم خليني ابقى كده طيب ننزل بقى تحت شوية ونشوف انت عايز مين فيهم اللي يكون تشيك طبعا الويندوز يا شباب هو اغلب الحاجات الناس بتستخدمها فهنكتب هنا ايه

تشكت بالشكل ده تمام كده تعالوا نتفرج اول ما ادخل واعمل ريفليش هيحصل ايه عامل لي تشك على الويندوز اوتوماتيك عشان انت قلتله تشكت بس ده ما يمنعش ان اقدر اختار اي حاجة تاني براحتي اهو فيش مشكلة خالص اقول له سيف اخترت الماك اهو اخترت مثلا على سبيل المثال اللينكس اهو فيش مشكلة خالص عظيم وكله تمام وزي الفل طيب حد فيك واخد باله من حاجة

ستقول لي لا لم نأخذ بلدنا من شيء لا مشكلة ولا أنا أنا كمان لم أخذ بلدي من شيء دعونا نرى يا شباب نقطة مهمة هنا لو جئت تذهب إلى أي موقع من المواقع التي توجد فيها الراديو والشيك بوكس ستجد أن الشخص يدخل على الكلمة وليس هنا يدخل على الكلمة هل ترون؟ عندما يدخل على الكلمة لا يحدث شيء لماذا؟ لأن هذا اللابل ليس مربوط بالحقل هذا خالص يجب أن يتربطوا بعضهم لكي تستطيع أن تدخل على الكلمة هذه تذهب ونقوم بعمل شك هنا كأنك دخلت هنا بالضبط عسل قوي و تمام

هنا سيرجعنا لربط label بالإنبوت. يعني ليس هذا label فقط. لا. هذا label أيضا. وهذا label أيضا. وكل هذه labels. حسنا. تعالوا معاً نهمي واحد فقط.

ونترك هذا المرء معنا لنجرب عليه نفس التجربة كما أننا لدينا المرء و الثلاثة كيف نربط المرء بالإنبوت؟ عن طريق استخدام شيء يسمى ID الـ ID هو الـ Identifier هذا شيء عامل مثل الـ Class عندما ندخل في CSS سنتعلمه بالتفصيل لكننا فهمنا في الـ HTML ما هو الـ Attribute

هنا عندك الويندوز ده ده اللابل بتاعه اسمه ويندوز لو جيت عملت له اي دي بيساوي واكتب الاسم اللي يعجبني اوعد خلي حد يفرد عليك اسمه ويقولك الاسم ده لازم يقعد كذا اي اسم يعجبك ان شاء الله حرف الدبلو

ون. بس كده. طيب ازاي يعرف انه الليبل ده مرتبط بالايد ده. عن طريق الاتريبوت اللي اسمه فور. بصوا كده من الاسم كده بالانجليزي. لابل فور ون. بصوا كده اقروها كده بالانجليزي بعيد عن الاتش تيم ميل والبرمجة والتصميم والتوصيف والكلام ده كله. لابل فور ون. لابل فور اي دي ون. بس ده كده بقى مرتبط بدا. لو جيت دوست عليه دلوقتي على الويندوز خلينا هنا مسلا الاول. بصوا لما دوس على الويندوز هيحصل ايه?

و لكن اذا قمت بالضغط على المنزل لا يفتح الانبوت لديك قد تربط الانبوت بالنسبة لك باستخدام الاد بس لا اريد ان اخبطكم اذا كتبت اد و قلت له 4 الاد فاكتبت اد و اذا قمت بالضغط على الويندوز سيفتح الاد هذا اجراب افضل و لا يجب ان تدخل فيه الان اذا قمنا باللينكس اد يساوي

لن بس بمزاج يعني. كده اللينكس كمان بقى نفس الكصة تدوس على الكلمة او تدوس على اللي هو اللي تشك نفسه ده مفيش مشكلة هيشتغل. لكن عشان الكلمة تيجي تدوس عليها كده تختار. كده فاضل لنا اخر حاجة اللي هي اي دي بيساوي اخر حاجة عندنا اسمه ماج وهنا لابل فور

نفس القصة بالضبط كده تمام وعظيم تيجوا بقى نعمل التجربة هنا نشوف هتعمل ايه? وهنعمل في ده

اسمه نم بس تعال نشوف بقى هنا في النمبر ايه الكصة انت اصلا بتكتب كده عادي فيش مشكلة هنا لما تيجي تدوس على كلمة نمبر هيخليك تكتب شايفين عشان الليبل ده مرتبط هنا يعني مجرد ان انت تدوس هنا يخليك تكتب كأنك عملت فوكس على الحقل بالزبط خلاص عظيم وتعال بقى ايه يعني ارجع لثباتك العميق وهمشه تاني عشان ندخل على

نحن فهمنا الفكرة و أريد أن أقول لك أن الـ CheckBox لا يحتاج لشرح نفس ما قمنا به بالضبط سأخذ لك منه نسخة و سأريك الفرق بينهم ببساطة شديدة جدا جدا جدا أول شيء أريد أن أقول لك

أنه لا يمكن أن يتكرر الـ ID في الصفحة. الـ ID هذا اسمه Identifier. عامل مثل رقم البطاقة الخاص بك. لا يمكن أن يكون لديك اثنين في مصر نفس رقم البطاقة. الـ ID يجب أن تغير. فأنا سأكتب هذا Win1 و Win1 و هذا Lin1 و هذا Lin1. لكي أغير أسماءه بشكل كهذا. والحق لها أن يغير نوعه من Radio إلى Checkbox. فقط. و صلى الله و بارك.

ومع المشكلة التي تشكت لا يوجد مشكلة جداً، تركها كما هي. دعنا نرى فرق الحقول في الشكل أولاً. ترى الشكل؟ العلامة الصحي هذه يعني أن هناك مجموعة من المشكلات، يمكنني أن أقوم بعمل مشكلة على هذا وذلك مع بعض. هذا هو الراديو، يجب أن يكون واحد منهم مجرد ما تختاره. ترى يا شباب؟ لكن هذا عادي جداً، إما تختار الثلاثة أو لا تختاره جدًا. لا يوجد مشكلة جدًا. ترى؟ لا يوجد أي اختلاف بينهم نهائياً، فأي شيء

غير ان انا غيرت بس ال ID زي ما انتم شايفين وغيرت نوع ال Input ل CheckBox فاصبح ان انا قادر اختار اكتر من واحد يبقى واحد عندنا بتختار One or More Option اللي هو ده وواحد The Only Option بتختار ال Option الوحيد لما تجيلك بقى فكرة في المشروع بتاعك تشوف الفكرة دي محتاجة الشخص عايز يختار اكتر من حاجة ولا لازم يختار حاجة واحدة وبناء عليها بتحط ال Input المناسب

التجارب والتطبيقات العملية اللي ان شاء الله في المستقبل هتاخدوها موجودة في القناة تطبيقات عملية كتير التطبيقات هتخليك توظف الحاجات دي اكتر وتفهمها اكتر واكتر انت هنا فهمت الحمد لله الاساس وفهمت الفكرة لكن مع التطبيقات العملية بإذن الله هتعمل شغل حلو جدا يارب يا جماعة الدرس يكون بسيط وسهل وعجبكو اشوفكم شو الله في درس جديد والسلام عليكم