ومرحبا بكم من جديد.
سندخل في بعض العلامات الأكثر تقدمًا وربما تكون العلامة الأكثر أهمية التي ستستخدمها بخلاف تلك
التي قمنا بتغطيتها حتى الآن هي العلامات التي نحتاجها لإنشاء نماذج.
كما تعلم ، عندما تذهب إلى مواقع الويب ، عادة ما يكون هناك نوع من نموذج تسجيل الدخول أو التسجيل.
لذلك سنقوم ببناء ذلك اليوم.
للبدء ، دعنا فقط ننشئ ملفًا جديدًا هنا.
سنحفظه ونسميه HTML مسجل على سطح المكتب لدينا.
مثالي ونعلم أننا نريد HTML ، لذلك نستخدم الاختصار الصغير الخاص بنا وسنقوم بتسميته
، وحفظه.
والآن في ملف HTML المفهرس ، دعنا نضيف رابطًا آخر.
أن المراجع.
يسجل.
لغة البرمجة.
وسأقول فقط هنا ، سجل.
حسنا.
سنقوم بحفظ كلا هذين الملفين ودعنا نقوم بالتحديث.
لقد سجلنا.
انقر فوق تسجيل.
حسنًا ، ليس لدينا أي شيء حتى الآن ، لكن يبدو أنه يعمل.
دعنا نضيف هذا في سطر جديد فقط لأنه يبدو أجمل بهذه الطريقة.
للقيام بذلك ، إذا كنت تتذكر ، فسنضيف علامة كسر.
لذلك دعونا نحدث.
ها أنت ذا.
لدينا صفحة جديدة والتسجيل.
لذلك دعونا نبني هذا النموذج.
إذا ذهبنا إلى تسجيل نقطة أتش تي أم أل.
الطريقة التي نكتب بها النماذج بتنسيق HTML مع وجود علامة نموذج بشكل ملائم.
تمام.
لكن علامة النموذج هذه نفسها ، يجب أن تحتوي على الشكل الفعلي بداخلها.
إذن ما نوع عناصر الشكل لدينا؟
حسنًا ، مرة أخرى ، إذا تذكرنا صديقنا القديم الجيد W3C ، فلنكتب النماذج.
ويمكننا أن نرى هنا أن لدينا نماذج HTML.
وتجديد.
سنجعل ذلك ملء الشاشة.
ويمكنك أن ترى هنا أن هناك الكثير من المعلومات حولها ، ولكن يمكنك البحث عنها بنفسك
الآن.
سأقدم لكم أكثرها شيوعًا ، ربما تلك التي ستستخدمها 90٪ من الوقت.
الأول ، كما نفعل مع أي نموذج ودعنا نذهب إلى تلك الصفحة الآن هو ما نريد إدخال اسمنا.
فكيف لنا أن نفعل ذلك؟
لدينا علامة إدخال.
يحتوي هذا على نوع من النص لأنه ، حسنًا ، سيكون اسمنا في شكل نصي.
ويمكننا إغلاق ذلك.
وهي في الواقع علامة ذاتية الإغلاق.
الآن إذا قمت بالحفظ والتحديث ، فلدينا صندوق صغير هنا.
نأمل أن تتمكن من رؤية ذلك.
لكن حسنًا ، ربما يجب أن نسميها لأننا لن نعرف ماذا ندخل بهذه الطريقة.
لذلك سنضع هنا ، سنقول الاسم الأول.
فاصلة منقوطة وحفظ.
دعونا نحدث.
لدينا الاسم الأول والآن دعونا نجعل هذا أكبر قليلاً.
ها أنت ذا.
الآن يمكنك إدخال اسمك هنا.
رائع.
حسنًا ، دعنا نضيف واحدًا آخر لاسم العائلة.
ومرة أخرى ، لدينا نوع الإدخال.
إذن فهذه سمة وقيمة للنص.
وإذا قمنا بالتحديث ، فلدينا اسم العائلة.
حسنًا ، لكنه يبدو قبيحًا نوعًا ما.
تذكر أن HTML يقرأ سطراً بسطر فقط ولا يعرف حقًا أننا نريد مساحة هنا.
لذا مرة أخرى ، يمكننا إضافة a.
علامة الفرامل هنا وتحديث.
ولدينا الاسم الأول والاسم الأخير.
تمام.
هذا واضح إلى حد ما الآن.
ماذا ليدنا ايضا؟
في شكل؟
لدينا بريد إلكتروني.
لذلك دعونا نضيف حقلاً آخر ، وهو البريد الإلكتروني وسنقوم بالإدخال مرة أخرى ، ونكتب المكالمات ، والرسائل النصية.
سنضيف فاصلًا آخر هنا لأننا سنحتاج إلى هذا التباعد.
ودعنا نحفظ التحديث.
رائع.
تمام.
لذلك لدينا نموذج التسجيل العام الخاص بنا.
ومن الواضح أنه مع أي نموذج ، نحتاج إلى نوع من الأزرار ، مثل أننا نحتاج إلى إرسال هذا في مكان ما حتى نتمكن
من التسجيل.
حسنًا ، مرة أخرى ، هناك نوع إدخال جيد لذلك.
لذلك نقوم بالإدخال بدلاً من نوع النص.
هناك نوع الإرسال.
إذا هذا.
إذا أضفنا استراحة أخرى هنا.
وأنا أحفظ هذا ، وأقوم بتحديثه به زر إرسال.
الآن ، من أين أتى هذا الإرسال؟
حسنًا ، عندما تضع نوع إدخال إرسال ، فإنه ينشئ زرًا تلقائيًا.
وإذا لم تحدد ما ستقوله ، فسيكون لديك هذا النص فقط.
لكن يمكننا تغيير ذلك حتى نتمكن من وضع قيمة.
وسنضع سجلاً.
احفظ هذا التحديث.
لدينا الآن زر التسجيل.
تمام.
ولكن ماذا لو ارتكبنا أخطاء في هذا المجال؟
نكتب أشياء ، حسنًا ، نريد إعادة تعيين هذا مرة أخرى ، هناك مدخل آخر لذلك.
ونوع هذا الإدخال ، كما يمكنك أن تتخيل ، يتم إعادة تعيينه.
الآن إذا أغلقنا هذا الإعلان ، حدث فاصل آخر هنا ، في الواقع ، يمكننا الاحتفاظ بذلك على نفس السطر.
سنقوم بحفظ التحديث.
وقمنا بإعادة الضبط.
والآن إذا قمت بكتابة أي شيء هنا ودعونا نقول إنني لا أريد ذلك جيدًا ، فأنا لا أحب هذا.
أحتاج إلى إعادة ضبط النموذج.
يمكنني فقط النقر فوق إعادة تعيين وهو يمسح كل شيء بالنسبة لنا.
تمام.
قد تسأل نفسك ماذا؟
ماذا يحدث عندما نضغط على تسجيل؟
قبل أن ندخل في ذلك ، أريد فقط استعراض جميع أنواع المدخلات الشائعة ، ثم سنضغط على
السجلات لمعرفة ما يحدث مع البريد الإلكتروني.
نريد بشكل مثالي ، أولاً وقبل كل شيء ، أن تكون مطلوبة بحيث عند النقر فوق "تسجيل" ، إذا لم
تقدم بريدًا إلكترونيًا ، فلن يسمح لك بالتسجيل.
وهناك سمة يمكننا استخدامها لذلك وهي مطلوبة.
وهنا لا يتعين علينا في الواقع تحديد قيمة لأنه يفترض تلقائيًا أن المطلوب يساوي صحيحًا
، مما يعني أن حقل النموذج هذا مطلوب.
لذلك إذا قلت إنني أقوم بالتحديث وتركته فارغًا وقمت بالنقر فوق "تسجيل" ، فسأقول ، من فضلك املأ هذا الحقل.
الآن نريد أيضًا التأكد من أنه حقل بريد إلكتروني مناسب.
لذلك إذا كتبت شيئًا كهذا ، فما زلنا نريد التأكد من أن هذا بريد إلكتروني غير صحيح.
لا نريد التسجيل.
لذا فإن نوع إدخال النص الذي أخبرتك به للبريد الإلكتروني هو في الواقع خطأ.
هناك واحد محدد يمكننا استخدامه ، وهو ، كما يمكنك أن تتخيل ، البريد الإلكتروني.
الآن إذا قمت بالتحديث وكتبت شيئًا ليس بريدًا إلكترونيًا وقمت بالنقر فوق تسجيل.
سأقول من فضلك قم بتضمين التطبيق وعنوان البريد الإلكتروني.
لطيف جدًا.
إنه نوع من السحر.
إنه يفعل هذا من أجلك ، وهو أمر لطيف للغاية.
دعنا نتوسع في معرفتنا بالمدخلات ونضيف المزيد من الحقول التي من المرجح أن تحتاجها.
عادة تريد أن تعرف عيد ميلاد شخص ما.
لذلك دعونا نضيف عيد ميلاد هنا.
ولنوع الإدخال هذا ، دعنا نكتب.
تاريخ.
لذا إذا حفظت هذا وقمت بالتحديث ، انظر إلى ذلك.
لدينا منتقي تاريخ صغير لطيف.
لذا يمكنني اختيار أي شيء هنا.
حسنا.
ماذا نحتاج ايضا؟
نحن أيضا بحاجة إلى الجنس.
لذلك سنفعل الإدخال ، اكتب.
وللجنس.
حسنًا ، لا يوجد نوع إدخال محدد للجنس ، ولكن هناك شيء يسمى الراديو.
والراديو ، كما يوحي الاسم ، هو أزرار الاختيار.
و الآن.
أقوم بالنقر فوق "تحديث" وبصحة جيدة ، لدي زر اختيار واحد ، لكننا نريد بشكل مثالي الحصول على خيارات ، أليس كذلك؟
فكيف لنا أن نفعل ذلك؟
لذا بالنسبة للراديو ، نحتاج أيضًا إلى تحديد ما إذا كان ذكرًا أم أنثى ، دعنا ندخل ضمن الجنس.
سنحصل على استراحة هنا في السطر وسنقول.
نوع الإدخال راديو وسنقول البريد.
ونريد أيضا.
أنثى.
ونريد أيضا.
آخر.
وعندما نقوم بتحديث هذا ، يكون لدينا ذكر وأنثى وآخرون.
لكنك ترى مشكلة هنا.
أقوم فقط بالنقر فوق أزرار الاختيار ولا يمكنني إلغاء تحديدها.
ومن الناحية المثالية ، يمكنك أنت فقط اختيار واحد.
والآن ، بالطريقة التي تعمل بها أزرار الراديو ، لا يعرفون بوجود بعضهم البعض.
نريد أن نتأكد من أنهم يعرفون أنهم متصلون ، وأنهم عائلة ، ويمكن اختيار واحد منهم
فقط.
فكيف لنا أن نفعل ذلك؟
الطريقة التي نفعل بها ذلك هي من خلال سمة الاسم.
لذلك بالنسبة للاسم سنقول الجنس.
ويجب أن تتطابق سمة الاسم هذه مع جميع أزرار الاختيار حتى يعرفوا أنهم معًا جزء
من حقل إدخال الجنس.
لذلك إذا حفظت هنا وقمت بالتحديث.
الآن يمكنك أن ترى أنه يمكنني اختيار واحد فقط.
حسنًا ، رائع.
ماذا يجب ان يكون لدينا؟
حسنًا ، لنفترض أنني أريد حقًا معرفة ما إذا كان لديك حيوانات أليفة.
حتى مع الحيوانات الأليفة.
سيكون لدينا نوع الإدخال.
حسنًا ، يمكن أن يكون لديك عدة حيوانات أليفة ، لذلك لن تكون أزرار اختيار.
نريد مربع الاختيار.
لذا ، نريد أن يكون مربع الاختيار لدينا قطط أو لنضع قطة ونريد الحصول عليها.
يمكن أن تكتب اليوم.
خانة الاختيار ، ونريد أن يكون لدينا كلاب.
لذلك دعونا نحفظ ذلك.
دعونا نحدث ونلقي نظرة على ذلك.
لدينا حيوانات أليفة ، لكنها هذه المرة مربعات اختيار ، مما يعني.
يمكنني اختيار متعددة.