Learn HTML In Arabic 2021 - #24 - Form Part 1 - Input Types And Label

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

لو جيت مثلاً عايز تسجل اكونت لصاحبك على الفيسبوك مثلاً دلوقتي هتلاقي صفحة رئيسية فيها كده جزء صغير اسمه sign up عشان تسجل لصاحبك عضوية جديدة هتلاقي فيها حقل ادخال كده اسمه username والpassword والإيميل وبعدين بتبعت البيانات دي للفيسبوك

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

سنغلق هذا الكلام حتى نصل إلى الدروس القادمة سنشرحه بإذن الله. فرمينا عبارة عن element عادي جداً تستطيع وضع كل ما تريده. تستطيع وضع dev, paragraph, heading أي شيء تريده. لا يوجد أي مشكلة نهائية.

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

تعالوا مع بعض نبدأ بأول عنصر عندنا وهو الـ "Input Field" اللي انت بتكتب فيه كلام آه دي العنصر بتاعنا هنلغي الـ "Type" ده دلوقتي لحد ما نوصل له بإذن الله في الفيديو اللي احنا فيه ده الـ "Input" يا شباب ببساطة شديدة هو حقل بتكتب فيه كلام زي كده فيش فيه أي مشكلة خالص

طيب لو أنا عندي 2 input بالشكل ده أعيز أول حاجة أعرف شوية معلومات عنه عنصر الإنبوت بتاعي يا جماعة عنصر inline لو نزلت تحت شوية هنا وبصيت كده تلاقي حاجة اسمها inline block هنتعلمها في CSS إن شاء الله أنا عارف الناس اللي بتزعل من إحنا ندخل CSS ما دخلتهاش والله العظيم أنا بقول بس معلومة مش أكتر

إذا وضعت العنصر أكثر من input يجب أن يكون جانباً بعضاً. النقطة الثانية والأهم هي أن العنصر لا يملك قفلة. Self-closing tag يقفل نفسه بنفسه كما اتفقنا قبل. وهذه فرصة لأننا طول الكورس نعرف العناصر التي لها قفلة والعناصر التي لا تملك قفلة.

حسناً، إذا كنت تريد أن تكتب اسمك هنا، فأنت تجب أن تكتب اسم أسامة، وإذا كنت تريد أن تكتب باسورد أسامة، فأنت تجب أن تكتب أسامة 123، إنها لست تستخدم باسورد. هنا هناك مشكلة، المفروض أن هذا العنصر باسورد، يوجد هنا نجوم، وليس كلام مثل هذا. أنت لست محدد له نوع، سنبدأ بأن نحدد النوع. نوع الـ "text" في حقل الخاص بي هنا.

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

لا يوجد مشكلة. وهنا يأتي دور النوع. لدينا الكثير من النوع من المفيدات التي سنتحدث عنها في الفيديوهات القادمة. اليوم سنقوم بإعطاءها على الـ Form ونتعرف عليها لكي نفهم الأمر. حسناً، هذا الكلام عظيم وجميل. دعونا نقول الآن

أنني لا أعرف ما هو هذا الحقل وما هو هذا الحقل هناك بعض الأمور المقدمة التي سوف نتعلمها في المستقبل يمكن أن نعرف هذا الحقل وما هو هذا الحقل لكننا نريد أن نذهب ونذهب إلى السلم خطوة خطوة كيف تعرف الشخص أن هذا الحقل هو حقل الـ username وأن هذا الحقل هو حقل الـ password تقول له يا الله يا عمي ما هذا الذكاء كما كتب كذا بقى password وكتب هنا عرف أنه كذا عرف بقى من أين ممكن هنا الاسم لا يكون الاسم ممكن يكون الـ subject ممكن يكون تليفونك ممكن يكون أي شيء طيب

لدينا شيء يسمى Label من الـPaste Practice ومن الحاجات المهمة جداً التي يجب أن تستعملها ونقوم بإزالة هذا الـ4 حتى نفهم كل شيء بالتفصيل Label يوصف المفت الذي تضعه يتكلم عنه أو يتابع منه هذا الـLabel عامل كما ترون في السوبر مارك

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

your password أو نكتب عليه كلمة password وهنا في ال label الأولاني هنكتب كلمة

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

ونحن لم نتعلم السي اس اس فماذا سنفعل ؟ سنقوم بعمل بريك بينهم بسيط وظريف بدون استخدام السي اس اس لأجل الناس الذين يتزعجون حسناً، هذا كلام عظيم وظريف لا يوجد فيه أي مشكلة تعرفنا على الـForm وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput وإنه يوجد أنواع من الـInput

بعد ذلك يا شباب فضل لنا بعض العناصر الجميلة في الـForm بعض الـAttributes المهمة جداً فقط فضل لنا شيء أخير قبل أن نقفل الفيديو ما هي الزرار الذي ستضغط عليه لكي ترسل هذه البيانات؟ كيف سنفعل ذلك؟ سنكتب هنا Input آخر ما هو Input؟ ما هو النوع الذي يجب أن تضغط عليه؟ نوعه Submit انظر إلى اسمه Submit يعني سأرسل هذه البيانات كلها بهذا الشكل

سأكتب هنا أسامة و سأكتب هنا ال password و سأقول له تفضل submit حتى ستلاحظون أن الصفحة تعمل لها refresh ستلاحظ علامة end فوقها وهي و هذه لسه لينة معاها قاعدة يعني أنا المفروض دلوقتي عملت refresh للصفحة و بعدت البيانات دي للصفحة كده يا شباب تعرفنا على ال inputs الأساسية و سنكمل مع بعض الأنواع في الدروس اللي جاية بإذن الله يا رب يا جماعة الدرس يكون بسيط و سهل و عجبكم أشوفكم إن شاء الله في درس جديد و السلام عليكم